Цветовые модели HSL и HSLA

Цветовое оформление в CSS

В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:

селектор {color: значение;}

 

Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона.

Шестнадцатеричные значения

Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:

селектор {color: #RRGGBB;} #RR (красный)#GG (зеленый)#BB (синий)

Значение, фактически содержит три шестнадцатеричных числа (RR - для красного, GG - для зеленого, BB - для синего). Каждое значение (RR, GG и BB) должно находиться в диапозоне между 00 и FF. В шестнадцатиричной системе счет ведется следующим образом: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.

Например, значение #0000FF соответствует синему цвету, так как компонент BB установлен в его самое высокое значение - (FF), а другие установлены в самое низкое значение (00). Значение, фактически содержит три шестнадцатеричных числа, значение цвета получается при смешивании трех вышеуказанных составляющих.

Обращаю Ваше внимание, что допускается сокращать шестнадцатеричные числа до трех символов, в том случае если каждое из трех двухзначных чисел содержит одинаковые символы. Например, #0000FF можно записывать как #00F, или значение #777777 можно указать следующим образом:

p.intro {color: #777; /* задаём темно-серый цвет для всех абзацев с классом intro */}

Цветовая модель RGB

Значения цвета RGB поддерживается во всех основных браузерах и задается в следующем порядке: R (красный), G (зеленый), B (синий). Чтобы указать значение в системе RGB необходимо использовать следующий синтаксис:

селектор {color: rgb(R,G,B);}

Каждый параметр определяет интенсивность цвета и может быть целым числом от 0 до 255. Например, значение rgb(0,0,255); отображается как синий цвет, так как параметр синего установлен в максимальном значении (255), а красный и зелёный установлены в 0 (минимальное значение):

p {color: rgb(0,0,255); /* задаём синий цвет для всех абзацев */}

Хочу заранее обратить Ваше внимание на то, что допускается указывать значения цвета RGB в виде процентных соотношений. Например, чтобы задать оранжевый цвет для всех заголовков второго уровня, используя систему RGB и процентные значения, необходимо использовать следующие значения параметров:

h2 {color: rgb(100%,65%,0%); /* задаёт оранжевый цвет для всех заголовков второго уровня */}

Цветовая модель RGBA

Следующая система цвета, которая используется в CSS называется RGBA, она использует в своем синтаксисе альфа-значение, которое определяет степень прозрачности конкретного пиксела. RGBA является более современным методом задания цвета и имеет следующий синтаксис:

селектор {color: rgba(R,G,B,A);, где:}

· R означает Red (красный)

· G означает Green (зеленый)

· B означает Blue (синий)

· A означает Alpha (степень смешивания с фоном)

Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:

· 0 - цвет невидимый.

· 1 - цвет непрозрачный.

 

Пример демонстрации возможностей цветовой модели RGBA.

На примере зелёного цвета будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:

 

 

На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, использовали CSS свойство display, которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством использовали значение inline-block, которое позволяет нам выстроить все элементы <div> в линейку (сделали элементы "блочно-строчными").

 

Цветовые модели HSL и HSLA

К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:

· H ue — тон.

· S aturation — насыщенность.

· L ightness — осветленность.

Система HSL использует следующий синтаксис:

hsl( от 0° до 360°, от 0 до 100%, от 0% до 100%), где:

Первое значение – это тон, который указывается в градусах от 0° до 360°. Градусы соответствуют цвету на круге оттенков (изображенном ниже):

Красный цвет соответствует значениям - 0° и 360°, желтый - 60°, зеленый - 120°, голубой - 180°, синий - 240°, фиолетовый - 300° и так далее.

Второе значение (насыщенность) - определяет, насколько чистым является цвет и указывается в процентах от 0% до 100%, где 0% - полное отсутствие насыщенности (тусклый серый), а 100% это чистый и яркий цвет.

Третье значение (осветленность) - указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.