Серо голубой код. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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
Цвета
Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими
и базируются на вычислительных методах. Авторы не гарантируют вашей
безопасности при их использовании и снимают с себя всякую
ответственность за результат. Помните, лев это хищник и
опасное животное!
Арррргх!
Результат данного примера показан на рис. 2.
Рис. 2. Цвета на веб-странице
Влад Мержевич
В 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
.
В HTML цвет можно задавать тремя способами:
Задание цвета в HTML по его названию
Некоторые цвета можно задавать по их названию, используя в качестве значения название цвета на английском языке. Самые распространенные ключевые слова: black (черный), white (белый), red (красный), green (зеленый), blue (синий) и др:
При отображении различных цветов на мониторе за основу берется RGB-палитра. Любой цвет получают, смешивая три основных: R — красный (red)
, G — зеленый (green)
, В — синий (blue)
. Яркость каждого цвета задается одним байтом и, следовательно, может принимать значения от 0 до 255.
Например, RGB (255,0,0) отображается как красный, так как красный устанавливается в его самое высокое значение (255), а остальные установлены в 0. Также можно задавать цвет в процентном отношении. Каждый из параметров обозначает уровень яркости соответствующего цвета. Например: значения rgb(127, 255, 127) и rgb(50%, 100%, 50%) будут задавать одинаковый зеленый цвет средней насыщенности:
Пример: Задание цвета с помощью RGB
Попробуй сам »
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
rgb(127, 255, 127)
rgb(50%, 100%, 50%)
Задание цвета по шестнадцатеричному значению
Значения R
G
B
также могут быть указаны с помощью шестнадцатеричных (HEX) значений цвета в форме: #RRGGBB, где RR (красный), GG (зеленый) и BB (синий) являются шестнадцатеричными значениями от 00 до FF (так же, как десятичное 0-255). Шестнадцатеричная система, в отличие десятичной системы, базируется, как следует из ее названия, на числе 16. Шестнадцатеричная система использует следующие знаки: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, А, В, С, D, E, F. Здесь цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе представляют из себя объединением двух знаков в одно значение. Например, наибольшему числу 255 в десятичной системе соответствует самое высокое значение FF в шестнадцатеричной системе. В отличие десятичной системы, перед шестнадцатеричным числом ставят символ решетки #
, например, #FF0000 отображается как красный цвет, так как красный устанавливается в его самое высокое значение (FF), а остальным цветам установлено минимальное значение (00). Знаки после символа решетки #
можно набирать как прописными, так и строчными. Шестнадцатеричная система позволяет использовать сокращенную форму вида #rgb, где каждый символ равнозначен удвоенному. Так, запись #f7O следует расценивать как #ff7700.
Пример: Цвет HEX
Попробуй сам »
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный: #FF0000
зеленый: #00FF00
синий: #0000FF
красный+зеленый=желтый: #FFFF00
красный+синий=фиолетовый: #FF00FF
зеленый+синий=голубой: #00FFFF
Список широко распространённых цветов (название, HEX и RGB):
Английское название
Русское название
Образец
HEX
RGB
Amaranth
Амарантовый
#E52B50
229
43
80
Amber
Янтарный
#FFBF00
255
191
0
Aqua
Сине-зеленый
#00FFFF
0
255
255
Azure
Лазурный
#007FFF
0
127
255
Black
Черный
#000000
0
0
0
Blue
Синий
#0000FF
0
0
255
Bondi Blue
Вода пляжа Бонди
#0095B6
0
149
182
Brass
Латунный
#B5A642
181
166
66
Brown
Коричневый
#964B00
150
75
0
Cerulean
Лазурный
#007BA7
0
123
167
Dark spring green
Тёмный весенне-зелёный
#177245
23
114
69
Emerald
Изумрудный
#50C878
80
200
120
Eggplant
Баклажановый
#990066
153
0
102
Fuchsia
Фуксия
#FF00FF
255
0
255
Gold
Золотой
#FFD700
250
215
0
Gray
Серый
#808080
128
128
128
Green
Зелёный
#00FF00
0
255
0
Indigo
Индиго
#4B0082
75
0
130
Jade
Нефритовый
#00A86B
0
168
107
Lime
Лайм
#CCFF00
204
255
0
Malachite
Малахитовый
#0BDA51
11
218
81
Navy
Тёмно-синий
#000080
0
0
128
Ochre
Охра
#CC7722
204
119
34
Olive
Оливковый
#808000
128
128
0
Orange
Оранжевый
#FFA500
255
165
0
Peach
Персиковый
#FFE5B4
255
229
180
Pumpkin
Тыква
#FF7518
255
117
24
Purple
Фиолетовый
#800080
128
0
128
Red
Красный
#FF0000
255
0
0
Saffron
Шафрановый
#F4C430
244
196
48
Sea Green
Зелёное море
#2E8B57
46
139
87
Swamp green
Болотный
#ACB78E
172
183
142
Teal
Сине-зелёный
#008080
0
128
128
Ultramarine
Ультрамариновый
#120A8F
18
10
143
Violet
Фиолетовый
#8B00FF
139
0
255
Yellow
Жёлтый
#FFFF00
255
255
0
Коды цветов (фон) по насыщенности и оттенку.
Цвет в языке CSS можно задавать разными способами:
Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, 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. В формате HSL A, как и в 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.
26.02.15
8.9K
Как известно, цвет может влиять на состояние человека: как психическое, так и физическое. Каждый день, просматривая сайты в интернете, глаза оценивают миллионы цветов и оттенков. Веб-дизайнер, который ознакомлен с психологией цвета, может управлять настроением посетителя для достижения каких-либо целей.
Это обусловлено тем, что некоторые оттенки успокаивают, а некоторые наоборот – возбуждают. Далее речь пойдет о том, как синтезируется и отображается цвет с помощью компьютерной техники.
RGB
– это цветовая модель, представляющая метод получения всех цветов и их оттенков путем смешивания в различных пропорциях трех главных компонентов, которыми являются:
красный цвет (Red
);
зеленый цвет (Green
);
синий цвет (Blue
).
Отсюда и происходит сокращенное название RGB
. Данные цвета неспроста выбраны основными: причиной является физиология сетчатки человеческого глаза, и то, как она воспринимает их:
RGB
-модель на сегодняшний день остается самой популярной и применяется для воспроизведения цветов на экранах телевизоров и компьютерных мониторах. Так как производители наделяют свои изделия различными характеристиками, в 1996 была создана единая система синтеза цветов на основе RGB
под названием sRGB
, над которой совместно потрудились компании Microsoft
и HP
.
Числовое представление цвета
Как уже было сказано ранее, RGB
цвета формируются путем смешивания основных. Для описания интенсивности каждого из них приняли схему, в которой цвет представляется диапазоном 0-255
(8 бит
), что в шестнадцатеричной системе исчисления соответствует 00-FF
.
То есть, основные цвета будут иметь следующий вид:
Красный – RGB
(255,0,0
);
Зеленый – RGB
(0,255,0
);
Синий – RGB
(0,0,255
);
Если же интенсивность цвета принимает значения меньше 255, то получаются различные оттенки красного, зеленого и синего. Далее приведена таблица их градации, а также представлены шестнадцатеричные значения каждого из оттенков:
Таблицы цветов RGB
Естественно, что кроме градаций основных цветов, существуют смешанные, и их количество довольно велико. Поэтому была создана таблица RGB
-цветов, в которой представлены все существующие оттенки, а также приведены их названия и числовые представления (в десятичной и шестнадцатеричной форме
).
Ознакомиться с ней можно здесь
. Данная таблица здорово облегчает жизнь веб-дизайнерам, так как за несколько секунд можно найти необходимый оттенок и узнать его числовое представление.
Безопасная палитра RGB цветов
Однако в какой-то момент существовала проблема отображения цветов в различных браузерах, и для ее решения была скомпонована так называемая «безопасная
» палитра RGB
цветов, которые были выведены математическими вычислениями.
Когда браузер не может корректно отобразить цвет, он делает попытки получить близкий к необходимому путем смешивания соседних цветов, и скорее всего результат будет совершенно неприемлем:
Используя коды цветов RGB
из данной палитры, веб-разработчик может не бояться за отображение цветов на страницах своего сайта при просмотре с помощью различных браузеров, на различных платформах и мониторах. Хотя на данный момент таблица безопасных цветов теряет свою актуальность (технический прогресс все же не стоит на месте
), при ее использовании можно, что называется, спать спокойно.
Золотой цвет в RGB модели
Впервые слово «золотой», было использовано в начале XIV века для описания цвета химического элемента под названием Aurum
– золото. В модели RGB
золотой цвет представлен следующими числовыми значениями:
RGB
(255, 215, 0
) – десятеричная система;
HEX #FFD700
– шестнадцатеричная система.
Бежевый цвет в RGB модели
Бежевый цвет занимает довольно значимое место в истории, пусть он и не самый выразительный. Многие памятники культуры, особенно античные скульптуры, были изготовлены из стеатита и мыльного камня, обладающих бежевым оттенком. В модели RGB
бежевый цвет имеет следующие числовые представления.