Цветовое оформление в CSS
Данная статья будет посвящена работе с цветом в CSS, будут рассмотрены способы указания цвета с помощью шестнадцатеричных значений, значений цвета RGB, RGBA, HSL, HSLA и с помощью предопределённых цветов.
В CSS для указания конкретного цвета текста для элемента, необходимо использовать свойство color и затем указать необходимое значение, используя следующий синтаксис:
Давайте разберем отдельно, какие значения можно использовать с этим свойством и частично разберем примеры работы с цветом заднего фона. И начнём мы наше обучение с самой старой системы задания цвета – шестнадцатеричной (Hexadecimal).
Шестнадцатеричные значения
Шестнадцатеричные значения цвета поддерживается всеми основными браузерами. Цвет с использованием шестнадцатеричной системы задается с использованием следующего синтаксиса:
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 необходимо использовать следующий синтаксис:
Каждый параметр определяет интенсивность цвета и может быть целым числом от 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 является более современным методом задания цвета и имеет следующий синтаксис:
- R означает Red (красный)
- G означает Green (зеленый)
- B означает Blue (синий)
- A означает Alpha (степень смешивания с фоном)
Этот метод отличается от RGB тем, что он добавляет альфа-канал, который позволяет задать уровень прозрачности со значениями от 0 до 1, где:
Давайте для демонстрации возможностей цветовой модели RGBA рассмотрим пример в котором на примере зелёного цвета, мы будем изменять значения альфа канала от минимального rgba(0, 255, 0, 0.1) к максимальному rgba(0, 255, 0, 1) с шагом 0.1:
html> head> meta charset = "UTF-8"> title>Применение RGBA в CSS title> style> div < display: inline-block; /* Выстраиваем элементы в линейку, как строчные элементы, при этом у нас имеется возможность задавать размеры, как и всем блочным элементам. */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: rgba(0, 255, 0, .1); /* задаем цвет заднего фона, обратите внимание на значение, допускается сокращать запись 0.1 до .1 */ > . /* и так до десятого блока с шагом 0.1 */ .test10 < background-color: rgba(0, 255, 0, 1); > style> head> body> div class="test1">.1 div> . /* и так до десятого блока */ div class="test10">1 div> body> html> На что в этом примере надо обратить внимание, во-первых, чем меньше значение альфа, тем элемент более прозрачен. Во-вторых, мы использовали CSS свойство display , которое определяет, как должен отображаться элемент. В нашем случае, с этим свойством мы использовали значение inline-block , которое позволяет нам выстроить все элементы в линейку (сделали элементы «блочно-строчными»).
Обращаю Ваше внимание, что в CSS допускается использовать сокращенное обозначение значений, например, вместо 0.3 указывать .3, вместо 0.5 указывать .5, вместо 0.625 указывать .625 и так далее.
Цветовые модели HSL и HSLA
К еще одному методу задания цвета в CSS относится система HSL, её можно значительно реже встретить на страницах сайтов. HSL это аббревиатура, которая объединяет в себе первые буквы трех следующих признаков:
Система HSL использует следующий синтаксис:
hsl(от 0° до 360° , от 0 до 100% , от 0% до 100% ), где:
Первое значение – это тон, который указывается в градусах от 0 ° до 360° . Градусы соответствуют цвету на круге оттенков (изображенном ниже):
Красный цвет соответствует значениям — 0° и 360° , желтый — 60° , зеленый — 120° , голубой — 180° , синий — 240° , фиолетовый — 300° и так далее.
Второе значение (насыщенность) — определяет, насколько чистым является цвет и указывается в процентах от 0% до 100% , где 0% — полное отсутствие насыщенности (тусклый серый), а 100%` это чистый и яркий цвет.
Третье значение (осветленность) — указывается в процентах от 0% (полностью черный) до 100% (полностью белый), среднее значение 50% даёт чистый цвет.
Давайте рассмотрим пример задания цвета с помощью системы HSL на примере красного цвета (значение тона 0° ):
html> head> meta charset = "UTF-8"> title>Применение HSL в CSS title> style> div < display: inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: hsl(0, 10%, 50%); /* 0 – соответствует красному цвету, 10% - насыщенность, 50%- осветленность (соответствует чистому цвету) */ > . /* и так до десятого блока с шагом 10% (увеличение насыщенности) */ .test10 < background-color: hsl(0, 100%, 50%); /* насыщенность 100% (чистый и яркий цвет) */ > .test11 < background-color: hsl(0, 100%, 10%); /* 0 – соответствует красному цвету, 100% - насыщенность (чистый и яркий цвет), 10%- осветленность */ > . /* и так до двадцатого блока с шагом 10% (увеличение осветленности)*/ .test20 < background-color: hsl(0, 100%, 100%); /* как вы можете заметить осветленность 100% дает белый цвет */ > style> head> body> div class="test1"> hsl(0, 10%, 50%) div> . /* и так до десятого блока */ div class="test10"> hsl(0, 100%, 50%) div> br>/* переводим строку */ div class="test11" style="color:white">hsl(0, 100%, 10%) div> /* добавляем внутренний стиль для элемента (цвет текста белый) */ . /* и так до двадцатого блока */ div class="test10"> hsl(0, 100%, 100%) div> body> html> 
По аналогии с RGB, HSL поддерживает прозрачность с помощью добавления альфа канала, который задает уровень прозрачности со значениями от 0 до 1 (от невидимого до полностью непрозрачного).
Данный формат задания цвета в CSS называется HSLA, давайте рассмотрим его применение на примере фиолетового цвета (значение тона 300° ):
html> head> meta charset = "UTF-8"> title>Применение HSLA в CSS title> style> div < display: inline-block; /* выстраиваем элементы в линейку, как строчные элементы */ width: 60px; /* устанавливаем ширину для всех элементов */ height: 60px; /* устанавливаем высоту для всех элементов */ > .test1 < background-color: hsla(300, 100%, 50%,.1); /* фиолетовый цвет со 100% насыщенностью и 50% осветлённостью с добавлением альфа-канала, который задает уровень прозрачности */ > . /* и так до десятого блока с шагом 0.1 */ .test10 < background-color: hsla(300, 100%, 50%, 1); /* альфа-канал полностью непрозрачный */ > style> head> body> div class="test1">hsla(300, 100%, 50%,.1) div> . div class="test10">hsla(300, 100%, 50%, 1) div> body> html> 
Предопределённые цвета
Кроме вышеуказанных способов задания цвета, существуют и предопределённые цвета, которые вы можете применять к элементам.
p.intro < color: gray; /* задаём серый цвет для всех абзацев с классом intro */ > i < color: orange; /* задаём оранжевый цвет для всех элементов */ > h2:first-child < color: red; /* задаём красный цвет для всех элементов , которые являются первыми дочерними элементами своего родителя */ >