Значение цвета
Значение цвета разными способами
Цвет можно задавать разными способами: по шестнадцатеричному значению (HEX), по названию, в формате RGB, RGBA, HSL, HSLA.
Пример: Белый / white / #ffffff | #fff / rgb(255,255,255) / hsl(0,0%,100%)
HEX - шестнадцатеричный
Для задания цветов используются числа в шестнадцатеричном коде.
Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.
В скриптах (например PHP) цвет может принимать значения от 0x00 до 0xFF.
Пример[CSS]: color:#ffee00; background-color:#fe0;
Пример[PHP]: $c=imagecolorallocate($im, 0x00, 0xEE, 0xFF);
Пример[PHP]: $c=imagecolorallocate($im, 0x00, 0xEE, 0xFF);
Название
Браузеры поддерживают некоторые цвета по их названию.
В таблице известных цветов приведены названия, шестнадцатеричный код, значения в формате RGB, HSL и описание.
Пример: color:red;
RGB - десятичный
Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении.
Каждая из трех компонент цвета принимает значение от 0 до 255.
Также в стилях допустимо задавать цвет в процентном отношении, при этом 100% будет соответствовать числу 255.
Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 128, 128) или rgb(100%, 50%, 50%).
Пример[CSS]: color:rgb(214,86,43); background-color:rgb(100%, 50%, 50%);
Пример[PHP]: $c=imagecolorallocate($im, 255, 0, 0);
RGBA - десятичный
Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента.
В стилях в диапазоне от 0 до 1, значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
В скриптах значение в диапазоне от 0 до 127, 0 означает наоборот непрозрачный цвет, 127 означает полную прозрачность, а промежуточное значение вроде 63 — полупрозрачности (63.5=127*0.5).
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
Пример[CSS]: color:rgba(255,255,255,.9); background-color:rgb(100%, 50%, 50%, 0.9);
Пример[PHP]: $c=imagecolorallocate($im, 0x00, 0xEE, 0xFF, 127);
Пример[PHP]: $c=imagecolorallocate($im, 0x00, 0xEE, 0xFF, 127);
RGBA добавлен в CSS3, поэтому валидацию CSS-кода надо проводить именно по этой версии. Следует отметить, что стандарт CSS3 еще находится в разработке и некоторые возможности в нем могут поменяться. К примеру, цвет в формате RGB добавленный к свойству background-color проходит валидацию, а добавленный к свойству background уже нет. При этом браузеры вполне корректно понимают цвет для того и другого свойства.
HSL
Название формата HSL образовано от сочетания первых букв Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
Оттенок это значение цвета на цветовом круге и задаётся в градусах.
0° соответствует красному цвету, 120° — зелёному, а 240° — синему.
Значение оттенка может изменяться от 0 до 359.
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Насыщенностью называется интенсивность цвета, измеряется в процентах от 0% до 100%. Значение 0% обозначает отсутствие цвета и оттенок серого, 100% максимальное значение насыщенности.
Светлота задает, насколько цвет яркий и указывается в процентах от 0% до 100%. Малые значения делают цвет темнее, а высокие светлее, крайние значения 0% и 100% соответствуют чёрному и белому цвету.
Пример: color:hsl(60,100%,25%);
HSLA
Формат HSLA похож по синтаксису на HSL, но включает в себя альфа-канал, задающий прозрачность элемента.
Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
Значения цвета в форматах RGBA, HSL и HSLA добавлены в CSS3, поэтому при использовании этих форматов проверяйте код на валидность с учётом версии.
Пример: color:hsla(120,100%,50%,0.1);
Браузеры | Chrome / Android | Firefox Mobile | Opera Mobile | Safari Mobile | IE |
---|---|---|---|---|---|
HEX #RGB | 1 | 1 | 3.5 / 1 | 1 | 3 |
Названия | 1 | 1 | 3.5 / 1 | 1 | 3 |
rgb() | 1 | 1 | 3.5 / 1 | 1 | 4 |
hsl() | 1 | 1 | 9.5 / 10 | 3.1 / 4 | 9 |
rgba() | 1 / 4 | 3 / 4 | 10 | 3.1 / 4 | 9 |
hsla() | 1 / 4 | 3 / 4 | 10 | 3.1 / 4 | 9 |
transparent | 1 / 4 | 3 / 4 | 10 | 3.1 / 4 | 9 |
Значение цвета разными способами