Цвет фона

Для того чтобы задать цвет фона какого либо элемента или всего HTML-документа в CSS предусмотрено свойство background-color параметрами которого являются цвета, в формате шестнадцатеричного кода, форматов RGB, RGBA, HSL, HSLA и других стандартных значений.


background-color: black;
background-color: #006699;
background-color: rgb(249, 201, 16);
background-color: rgba(163, 110, 29, 0.8);
background-color: hsl(212, 56%, 31%);
background-color: hsla(129, 60%, 19%, 0.8);
background-color: transparent;
background-color: inherit;

black – имя цвета.

#006699 – Шестнадцатеричный код. При такой записи формата цвета перед числами обязательно ставится решетка #. Запись так же можно делать сокращённой – #069.

rgb (249, 201, 16) – Аддитивное смешение цветов.

Аббревиатура RGB расшифровывается как: Red, Green, Blue, что в переводе с английского означает – красный, зелёный, синий. Цифры, записанные в скобках через запятую, указывают на величину цветового потока ( в данном случае 249 единиц – красный, 201 – зелёный, 16 – синий ).

rgba(163, 110, 29, 0.8) – Аддитивное смешение цветов с добавленным альфа-каналом регулирующим прозрачность.

Аббревиатура RGBA расшифровывается как: Red, Green, Blue, Alpha. Все параметры кроме прозрачности аналогичны RGB. При выборе значения прозрачности равным 0.5, элемент становится полупрозрачным, 0 делает объект полностью прозрачным, а 1 отменяет прозрачность.

hsl(212, 56%, 31%) – формат HSL – Hue (оттенок), Saturation(насыщенность), Lightness(осветление). Значение 212 – оттенок в градусах ( 0 – 360 ), 56% – насыщенность, 31% – осветление.

hsla(129, 60%, 19%, 0.8) – формат цвета HSLA – Hue, Saturation, Lightness, Alpha(альфа-канал). Цветовое значение в формате HSLA аналогично HSL, но с добавлением регулировки прозрачности как в RGBA.

transparent – прозрачный фон.

inherit – наследование.


HTML

<div class="four-columns">

  <div class="column">
    <div class="box white">
      white
    </div>
  </div>
  
  <div class="column">
    <div class="box silver">
      silver
    </div>
  </div>
  
  <div class="column">
    <div class="box gray hue">
      gray
    </div>
  </div>
  
  <div class="column">
    <div class="box black hue">
      black
    </div>
  </div>

</div>


CSS

.four-columns{
    overflow: hidden;
}
.four-columns .column {
    width: 25%;
    float: left;
}
.box{
    width: 140px;
    font-size: 22px;
    font-weight: bold;
    line-height: 50px;
    margin: 20px auto;
    text-align: center;
}
.hue{
    color: rgba(255, 255, 255, 0.9);
}


.white{
    background-color: white;
}
.silver{
    background-color: silver;
}
.gray{
    background-color: gray;
}
.black{
    background-color: black;	
}