Искусство цвета
R: 98
G: 152
B: 213
H: 212
S: 58
L: 61
Короткий шестнадцатеричный код цвета — это более короткая форма шестизначной нотации. В этом формате каждая цифра повторяется, чтобы получить эквивалентное шестизначное значение цвета. Например: #0F0 становится #00FF00.
Шестнадцатеричное значение может быть взято из любого графического программного обеспечения, такого как Adobe Photoshop, Core Draw и др.
Каждому шестнадцатеричному коду цвета в CSS будет предшествовать знак хеша « #». Ниже приведены примеры использования шестнадцатеричных обозначений.
Цвет Шестнадцатеричный цвет
Белый #FFF
Черный #000
Красный #F00
Лайма #0F0
Синий #00F
Желтый #FF0
Морская волна #0FF
Фуксия #F0F
HSL и HSLA
Система HSL (hue, saturation, lightness) описывает цвета основанные на оттенке (hue), насыщенности (saturation) и осветлении (lightness). Вот тот же самый темно-фиолетовый цвет, указанный в формате HSL:
color: hsl(285, 100%, 60%);
Первое число - оттенок, выраженный в градусах от 0 до 360, определяющих позицию цвета на цветовом круге. Второе число - насыщенность, определяемая в процентах от 0% до 100%, указывает насколько насыщенным (ярким) будет цвет. Третье число - осветление, оно определяется в процентах также как и насыщенность, осветление указывает насколько светлым или темным будет цвет.
Система HSLA, как и RGBA, добавляет четвертое число в диапазоне от 0 до 1, определяющее насколько прозрачным должен быть цвет. Значение 0.5 делает цвет полупрозрачным, рассмотрим полупрозрачную версию темно-фиолетового цвета, заданную с помощью HSLA системы:
color: hsla(285, 100%, 60%, 0.5);
Цветовая модель RGB
Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:
селектор { color : rgb(R,G,B); }
Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в (минимальное значение):
p { color : rgb(0,0,255); /* задаём синий цвет для всех абзацев */ }
Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Мы с Вами подробно рассмотрим какие единицы измерения существуют и используются в CSS в следующей статье "Единицы измерения CSS, размер шрифта". Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:
h2 { color : rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */ }
Кроме вышеуказанных способов задания цвета, существуют и предопределённые цвета, которые вы можете применять к элементам. Ранее мы уже неоднократно рассматривали примеры с предопределёнными цветами, а полный перечень предопределенных цветов Вы всегда можете найти в справочнике HTML в разделе HTML цвета.
Например:
p.intro { color : gray; /* задаём серый цвет для всех абзацев с классом intro */ } i { color : orange; /* задаём оранжевый цвет для всех элементов <i> */ } h2:first-child { color : red; /* задаём красный цвет для всех элементов <h2>, которые являются первыми дочерними элементами своего родителя */ }