Учебник по цветам

Цвета отображаются комбинацией КРАСНОГО, ЗЕЛЕНОГО и СИНЕГО света.


Названия цветов

С помощью CSS цвета можно задавать с помощью имен цветов:

Пример

Color Name
 Red
 Yellow
 Cyan
 Blue
 Magenta

Значения цвета CSS

С помощью CSS цвета можно задавать разными способами:

  • По названиям цветов
  • Как значения RGB
  • Как шестнадцатеричные значения
  • Как значения HSL (CSS3)
  • Как значения HWB (CSS4)
  • С currentcolorключевым словом

Цвета RGB

Цветовые значения RGB поддерживаются во всех браузерах.

Значение цвета RGB указывается с помощью: rgb( КРАСНЫЙ , ЗЕЛЕНЫЙ , СИНИЙ ).

Каждый параметр определяет интенсивность цвета как целое число от 0 до 255.

Например, rgb(0,0,255) отображается как синий, потому что для синего параметра установлено максимальное значение (255), а для остальных установлено значение 0.

Пример

Color RGB Color
  rgb(255,0,0) Red
  rgb(0,255,0) Green
  rgb(0,0,255) Blue

Оттенки серого часто определяются с использованием одинаковых значений для всех трех источников света:

Пример

Color RGB Color
  rgb(0,0,0) Black
  rgb(128,128,128) Gray
  rgb(255,255,255) White


Шестнадцатеричные цвета

Шестнадцатеричные значения цвета также поддерживаются во всех браузерах.

Шестнадцатеричный цвет указывается с помощью: # RR GG BB .

RR (красный), GG (зеленый) и BB (синий) — шестнадцатеричные целые числа от 00 до FF, определяющие интенсивность цвета.

Например, #0000FF отображается синим цветом, потому что для синего компонента установлено максимальное значение (FF), а для остальных установлено значение 00.

Пример

Color HEX RGB Color
  #FF0000 rgb(255,0,0) Red
  #00FF00 rgb(0,255,0) Green
  #0000FF rgb(0,0,255) Blue

Оттенки серого часто определяются с использованием одинаковых значений для всех трех источников света:

Пример

Color HEX RGB Color
  #000000 rgb(0,0,0) Black
  #808080 rgb(128,128,128) Gray
  #FFFFFF rgb(255,255,255) White

Верхний регистр или нижний регистр?

Вы можете использовать прописные или строчные буквы для указания шестнадцатеричных значений.

Нижний регистр легче писать. Верхний регистр легче читать.


Названия цветов

CSS поддерживает 140 стандартных названий цветов.

В следующей главе вы найдете полный алфавитный список названий цветов с шестнадцатеричными значениями:

Color Name Hex Color
AliceBlue #F0F8FF  
AntiqueWhite #FAEBD7  
Aqua #00FFFF  
Aquamarine #7FFFD4  
Azure #F0FFFF  
Beige #F5F5DC  
Bisque #FFE4C4  

Ключевое слово текущего цвета

Ключевое currentcolorслово относится к значению свойства цвета элемента.

Пример

Цвет границы следующего элемента <div> будет синим, потому что цвет текста элемента <div> синий:

#myDIV {
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}