<p>Ми можемо встановлювати колір для фону, використовуючи різні значення:</p>

<div class="demo">
   <div class="name"><p>gold</p></div> 
    <div class="hex"><p>#F12668</p></div> 
    <div class="rgb"><p>rgb(72, 102, 157)</p></div> 
    <div class="rgba"><p>rgba(72, 102, 157, 0.45)</p></div> 
    <div class="hsl"><p>hsl(0, 100%, 30%)</p></div> 
    <div class="hsla"><p>hsla(0, 60%, 77%, 0.7)</p></div> 
</div>
body {
    font-family: sans-serif;
    text-align: center;
    line-height: 1.45; 
    font-size: 18px;
    padding: 16px 16px 0 16px; 
}

.demo {
    font-family: monospace;
    font-weight: 700;
    text-align: center;
    font-size: 18px;
}

.name { background: gold; }
.hex { background: #F12668; }
.rgb { background: rgb(72, 102, 157); }
.rgba { background: rgba(72, 102, 157, 0.45); }
.hsl { background: hsl(0, 100%, 30%); }
.hsla { background: hsla(0, 60%, 77%, 0.7); }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.