Справка по цветовым моделям
Далее приводится краткое описание цветовых систем с которыми работает конвертер, разъяснение по форматам, а также примеры использования полученных цветов в CSS/HTML.
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 (полностью непрозрачный).
- h1 { color: rgb(0, 0, 255); } /* синий в обычном RGB */
- h2 { color: rgba(0, 0, 255, 1); } /* тот же синий в RGBA, потому как непрозрачность: 100% */
- h3 { color: rgba(0, 0, 255, 0.5); } /* непрозрачность: 50% */
- h4 { color: rgba(0, 0, 255, .155); } /* непрозрачность: 15.5% */
- h5 { color: rgba(0, 0, 255, 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%).
- h1 { color: hsl(120, 100%, 50%); } /* зелёный */
- h2 { color: hsl(120, 100%, 75%); } /* светло-зелёный */
- h3 { color: hsl(120, 100%, 25%); } /* тёмно-зелёный */
- h4 { color: hsl(120, 60%, 70%); } /* пастельный зеленый */
HSL поддерживается в IE9+, Firefox, Chrome, Safari, и в Opera 10+.
HSLA
По аналогии с RGB/RGBA, для HSL имеется режим HSLA с поддержкой альфа-канала для указания непрозрачности объекта.
Значение цвета HSLA задается в виде: hsla(hue, saturation, lightness, alpha). Параметр alpha — это число в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).
- h1 { color: hsl(120, 100%, 50%); } /* зелёный в обычном HSL */
- h2 { color: hsla(120, 100%, 50%, 1); } /* тот же зелёный в HSLA, потому как непрозрачность: 100% */
- h3 { color: hsla(120, 100%, 50%, 0.5); } /* непрозрачность: 50% */
- h4 { color: hsla(120, 100%, 50%, .155); } /* непрозрачность: 15.5% */
- h5 { color: hsla(120, 100%, 50%, 0); } /* полностью прозрачный */
CMYK
Цветовая модель 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 является мастер-моделью практически всех остальных цветовых моделей, используемых в технических областях.
colorscheme.ru
В HTML существуют несколько основных способов представления цветов:
- В виде #112233.
Представление в виде трёх пар шестнадцатеричных цифр (Hex triplet), где каждая пара отвечает за свой цвет:
две первые цифры — красный (00 — FF)
две в середине — зелёный (00 — FF)
две последние цифры — синий (00 — FF)Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
Символа # обозначает знак «числа».
- Представление ключевыми словами, например green, black.
Во избежание случаев, когда указанное ключевое слово «не понимается» браузером, следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах. - В виде rgb(*,*,*),
где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета
(красный — Red, зелёный — Green , синий — Blue). - В виде rgba(*,*,*,*),
где первые 3 «*» — компоненты цвета, задающиеся в диапазоне 0 до 255,
а последняя «*» — уровень непрозрачности (альфа-канал), задающийся дробными числами от 0 до 1.
Вариант 1.
<html>
<body color=#0000FF>
1) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>
Вариант 2. (тотже цвет синий)
<html>
<body color=Blue>
2) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>
Вариант 3. (тотже цвет синий)
<html>
<body color=rgb(0,0,255)>
3) Данный текст, как и весь остальной текст на всей странице, будет отображаться синим цветом.
</body>
<html>
Вариант 4. (тотже цвет синий, но полупрозрачный)
<html>
<body color=rgba(0,0,255,0.5)>
4) Данный текст, как и весь остальной текст на всей странице, будет отображаться полупрозрачным синим цветом.
</body>
<html>
u4ilka.kcbux.ru
Задание цвета по названию
Браузеры поддерживают указание некоторых цветов элементам по названиям. В этой таблице некоторые ключевые слова (английские названия цветов), используемые для задания свойств цвета, 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(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>
Вот так должен сработать этот пример:

Пояснения к примеру.
В начале страницы создаём класс 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). Для наглядности сведём это в таблицу:
Десятичные | 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 | 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>
Этот код отобразит следующие элементы:
А вот рисунок с результатом из раздела «Установка цвета с помощью RGB» на этой странице выше.

Мы видим что цвета идентичны.
Допускается сокращенная запись HEX-кода цвета: 6-значное число можно записать как 3-значное. Это допустимо только в случае, когда две цифры в значении цвета одного канала повторяются.
То есть допустимо следующее сокращение записи:
#rrggbb —> #rgb
Например, цвет #ff22aa допустимо написать так — #f2a, или цвет #44aa22 допустимо указать в виде #4a2.
Установка цвета с помощью HSL
В CSS3 появился новый формат для указания цвета.
Формат HSL — это аббревиатура от английских слов: Hue (оттенок), Saturate (насыщенность) и Lightness (светлота).
Оттенок в HSL — это значение цвета на специальном цветовом круге (рисунок 2) и оно задаётся в градусах. Если проводить аналогии с моделью RGB, то 0° соответствует красному, 120° соответствует зелёному, а 240° — синему цвету.
Значение оттенка изменятся в диапазоне от 0 до 359.

Второе значение — насыщенность (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.
komotoz.ru