Цвета в CSS

Цвет в языке 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%) Фиолетовый

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

Это образец использования имен цветов, навзания цветов взяты из расширеной таблицы.

<!DOCTYPE html>
<html>
<head>
	<title>RGB в CSS</title>
	<style>
		div.colorname {	/* создаём класс colorname только для тега div */
			display: inline-block;
			width:  40px;
			height: 40px;
		}
	</style>
</head>
<body>

<div style="background: MediumTurquoise;" class="colorname">MediumTurquoise</div>
<div style="background: brown;" class="colorname">brown</div>
<div style="background: crimson;" class="colorname">crimson</div>
<div style="background: blueviolet;" class="colorname">blueviolet</div>
<div style="background: olivedrab;" class="colorname">rolivedrab</div>

</body>
</html>

Вот как работает этот код:

Установка цвета с помощью RGB

RGB - аддитивная цветовая модель. На английском языке addition - добавление. RGB - это аббревиатура английских слов: Red, Green, Blue — красный, зелёный, синий). Из этого понятно что в модели RGB цвета синтезируются путём добавления трёх цветов (красного, зелёного, синего) в различных количествах.

Модель RGB

Смешивая красный, зелёный и синий цвета можно получить несколько миллионов оттенков. В памяти компьютеров хранятся все возможные комбинации.

Ближе к делу.

Для установки свойств в этом формате используется запись rgb(r, g, b), где r, g, b - это три канала для каждого цвета (red, green, blue). Значения для каждого канала задаются в диапазоне от 0 до 255.

Пример кода.

Чтобы всё стало понятно, приведу пример кода:

<!DOCTYPE html>
<html>
<head>
	<title>RGB в CSS</title>
	<style>
		div.rgb {	/* создаём класс rgb только для тега div */
			width: 240px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
</style>
</head>
<body>

<div style="background: rgb(255, 0, 0);" class="rgb">rgb(255, 0, 0)</div>
<div style="background: rgb(0, 255, 0);" class="rgb">rgb(0, 255, 0)</div>
<div style="background: rgb(0, 0, 255);" class="rgb">rgb(0, 0, 255)</div>

</body>
</html>

Вот так должен сработать этот пример:

Цвета в RGB
Рис.1. Цвета в RGB.

Пояснения к примеру.

В начале страницы создаём класс div.rgb, он нужен чтобы блоки созданные тегом <div> отображались нужным размером: 240px на 40px. Свойству line-height (высота строки) присваиваем значение — 40px, то есть равное высоте блока, это позволит отображать текст в блоке <div> по центру вертикали. по горизонтали текст центрируем при помощи правила {text-align: center;}.

Далее, в коде устанавливаем фоновый цвет блока <div> при момощи атрибута 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 — полупрозрачности в различной степени.

Пример кода.

<!DOCTYPE html>
<html>
<head>
	<title>RGBA в CSS3</title>
	<style>
		div.rgba {
			display: inline-block;
			width: 40px;
			height: 40px;
		}
</style>
</head>
<body>

<div style="background-color: rgba(255,0,0,0.2);" class="rgba"></div>
<div style="background-color: rgba(255,0,0,0.4);" class="rgba"></div>
<div style="background-color: rgba(255,0,0,0.6);" class="rgba"></div>
<div style="background-color: rgba(255,0,0,0.8);" class="rgba"></div>
<div style="background-color: rgba(255,0,0,1.0);" class="rgba"></div>

</body>
</html>

Вот как он сработает:

Этот код по своему визуальному представлению аналогичен следующему, использующему модель RGB для задания значения цвета:

<!DOCTYPE html>
<html>
<head>
	<title>RGBA в CSS3</title>
	<style>
		div.rgb {
			display: inline-block;
			width: 40px;
			height: 40px;
		}
	</style>
</head>
<body>

<div style="background-color: rgb(243, 191, 189);" class="rgb"></div>
<div style="background-color: rgb(246, 143, 142);" class="rgb"></div>
<div style="background-color: rgb(249, 95 , 94);"  class="rgb"></div>
<div style="background-color: rgb(252, 47, 47);"   class="rgb"></div>
<div style="background-color: rgb(255, 0, 0);"     class="rgb"></div>

</body>
</html>

Вот его результат:

Значение альфа канала равное нолю делает любой цвет невидимым - абсолютно прозрачным, значение равное единице транслирует цвет в 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). Для наглядности сведём это в таблицу:

Табл. Десятичные и шестнадцатеричные числа меньше 16
Десятичные 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Шестнадцатеричные 1 2 3 4 5 6 7 8 9 A B C D E F

Для записи шестнадцатеричных чисел больше F (15 по десятичной системе), как и в десятичной системе, также используют объединение двух цифр, но уже шестнадцатеричных, что очевидно. Так, для записи десятичного числа 255 в шестнадцатеричной системе используется запись FF.

Табл. Десятичные и шестнадцатеричные числа больше 16
Десятичные 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Шестнадцатеричные 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F

Шестнадцатеричная система более понятна компьютеру, он быстрее обрабатывает значения, заданные по шестнадцатеричному значению.

Чтобы указать цвет в 16-ричной системе, перед числовым значением нужно ставить знак «#», пример: #FFC0CB. Само значение #FFC0CB состоит из трёх шестнадцатеричных цифр FF, C0 и CB. Смысл этой записи такой же, как и установка цвета в формате RGB (rgb(r, g, b)) — каждая шестнадцатиричная цифра в HEX-коде указывает насыщение цвета в своём канале модели RGB.

<!DOCTYPE html>
<html>
<head>
	<title>HEX код в CSS</title>
	<style>
		div.hex {	/* создаём классс hex только для тега div */
			width: 240px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	</style>
</head>
<body>

<div style="background: #FF0000;" class="hex">#FF0000</div>
<div style="background: #00FF00;" class="hex">#00FF00</div>
<div style="background: #0000FF;" class="hex">#0000FF</div>

</body>
</html>

Этот код отобразит следующие элементы:

#FF0000
#00FF00
#0000FF

А вот рисунок с результатом из раздела "Установка цвета с помощью RGB" на этой странице выше.

Цвета в RGB
Рис.1. Цвета в RGB.

Мы видим что цвета идентичны.

Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.

То есть допустимо следующее сокращение записи:

#rrggbb —> #rgb

Например, цвет #ff22aa допустимо написать так — #f2a, или цвет #44aa22 допустимо указать в виде #4a2.

Установка цвета с помощью HSL

В CSS3 появился новый формат для указания цвета.

Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).

Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.

Значение оттенка изменятся в диапазоне от 0 до 359.

Цветовой круг HSL
Рисунок 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 {
	background-color: rgb(255,50,50);
	background-color: rgba(255,50,50,0.85)
}

При использовании такого кода в старых браузерах фоновый цвет для класса .somebloсk хоть и не будет использовать альфа-канал, но будет отображаться в формате RGB.

Генератор цветов для CSS и HTML