Серый цвет 128. Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA
Цвет в языке 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.
>>Управление цветом
Шестнадцатеричные значения цвета RGB
Способы описания и обработки цвета отличаются друг от друга тем, для какого конечного представления предназначаются. Сравним, например, представления цветов для полиграфии и для мониторов компьютеров. В первом случае за основу берется белый
цвет бумаги, на которую в последствии наносятся три основные цвета: голубой
,
пурпурный
и желтый
. Смешиваясь между собой и с белым цветом бумаги в разных пропорциях, эти три основные цвета дают различные цветовые оттенки, кроме чистого черного, либо при полном отсутствии красок дают белый цвет бумаги. Если к ним добавить еще и черный цвет, то получим CMYK
-способ передачи цвета, когда необходимый цвет получается путем вычитания из белого
недостающих цветов.
Во втором же случае за основу принимается черный
цвет экрана монитора, каждая ячейка которого, светится одним из трех цветов: red
-красный, green
-зеленый и blue
-синий. Тогда при полном отсутствии какого-либо свечения мы получаем чистый черный цвет экрана, а любой из требуемых цветов задается соотношением каждого из трех цветов. В этом случае мы
получим RGB
-способ передачи цвета. Основные цвета могут иметь значения от 0
до 255
, или от 0%
до 100%
, либо могут быть представлены в виде шестнадцатеричного значения. На рисунке ниже можно увидеть результаты смешения основных цветов.
Шестнадцатеричная система счисления, в отличии от десятичной в своём ряду цифр имеет не десять знаков, а шестнадцать - отсюда и название. Соответственно не повторяющихся вариантов сочетаний из двух цифр может быть только - 256
, для продолжения ряда цифр после 9
используются буквы от A
до F
, следовательно, ряд будет выглядеть так -
0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
Для перевода чисел из одной системы счисления в другую и наоборот воспользуйтесь калькулятором, приведенным ниже. Максимальное значение здесь может быть FF
- 255
.
В этом случае цвет задается тремя шестнадцатеричными числами, каждое из которых состоит из двух цифр. Первое число определяет интенсивность красного
цвета, среднее- зеленого
, последнее- синего
цвета.
Все числа могут принимать значения в диапазоне от 00
до FF
(от 0 до 255). Например: зеленый цвет задается как #00FF00
, красный - как #FF0000
, синий - как #0000FF
, белый - как #FFFFFF
, полное отсутствие цвета или черный задается как #000000
.
В расположенной ниже форме Вы сможете задать любые шестнадцатеричные значения каждого из трех цветов и посмотреть результат их смешения, кликнув в поле вывода.
Примеры некоторых шестнадцатеричных значений цветов RGB:
градации красного, синего и зеленого цветов.
вид
код
вид
код
вид
код
вид
код
вид
код
вид
код
#010000
#800000
#000100
#008000
#000001
#000080
#100000
#900000
#001000
#009000
#000010
#000090
#200000
#A00000
#002000
#00A000
#000020
#0000A0
#300000
#B00000
#003000
#00B000
#000030
#0000B0
#400000
#C00000
#004000
#00C000
#000040
#0000C0
#500000
#D00000
#005000
#00D000
#000050
#0000D0
#600000
#E00000
#006000
#00E000
#000060
#0000E0
#700000
#FF0000
#007000
#00FF00
#000070
#0000FF
Задание цвета при помощи строчных литералов
Для удобства пользования некоторым цветам и их сочетаниям были присвоены имена, которые распознаются всеми браузерами и появилась возможность
задавать многие из них по имени. В таблице ниже приведены некоторые из названий цветов:
вид
имя
вид
имя
вид
имя
вид
имя
White
Red
Orange
Yellow
Green
Blue
Purple
Black
Aliceblue
Antiquewhite
Aqua
Aquamarine
Azure
Beige
Bisque
Blanchedalmond
Blueviolet
Brown
Burlywood
Cadetblue
Chartreuse
Chocolate
Coral
Cornflowerblue
Cornsilk
Crimson
Cyan
Darkblue
Darkcyan
Darkgoldenrod
Darkgray
Darkgreen
Darkkhaki
Darkmagenta
Darkolivegreen
Darkorange
Darkorchid
Darkred
Darksalmon
Darkseagreen
Darkslateblue
Darkslategray
Darkturquoise
Darkviolet
Deeppink
Deepskyblue
Dimgray
Dodgerblue
Firebrick
Floralwhite
Forestgreen
Fuschia
Gainsboro
Ghostwhite
Gold
Goldenrod
Gray
Greenyellow
Honeydew
Hotpink
Indianred
Indigo
Ivory
Khaki
Lavender
Lavenderblush
Lemonchiffon
Lightblue
Lightcoral
Lightcyan
Lightcoldenrodyellow
Lightgreen
Lightgray
Lightpink
Lightsalmon
Lightseagreen
Lightskyblue
Lightslategray
Lightsteelblue
Lightyellow
Lime
Limegreen
Linen
Magenta
Maroon
Mediumaquamarine
Mediumblue
Mediumorchid
Mediumpurple
Mediumseagreen
Mediumslateblue
Mediumspringgreen
Mediumturquoise
Mediumvioletred
Midnightblue
Mintcream
Mistyrose
Navajowhite
Navy
Oldlace
Olive
Olivedrab
Orangered
Orchid
Palegoldenrod
Palegreen
Paleturquoise
Palevioletred
Papayawhip
Peachpuff
Peru
Pink
Plum
Powderblue
Rosybrown
Royalblue
Saddlebrown
Seagreen
Seashell
Sienna
Silver
Skyblue
Slateblue
Slategray
Snow
Springgreen
Steelblue
Tan
Teal
Thistle
Tomato
Turquoise
Violet
Wheat
Whitesmoke
Yellowgreen
Перечень строчных литералов с названиями цветов довольно обширен и более чем достаточен. Если необходимо задать в качестве фонового цвет настолько необычный, что ему даже нет названия, то можно воспользоваться шестнадцатеричным значением.
Использование безопасной палитры цветов
К сожалению, на разных платформах, с разными системными настройками, правильная передача цвета является проблемой. Все дело в том, что браузер всегда старается подстроить цветовую палитру документа под системные настройки и возможности монитора, путем
самостоятельного смешивания цветов и их замещения. Как результат - иногда пользователь видит не совсем то, что хотел ему показать web-мастер. Выход из этой ситуации был найден в применении палитры, каждый цвет которой гарантированно передается одинаково
всеми браузерами на разных платформах. Это так называемая гарантированная
палитра, еще ее называют безопасной
палитрой. В эту палитру входят цвета, цветовые составляющие которых, принимают следующие значения:00
,33
,66
,99
,
CC
,FF
, во всех возможных 216
их сочетаниях.
вид
код
вид
код
вид
код
вид
код
вид
код
вид
код
FFFFFF
CCCCCC
999999
666666
333333
000000
CCCC66
CCCC33
999966
999933
999900
666600
CCFF66
CCFF00
CCFF33
CCCC99
666633
333300
99FF00
99FF33
99CC66
99CC00
99CC33
669900
CCFF99
99FF99
66CC00
66CC33
669933
336600
66FF00
66FF33
33FF00
33CC00
339900
009900
33FF33
00FF33
00FF00
00CC00
33CC33
00CC33
CCFFCC
99CC99
66CC66
669966
336633
003300
99FF99
66FF66
33FF66
00FF66
339933
006600
66FF99
33FF99
00FF99
33CC66
00CC66
009933
66CC99
33CC99
00CC99
339966
009966
006633
99FFCC
66FFCC
33FFCC
00FFCC
33CCCC
009999
CCFFFF
99FFFF
66FFFF
33FFFF
00FFFF
00CCCC
99CCCC
66CCCC
339999
669999
006666
336666
66CCFF
33CCFF
00CCFF
3399CC
0099CC
003333
99CCFF
3399FF
0099FF
6699CC
336699
006699
0066FF
3366CC
0066CC
0033FF
003399
003366
6699FF
3366FF
0000FF
0000CC
0033CC
000033
3333FF
3300FF
3300CC
3333CC
000099
000066
9999CC
6666FF
6666CC
666699
333399
333366
CCCCFF
9999FF
6666FF
6600FF
330099
330066
9966CC
9966FF
6600CC
6633CC
663399
330033
CC99FF
CC66FF
9933FF
9900FF
660099
663366
CC66FF
CC33FF
CC00FF
9900CC
996699
660066
CC99CC
CC66CC
CC33CC
CC00CC
990099
993399
FFCCFF
FF99FF
FF66FF
FF33FF
FF00FF
CC3399
FF66CC
FF00CC
FF33CC
CC6699
CC0099
990066
FF99CC
FF3399
FF0099
CC0066
993366
660033
FF6699
FF3399
FF0066
CC3366
996666
663333
CC9999
CC6666
CC3333
CC0000
990033
330000
FFCCCC
FF9999
FF6666
FF3333
FF0000
CC0033
FF6633
CC3300
FF3300
FF0000
CC0000
990000
FFCC99
FFCC66
FF6600
CC6633
993300
660000
FF9900
FF9933
CC9966
CC6600
996633
663300
FFCC66
FFCC00
FFCC33
CC9900
CC9933
996600
FFFFCC
FFFF99
FFFF66
FFFF33
FFFF00
CCCC00
Посмотри внимательно на рисунок. Фон у выпадающего окошка сделан полупрозрачным. Это довольно частый дизайнерский прием. Давай подумаем, как это можно реализовать.
Задача
Сделать кроссбраузерный полупрозрачный цвет.
Решение
Первая мысль в данной ситуации — использовать для фона png24-картинку с уже заданной полупрозрачностью. Но эта картинка совершенно лишняя. Можно прекрасно обойтись и без нее (а значит без лишнего запроса к серверу). Давай все-таки попробуем найти оптимальное решение.
Вторая мысль — использовать . Но в данном случае это не очень удобно. Ведь полупрозрачным тогда станет не только фон, но и надписи. Да, собственно, все окошко сразу.
Конечно, можно попробовать добавить дополнительный контейнер и применять opacity только к нему, но этот HTML-элемент будет предназначен только для оформления и явно будет лишним. Можно ли обойтись без него?
Конечно можно! Если использовать RGBA.
Формат описания цвета RGBA
CSS3 позволяет задавать цвет, используя функции RGB и RGBA. При этом мы должны указать долю каждой цветовой составляющей, под которую отводится один байт (от 0 до 255, вдруг кто не знает).
Синтаксис у этого дела очень простой:
Background: rgb(0, 255, 0); /* чистый зеленый цвет */
Для RGBA добавляется четвертый параметр — альфапрозрачность (от 0 до 1).
Background: rgba(255, 0, 0, 0.5); /* чистый красный с прозрачностью 50% */
Вот оно, решение нашей задачки. Достаточно задать цвет фона с помощью rgba и все будет выглядеть как нам нужно. Без лишних картинок и элементов!
А где мне взять эти циферки?
Посмотреть на составляющие цвета можно используя инструмент фотошопа «пипетка»
О кроссбраузерности
Так как функция RGB значительно старше, чем RGBA и присутствует еще со времен стандарта CSS2, то для подстраховки от самых древних браузеров можно использовать такую дублирующую конструкцию:
Фишка в том, чтобы указать начальный и конечный цвета одинаковыми (ff0000 — красный) и воспользоваться тем, что для градиента в этом фильтре можно задать альфаканал (в примере значение 80).
Для справки: в фильтре используется шестнадцатеричная система и полностью непрозрачному цвету соответствует код FF (в десятичной это 255). Соответственно шестнадцатеричное 80 — это десятичное 128, т.е 50% прозрачности.
Проверено в:
IE 6-9
Firefox 3+
Opera 10+
Safari 4
Chrome
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), то есть с тем, чтобы одинаковое изменение значений координат цвета в разных областях цветового пространства производило одинаковое ощущение изменения цвета.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из её названия, на числе 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.
По названию
Internet Explorer
Chrome
Opera
Safari
Firefox
Android
iOS
4.0+
1.0+
3.5+
1.3+
1.0+
1.0+
1.0+
Браузеры поддерживают некоторые цвета по их названию. В табл. 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
Цвета
Предупреждение
Все перечисленные на сайте методы ловли льва являются теоретическими
и базируются на вычислительных методах. Авторы не гарантируют вашей
безопасности при их использовании и снимают с себя всякую
ответственность за результат. Помните, лев это хищник и
опасное животное!