Оранжевый код. Учeбник HTML. Цвета RGB. Цвета безопасной палитры
Цвет в языке CSS можно задавать разными способами:
по названию,
по шестнадцатеричному значению,
в форматах RGB и RGBA,
в форматах HSL и HSLA.
Задание цвета по названию
Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, RGB код, шестнадцатеричный код (HEX) и HSL код.
Табл. 1. Названия цветов, их RGB, HEX и HSL код.
Имя
Цвет
RGB
HEX
HSL
Описание
white
rgb(255, 255, 255)
#ffffff или #fff
hsl(0, 0%, 100%)
Белый
silver
rgb(192, 192, 192)
#c0c0c0
hsl(0, 0%, 75%)
Серый
gray
rgb(128, 128, 128)
#808080
hsl(0, 0%, 50%)
Темно-серый
black
rgb(0, 0, 0)
#000000 или #000
hsl(0, 0%, 0%)
Черный
maroon
rgb(128, 0, 0)
#800000
hsl(0, 100%, 25%)
Темно-красный
red
rgb(255, 0, 0)
#ff0000 или #f00
hsl(0, 100%, 50%)
Красный
orange
rgb(255, 165, 0)
#ffa500
hsl(38.8, 100%, 50%)
Оранжевый
yellow
rgb(255, 255, 0)
#ffff00 или #ff0
hsl(60, 100%, 50%)
Желтый
olive
rgb(128, 128, 0)
#808000
hsl(60, 100%, 25%)
Оливковый
lime
rgb(0, 255, 0)
#00ff00 или #0f0
hsl(120, 100%, 50%)
Светло-зеленый
green
rgb(0, 128, 0)
#008000
hsl(120, 100%, 25%)
Зеленый
aqua
rgb(0, 255, 255)
#00ffff или #0ff
hsl(180, 100%, 50%)
Голубой
blue
rgb(0, 0, 255)
#0000ff или #00f
hsl(240, 100%, 50%)
Синий
navy
rgb(0,0,128)
#000080
hsl(240, 100%, 25%)
Темно-синий
teal
rgb(0, 128, 128)
#008080
hsl(180, 100%, 25%)
Сине-зеленый
fuchsia
rgb(255, 0, 255)
#ff00ff или #f0f
hsl(300, 100%, 50%)
Розовый
purple
rgb(128, 0, 128)
#800080
hsl(300, 100%, 25%)
Фиолетовый
Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.
RGB в CSS
MediumTurquoise
brown
crimson
blueviolet
rolivedrab
Вот как работает этот код:
Установка цвета с помощью RGB
RGB - аддитивная цветовая модель. На английском языкеaddition
- добавление. RGB - это аббревиатура английских слов: Red, Green, Blue - красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.
Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.
Ближе к делу.
Для установки свойств в этом формате используется запись rgb(r, g, b)
, где r, g, b - это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.
Пример кода.
Чтобы всё стало понятно, приведу пример кода:
RGB в CSS
rgb(255, 0, 0)
rgb(0, 255, 0)
rgb(0, 0, 255)
Вот так должен сработать этот пример:
Рис.1. Цвета в RGB.
Пояснения к примеру.
В начале страницы создаём класс div.rgb
, он нужен чтобы блоки созданные тегом
отображались нужным размером: 240px
на 40px
. Свойству line-height
(высота строки) присваиваем значение - 40px
, то есть равное высоте блока, это позволит отображать текст в блоке
по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align
: center
;}
.
Далее, в коде устанавливаем фоновый цвет блока
при момощи атрибута style
успользуя свойство background
, а значения присваиваем rgb(255, 0, 0)
, rgb(0, 255, 0)
, и rgb(0, 0, 255)
. То есть, мы поочерёдно делаем один канал максимально насыщенным, а остальные каналы не используются для синтеза, так как их значение равно нолю.
Попробуйте отредактировать этот пример и указать свои значения, например rgb(100, 100, 100)
.
Установка цвета с помощью RGBA
В CSS3 появился новый инструмент для работы с цветом - формат RGBA. Его можно назвать развитием модели RGB, но с добавлением одного нового канала - A или альфа-канала. Этот канал устанавливает прозрачность цвета. Его значения задаются в диапазоне от 0 до 1. Значение равное 0 соответствует полной прозрачности, 1 - полной непрозрачности (цвет будет таким, каким он задан в первых трёхканалах RGB), а промежуточные значения, как 0.4 или 0.6 - полупрозрачности в различной степени.
Пример кода.
RGBA в CSS3
Вот как он сработает:
Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:
RGBA в CSS3
Вот его результат:
Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в RGB-коде без изменений. Свойство rgba(255,0,0,1.0)
показывает красный цвет rgb(255, 0, 0)
.
По шестнадцатеричному значению (HEX-код)
В повсежневной жизни мы пользуемся десятичной системой счёта. Её истоки очень просты - у нас десять пальцев на руках, и считать по пальцам в жизни бывало удобно. Если в десятичной системе десять цифр: от 0 до 9, а число 10 - это уже следующий разряд, то в шестнадцатеричная система счисления 16 цифр, а следующим разрядом будет число 16.
Для указания кодов цветов в качестве шестнадцатеричных цифр используются обычные десятичные цифры от 0 до 9 и для обозначения цифр от 10 до 15 используют латинские буквы от A до F то есть (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Для наглядности сведём это в таблицу:
Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.
Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.
Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB
. Само значение #FFC0CB
состоит из трёх шестнадцатеричных цифр FF
, C0
и CB
. Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b)
) - каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.
HEX код в CSS
#FF0000
#00FF00
#0000FF
Этот код отобразит следующие элементы:
А вот рисунок с результатом из раздела "Установка цвета с помощью RGB" на этой странице выше.
Рис.1. Цвета в RGB.
Мы видим что цвета идентичны.
Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.
То есть допустимо следующее сокращение записи:
Например, цвет #ff22aa
допустимо написать так - #f2a
, или цвет #44aa22
допустимо указать в виде #4a2
.
Установка цвета с помощью HSL
В CSS3 появился новый формат для указания цвета.
Формат HSL - это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
Оттенок в HSL - это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° - синему цвету.
Значение оттенка изменятся в диапазоне от 0 до 359.
Рисунок 2. Цветовой круг HSL.
Второе значение - насыщенность (Saturate) задаётся в процентах. При 100% насыщенности цвет максимально "сочный", по мере движения показателя насыщеннсоти к 0%, цвет становится всё более тусклым и скатывается в серый.
Третье значение - светлота (Lightness) также задаётся в процентах. Чем выше процент, тем более яркий будет цвет. Крайние значения 0% и 100% будут обозначать соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, при этом неважно, какой цвет из цветового круга был выбран в первом канале. Оптимальным можно считать значение яркости цвета равное 50%.
Установка цвета с помощью HSLA
Формат HSLA соотносится с HSL, так же как и RGB с RGBA. В формате HSLA, как и в RGBA добавлен альфа-канал отвечающий за прозрачность цвета.
Цвет, заданный в формате HSL, читать более просто. Можно сказать что он интуитивно понятен. Например, код hsl(120,60%,50%) можно представить итоговый цвет, если в памяти есть картинка цветового круга HSL. Про форматы RGB и HEX такого сказать нельзя, код цвета заданный в этих форматах становится понятный только после его визуализации на мониторе.
Новые форматы в CSS3 (HSL, HSLA и RGBA) работают в браузерах начиная с версий: IE 9.0, Opera 10.0 Firefox 3.0. Как сделать так, чтобы стили работали на старых браузерах?
При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk
хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.
HEX / HTML
Цвет в формате HEX - это ни что иное, как шестнадцатеричное представление RGB.
Цвета представляются в виде трёх групп шестнадцатеричных цифр, где каждая группа отвечает за свой цвет: #112233, где 11 - красный, 22 - зелёный, 33 - синий. Все значения должны быть между 00 и FF.
Во многих приложениях допускается сокращённая форма записи шестнадцатеричных цветов. Если каждая из трёх групп содержит одинаковые символы, например #112233, то их можно записать как #123.
h1
{ color:
#ff0000;
} /* красный */
h2
{ color:
#00ff00;
} /* зелёный */
h3
{ color:
#0000ff;
} /* синий */
h4
{ color:
#00f;
} /* тот же синий, сокращённая запись */
RGB
Цветовое пространство RGB (Red, Green, Blue) состоит из всех возможных цветов, которые могут быть получены путём смешивания красного, зелёного, и синего. Эта модель популярна в фотографии, телевидении, и компьютерной графике.
Значения RGB задаются целым числом от 0 до 255. Например, rgb(0,0,255) отображается как синий, так как синий параметр установлен в его самое высокое значение (255), а остальные установлены в 0.
Некоторые приложения (в частности веб-браузеры) поддерживают процентную запись значений RGB (от 0% до 100%).
h1
{ color:
rgb(255, 0, 0);
} /* красный */
h2
{ color:
rgb(0, 255, 0);
} /* зелёный */
h3
{ color:
rgb(0, 0, 255);
} /* синий */
h4
{ color:
rgb(0%, 0%, 100%);
} /* тот же синий, процентная запись */
Цветовые значения RGB поддерживаются во всех основных браузерах.
RGBA
С недавних пор современные браузеры научились работать с цветовой моделью RGBA - расширением RGB с поддержкой альфа-канала, который определяет непрозрачность объекта.
Значение цвета RGBA задается в виде: rgba(red, green, blue, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
RGBA поддерживается в IE9+, Firefox 3+, Chrome, Safari, и в Opera 10+.
HSL
Цветовая модель HSL является представлением модели RGB в цилиндрической системе координат. HSL представляет цвета более интуитивным и понятным для восприятия образом, чем типичное RGB. Модель часто используется в графических приложениях, в палитрах цветов, и для анализа изображений.
HSL расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Lightness/Luminance (светлота/светлость/светимость, не путать с яркостью).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%).
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
HSLA
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha - это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
Цветовая модель CMYK часто ассоциируется с цветной печатью, с полиграфией. CMYK (в отличие от RGB) является субтрактивной моделью, это означает что более высокие значения связаны с более тёмными цветами.
Цвета определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK).
Каждое из чисел, определяющее цвет в CMYK, представляет собой процент краски данного цвета, составляющей цветовую комбинацию, а точнее, размер точки растра, выводимой на фотонаборном аппарате на плёнке данного цвета (или прямо на печатной форме в случае с CTP).
Например, для получения цвета «PANTONE 7526» следует смешать 9 частей голубой краски, 83 частей пурпурной краски, 100 - жёлтой краски, и 46 - чёрной. Это можно обозначить следующим образом: (9,83,100,46). Иногда пользуются такими обозначениями: C9M83Y100K46, или (9%, 83%, 100%, 46%), или (0,09/0,83/1,0/0,46).
HSB / HSV
HSB (также известна как HSV) похожа на HSL, но это две разные цветовые модели. Они обе основаны на цилиндрической геометрии, но HSB/HSV основана на модели «hexcone», в то время как HSL основана на модели «bi-hexcone». Художники часто предпочитают использовать эту модель, принято считать что устройство HSB/HSV ближе к естественному восприятию цветов. В частности, цветовая модель HSB применяется в Adobe Photoshop.
HSB/HSV расшифровывается как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Hue задаёт положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Brightness является процентным значением яркости (от 0% до 100%).
XYZ
Цветовая модель XYZ (CIE 1931 XYZ) является чисто математическим пространством. В отличие от RGB, CMYK, и других моделей, в XYZ основные компоненты являются «мнимыми», то есть вы не можете соотнести X, Y, и Z с каким-либо набором цветов для смешивания. XYZ является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
LAB
Цветовая модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. При разработке Lab преследовалась цель создания цветового пространства, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Влад Мержевич
В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный.
Шестнадцатеричные цвета
Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 6.1 приведено соответствие десятичных и шестнадцатеричных чисел.
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 6.2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa69cc. При этом регистр значения не имеет, поэтому допустимо писать #F0F0F0 или #f0f0f0.
Типичный цвет, используемый в HTML, выглядит следующим образом.
Здесь цвет фона веб-страницы задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA) определяют красную составляющую цвета, цифры с третьей по четвертую (8E) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет.
FA
+
8E
+
47
=
FA8E47
Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256х256х256 = 16.777.216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB
(red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила.
Если значения компонент цвета одинаковы (например: #D6D6D6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #FFFFFF (белый).
Ярко-красный цвет образуется, если красный компонент сделать максимальным (FF), а остальные компоненты обнулить. Цвет со значением #FF0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00FF00) и синим (#0000FF).
Желтый цвет (#FFFF00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 6.1), где представлены основные цвета (красный, зеленый, синий) и комплементарные или дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00FFFF) получается за счет объединения синего и зеленого цвета.
Рис. 6.1. Цветовой круг
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 6.2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами
называются такие цвета, для каждой составляющей которых - красной, зеленой и синей - устанавливается одно из шести значений - 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6х6х6 - 216 цветов. Пример веб-цвета - #33FF66.
Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию
Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 6.3 приведены имена популярных названий цветов.
Табл. 6.3. Названия некоторых цветов
Имя цвета
Цвет
Описание
Шестнадцатеричное значение
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
Не имеет значения, каким способом вы задаете цвет - по его имени или с помощью шестнадцатеричных чисел. По своему действию эти способы равны. В примере 6.1 показано, как установить цвет фона и текста веб-страницы.
Пример 6.1. Цвет фона и текста
Цвета
Пример текста
В данном примере цвет фона задается с помощью атрибута bgcolor
тега
, а цвет текста через атрибут text
. Для разнообразия значение у атрибута text
установлено в виде шестнадцатеричного числа, а у bgcolor
с помощью зарезервированного ключевого слова teal
.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать. Так, запись #fe0 следует расценивать как #ffee00.
Браузеры поддерживают некоторые цвета по их названию. В табл. 1 приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
Табл. 1. Названия цветов
Имя
Цвет
Код
RGB
HSL
Описание
white
#ffffff или #fff
rgb(255,255,255)
hsl(0,0%,100%)
Белый
silver
#c0c0c0
rgb(192,192,192)
hsl(0,0%,75%)
Серый
gray
#808080
rgb(128,128,128)
hsl(0,0%,50%)
Темно-серый
black
#000000 или #000
rgb(0,0,0)
hsl(0,0%,0%)
Черный
maroon
#800000
rgb(128,0,0)
hsl(0,100%,25%)
Темно-красный
red
#ff0000 или #f00
rgb(255,0,0)
hsl(0,100%,50%)
Красный
orange
#ffa500
rgb(255,165,0)
hsl(38.8,100%,50%)
Оранжевый
yellow
#ffff00 или #ff0
rgb(255,255,0)
hsl(60,100%,50%)
Желтый
olive
#808000
rgb(128,128,0)
hsl(60,100%,25%)
Оливковый
lime
#00ff00 или #0f0
rgb(0,255,0)
hsl(120,100%,50%)
Светло-зеленый
green
#008000
rgb(0,128,0)
hsl(120,100%,25%)
Зеленый
aqua
#00ffff или #0ff
rgb(0,255,255)
hsl(180,100%,50%)
Голубой
blue
#0000ff или #00f
rgb(0,0,255)
hsl(240,100%,50%)
Синий
navy
#000080
rgb(0,0,128)
hsl(240,100%,25%)
Темно-синий
teal
#008080
rgb(0,128,128)
hsl(180,100%,25%)
Сине-зеленый
fuchsia
#ff00ff или #f0f
rgb(255,0,255)
hsl(300,100%,50%)
Розовый
purple
#800080
rgb(128,0,128)
hsl(300,100%,25%)
Фиолетовый
С помощью RGB
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
5.0+
1.0+
3.5+
1.3+
1.0+
1.0+
1.0+
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Каждая из трех компонент цвета принимает значение от 0 до 255. Также допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255.
Вначале указывается ключевое слово rgb
, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
RGBA
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
9.0+
1.0+
10.0+
3.1+
3.0+
2.1+
2.0+
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color
проходит валидацию, а добавленный к свойству background
уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
9.0+
1.0+
9.6+
3.1+
3.0+
2.1+
2.0+
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота). Оттенок это значение цвета на цветовом круге (рис. 1) и задаётся в градусах. 0° соответствует красному цвету, 120° - зелёному, а 240° - синему. Значение оттенка может изменяться от 0 до 359.
Рис. 1. Цветовой круг
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
HSLA
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
9.0+
1.0+
10.0+
3.1+
3.0+
2.1+
2.0+
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
HTML5
CSS2.1
CSS3
IE
Cr
Op
Sa
Fx
Цвета
Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими
и базируются на вычислительных методах. Авторы не гарантируют вашей
безопасности при их использовании и снимают с себя всякую
ответственность за результат. Помните, лев это хищник и
опасное животное!