Цветовая гамма сайта играет важную и пожалуй самую главную роль в дизайне и привлечении посетителей. Бывают моменты, когда в фоне сайта, или его меню участвуют несколько оттенков и формируются они для каждого браузера по своему, по разному. Так в какой же форме может выражаться эта самая палитра цветов в HTML
В сайтостроении используют несколько вариантов выражения цвета и отличаются они между собой количеством символом.
Существую следующие цветовые модели – это HEX / HTML, RGB, RGBA, HSL, HSLA, CMYK, HSB / HSV, XYZ и LAB Но этот набор символов мало о чем может рассказать, поэтому пройдемся по каждому более детальнее.
Пожалуй самый распространенная цветовая модель и поддерживается практически всеми вэб-браузерами. Абривиатура модели складывается с названия основных цветов (Red, Green, Blue), которые и формируют эту цветовую палитру.
Цвета в данной модели указываются целыми числами от 0 до 255. Так, например, для синего цвета следует записать как 0,0,255 – красный и зеленый – 0, а вот синий – высокое значение – 255.
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 отличается тем, что к цвету RGB добавляется еще одно значение – значение альфа-канала, которое может быть от 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+
Формат HEX – выступает как шестнадцатеричное представление RGB.
В этой модели, цвета выражаются в виде трёх групп шестнадцатеричных цифр м каждая из групп отвечает за свой определенный цвет. Например, в коде #112233 группа 11 отвечает за красный, 22 — зелёный, а вот 33 — это синий. Все значения в группах должны находиться между 00 и FF.
h1 { color: #ff0000; } /* красный */
h2 { color: #00ff00; } /* зелёный */
h3 { color: #0000ff; } /* синий */
h4 { color: #00f; } /* тот же синий, сокращённая запись */
Как Вы уже догадались, данная модель выражения цвета аналогичная модели RGB и RGBA, только здесь в основе находится цилиндрическая система координат. Данный способ выражения цвета способствует более четко передать цветовую палитру и используется как правило в графических приложениях.
Расшифровывается абривиатура этой модели как Hue (цвет/оттенок), Saturation (насыщенность) и Lightness/Luminance (светлота/светлость/светимость, но не яркость).
Раз дело имеем с цилиндром, то положение цвета на цветовом круге (от 0 до 360). Saturation является процентным значением насыщенности (от 0% до 100%). Lightness является процентным значением светлости (от 0% до 100%)
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); } /* полностью прозрачный */
Не поддерживается HSL такими браузерами, как IE9+, Firefox, Chrome, Safari, и Opera 10+.
Цветовая палитра, которая ассоциируется с более темными оттенками, именно они имеют более высокие значения и используется в основном в цветовой полиграфии.
Если необходимо задать цвет в данной модели, то они определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK)
HSB (также известна как HSV) имеет схожие определения с моделью HSL, но это не одно и тоже. Почему похожие? Они имеют цилиндрическую геометрию. HSB/HSV базируется на модели «hexcone», а HSL на модели «bi-hexcone»
Расшифровывается HSB/HSV как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).
Цветовые модели, в основу которых заложены суто матиматическое начало. Отличительной чертой XYZ от RGB, CMYK, и других моделей, является то, что все компоненты «мнимы», иными словами, мы не можем их соотнести X, Y, и Z с каким-либо набором цветов для смешивания.
Модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. В процессе разработки Lab преследовали цель создать цветовое пространство, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ)
Коды и название цветов можно посмотреть здесь или же более подробный перечень — 256 безопасных цветов, их название, а также их Hex, RGB, HSL и CMYK-коды
Но можно ли перевести код цвета одной модели в другую? Можно и это можно осуществить при помощи он-лайн конвекторов, таких как CY-PR или ColorScheme
Если у Вас есть вопросы, жалобы или предложения по работе нашей компании, напишите нам Нам важно любое мнение. Спасибо.