В css существует несколько способов указания цвета:
Шестнадцатеричный цвет задается с помощью маски: #RRGGBB, где шестнадцатеричные целые числа RR (красный или red), GG (зеленый или green) и BB (синий или blue) определяют компоненты цвета. Все значения должны быть от 00 до FF (шестнадцатиричная кодировка).
Например, значение # 0000ff отображается как синий, потому что для синего компонента установлено максимальное значение (ff), а для остальных установлено значение 00.
#color1 {background-color: #ff0000;} /* red */
#color2 {background-color: #00ff00;} /* green */
#color3 {background-color: #0000ff;} /* blue */
Почти все браузеры поддерживают сокращенные шестнадцатеричные цвета. Триплеты RGB могут быть сокращены, если все шестнадцатеричные пары красного, зеленого и синего одинаковы. Поэтому, когда вы используете цвета, состоящие из трех пар, вы можете сокращать каждый цветовой канал, используя один символ вместо двух одинаковых символов. Если сократить цвета из предыдущего примера, то мы получим :
#color1 {background-color: #f00;} /* red */
#color2 {background-color: #0f0;} /* green */
#color3 {background-color: #00f;} /* blue */
Шестнадцатеричный цвет указывается с помощью: #RRGGBB. Чтобы добавить прозрачности, добавьте две дополнительные цифры между 00 и FF.
#color1 {background-color: #ff000080;} /* red */
#color2 {background-color: #00ff0080;} /* green */
#color3 {background-color: #0000ff80;} /* blue */
Значение цвета RGB задается встроенной функцией rgb (), которая имеет следующий синтаксис: RGB (красный, зеленый, синий) Каждый параметр (красный, зеленый и синий) определяет интенсивность цвета и может быть целым числом от 0 до 255 или процентным значением (от 0% до 100%). Например, значение rgb (0,0,255) отображается как синий, потому что для параметра blue установлено максимальное значение (255), а для остальных установлено значение 0. Также следующие значения определяют одинаковый цвет: rgb (0,0,255) и rgb (0%, 0%, 100%).
#color1 {background-color: rgb(255, 0, 0);} /* red */
#color2 {background-color: rgb(0, 255, 0);} /* green */
#color3 {background-color: rgb(0, 0, 255);} /* blue */
Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом, который определяет непрозрачность объекта. Цвет RGBA задается функцией rgba (), которая имеет следующий синтаксис: rgba (красный, зеленый, синий, альфа) Параметр альфа - это число от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
#color1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#color2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#color3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Аббревиатура HSL обозначает оттенок(hue), насыщенность(saturation) и яркость(lightness) и представляет собой представление цветов в цилиндрических координатах. Значение цвета HSL указывается с помощью функции hsl (), которая имеет следующий синтаксис:
hsl (оттенок, насыщенность, легкость)
Оттенок - это градус на цветовом круге (от 0 до 360) - 0 (или 360) - красный, 120 - зеленый, 240 - синий.
Насыщенность - это процентное значение; 0% означает оттенок серого, а 100% - полный цвет.
Яркость тоже в процентах; 0% - черный, 100% - белый.
Значения цвета HSLA являются расширением значений цвета HSL с альфа-каналом, который определяет непрозрачность объекта. Значение цвета HSLA указывается с помощью функции hsla (), которая имеет следующий синтаксис:
hsla (оттенок, насыщенность, яркость, альфа)
Параметр альфа - это число от 0,0 (полная прозрачность) до 1,0 (полная непрозрачность).
140 названий цветов предопределены в спецификации цветов HTML и CSS. Просмотреть весь список html цветов можно тут
