CSS, HTML и многое другое…

Оригинал: Understanding CSS Colour modes

CSS2 и CSS3 предлагают целый ряд различных способов для назначения цвета. Большинство разработчиков задают цвета в шестнадцатеричном коде, некоторые задают цвета в RGB или указывая названия цветов. В CSS3 добавлены новые способы, с которыми не все знакомы. В этой статье описаны существующие и будущие способы назначения цветов.

CSS2

CSS2 предлагает нам 3 способа назначения цвета:

• шестнадцатеричный код (#RRGGBB)
• rgb(R,G,B,)
• по названию некторых цветов.

Шестнадцатеричный код

Вы наверняка уже знаете как выглядит цвет в шестнадцатеричном обозначении. Для каждого цвета (красный, зеленый, синий) есть две буквы или цифры, перед которыми надо вставить символ решетки #. Чем больше цифры, тем ярче цвет. Черный цвет — #000000, белый — #ffffff.

Шестнадцатеричный код использует систему из 16 единиц. Так как мы имеем только 10 цифр, то остальные 6 обозначаются буквами от A до F. В совокупности они образуют 256 оттенков на каждый цвет, что в целом дает около 16 млн. цветов.

Также существует сокращенная запись #RGB. при таком обозначении красный, зеленый и синий цвета имеют 16 оттенков, что в целом дает 4096 цветов. Это значит что #ff0000 и #f00 дадут один и тот же цвет.

rgb(R,G,B)

Вторым способом задания цвета является прямое назначение цветов в численном или процентном значении. Выглядит это так: rgb (255, 0, 0). 255 (100%) — красный, 0 (0%) — зеленый и 0 (0%) — синий. Как вы, возможно, уже догадались, такой вид записи также использует 256 оттенков для каждого из основных цветов.

Единственное отличие (кроме синтаксиса) от предыдущего метода в том, что мы используем свою систему подсчета. В теории это кажеться более легким для понимания, но после некоторого использования шестнадцатеричной системы вы легко ее запомните.

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

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

Название	Hex	Цвет
aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

CSS2 также позволяет использовать дополнительные системные цвета. Воспользовавшись этими цветами, вы можете создать страницу, которая будет выглядеть также как и элементы в вашей операционной системе. Цвета будут зависеть от системных цветов, установленных на вашем компьютере. Названия приведены в следующей таблице:

Название	Цвет
ActiveBorder
ActiveCaption
AppWorkspace
Background
ButtonFace
ButtonHighlight
ButtonShadow
ButtonText
CaptionText
GrayText
Highlight
HighlightText
InactiveBorder
InactiveCaption
InactiveCaptionText
InfoBackground
InfoText
Menu
MenuText
Scrollbar
ThreeDDarkShadow
ThreeDFace
ThreeDHighlight
ThreeDLightShadow
ThreeDShadow
Window
WindowFrame
WindowText

CSS3

Пришло время для самого интересного, того что станет доступно когда CSS3 станет стандартом. Начнем мы с некоторых вариаций режимов, определенных в CSS2:

RGBa

Одна из наиболее востребованных вещей в CSS при выборе цвета — это прозрачность. Хотя прозрачность присутствует в настоящее время, это не то, чего мы хотим, потому что на данный момент прозрачность относится ко всему контейнеру, а не к конкретному цвету. И что же эти умные люди из W3C сделали? Они добавили дополнительный параметр, контролирующий прозначность, к существующему обозначению RGB: rgba (255, 0, 0, 0.5) — ярко-красный цвет с 50%-й прозрачностью. Значение прозрачности можно устанавливать от 0 до 1.

RGBa поддерживается в firefox 3 и safari 3.

SVG цвета

В CSS2 был добавлен список названий цветов из HTML4, CSS3 делает то же самое с SVG. В SVG фактически включены все названия из HTML4, и еще 132 дополнительных, что в целом составляет 147 цветов. Полный список можно увидеть здесь. Появилось также еще одно новое обозначение currentcolor, цвет которого будет таким же как и цвет текущего элемента или унаследованное значение цвета.

Эти названия поддерживают все современные браузеры, за исключением IE, который не понимает «grey».

HSL

HSL устанавливает тон, насыщенность и яркость (Hue, Saturation and Lightness) и выглядит так: hsl (0, 100%, 50%). В данном случае цвет будет красным. HSL использует другую цветовую модель в отличии от RGB. Она принимает наш цветовой спектр в виде окружности (360 градусов). 0 — красный, 120 — зеленый, 240 — синий и 360 снова красный. Насыщенность — это количество серого в цвете. 100% — полное отсутствие серого, 0% — полностью серый. Яркость определяется в %. 0% — черный, 100% — белый и 50% — обычный цвет.

HSL поддерживает опера 9.5, safari 3, и браузеры на основе gecko.

HSLa

Точно так же, как и в RGB, в HSL добавили прозрачность. Устанавливается она также, как и RGBa, используя значения от 0 до 1.

HSLa поддерживается в firefox 3 и safari 3.

Заключение

На данный момент уже достаточно много способов с помощью которых можно установить цвет поддерживаются большинством современных браузеров. Конечно IE отстает, а новые способы из CSS3 поддерживаются только самыми современными.

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

А как вы считаете? Используете ли вы что-либо другое, кроме шестнадцатеричного способа, готовы ли вы экспериментировать с HSL? Поделитесь своим опытом в комментариях