Способы установки цвета СSS

С помощью CSS можно задавать цвета разными способами, ниже приведены некоторые из них, на примере текста, с таким же успехом можно применять их и для того чтобы задавать цвет блоков, страниц и т.п., применив свойство background-color.

Способ 1 - пишем цвет

1. Словесное предопределённое название цвета, например зеленый - green и красный - red.

   стиль СSS:
   .sample-1-1 {
   color: green;
   }
   .sample-1-2 {
   color: red;
   }
   код html:
   <h2 class="sample-1-1">Словесное предопределённое название цвета - зеленый</h2>
   <h2 class="sample-1-2">Словесное предопределённое название цвета - красный</h2>
   

   Результат:

   Словесное предопределённое название цвета - зеленый

   Словесное предопределённое название цвета - красный

2. Шестнадцатеричное значение RGB-кода цвета, например цвет текста оранжевый (красный апельсин) - #ff4500.

   стиль СSS:
   .sample-2 {color: #ff4500}
   код html:
   <h2 class="sample-2">Шестнадцатеричное значение RGB-кода цвета - оранжевый (красный апельсин)</h2>
   

   Результат:

   Шестнадцатеричное значение RGB-кода цвета - оранжевый (красный апельсин)

3. Процентные значения насыщенности RGB-кода цветов, например (10%,76%,21%), при этом значения процентов могут быть дробными.

   стиль СSS:
   .sample-3 {color: rgb(10%,76%,21%)}
   код html:
   <h2 class="sample-3">Процентные значения насыщенности  RGB-кода цветов, например (10%,76%,21%)</h2>
   

   Результат:

   Процентные значения насыщенности RGB-кода цветов, например (10%,76%,21%)

4. Числовое значения насыщенности RGB-кода цветов, например (108, 1, 22), при этом значения процентов могут быть дробными.

   стиль СSS:
   .sample-4 {color: rgb(108, 1, 22)}
   код html:
   <h2 class="sample-4">Числовое значения насыщенности  RGB-кода цветов, например (108, 1, 22)</h2>
   

   Результат:

   Числовое значения насыщенности RGB-кода цветов, например (108, 1, 22)

5. Система RGBA, аналогична RGB, но дополнительно включает альфа-канал, задающий прозрачность, например color: rgba(108, 1, 22,.8). То есть, четвертое значение определяет степень прозрачности в диапазоне от 0 (абсолютно прозрачный) до 1 (совершенно непрозрачный).

   стиль СSS:
   .sample-5 {color: rgba(108, 1, 22,.8)}
   код html:
   <h2 class="sample-5">Цвет текста в соответствии с заданным значением в пункте 4 к которому применена прозрачность 0.8</h2>
   

   Результат:

   Цвет текста в соответствии с заданным значением в пункте 4 к которому применена прозрачность 0.8