Палитра цветов в HTML

Палитра цветов

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

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

Кодировка цвета в HTML

Существую следующие цветовые модели – это HEX / HTML, RGB, RGBA, HSL, HSLA, CMYK, HSB / HSV, XYZ и LAB Но этот набор символов мало о чем может рассказать, поэтому пройдемся по каждому более детальнее.

RGB

Пожалуй самый распространенная цветовая модель и поддерживается практически всеми вэб-браузерами. Абривиатура модели складывается с названия основных цветов (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%); } /* тот же синий, процентная запись */

RGBA

Данная модель является расширенной формой 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 / HTML

Формат HEX – выступает как шестнадцатеричное представление RGB.
В этой модели, цвета выражаются в виде трёх групп шестнадцатеричных цифр м каждая из групп отвечает за свой определенный цвет. Например, в коде #112233 группа 11 отвечает за красный, 22 — зелёный, а вот 33 — это синий. Все значения в группах должны находиться между 00 и FF.

h1 { color: #ff0000; } /* красный */
h2 { color: #00ff00; } /* зелёный */
h3 { color: #0000ff; } /* синий */
h4 { color: #00f;    } /* тот же синий, сокращённая запись */

HSL и HSLA

Как Вы уже догадались, данная модель выражения цвета аналогичная модели 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+.

CMYK

Цветовая палитра, которая ассоциируется с более темными оттенками, именно они имеют более высокие значения и используется в основном в цветовой полиграфии.
Если необходимо задать цвет в данной модели, то они определяются соотношением голубого (Cyan), пурпурного (Magenta), жёлтого (Yellow), с добавлением чёрного (Key/blacK)

HSB или HSV

HSB (также известна как HSV) имеет схожие определения с моделью HSL, но это не одно и тоже. Почему похожие? Они имеют цилиндрическую геометрию. HSB/HSV базируется на модели «hexcone», а HSL на модели «bi-hexcone»
Расшифровывается HSB/HSV как Hue (цвет/оттенок), Saturation (насыщенность), Brightness/Value (яркость/значение).

XYZ

Цветовые модели, в основу которых заложены суто матиматическое начало. Отличительной чертой XYZ от RGB, CMYK, и других моделей, является то, что все компоненты «мнимы», иными словами, мы не можем их соотнести X, Y, и Z с каким-либо набором цветов для смешивания.

LAB

Модель LAB (CIELAB, «CIE 1976 L*a*b*») вычисляется из пространства CIE XYZ. В процессе разработки Lab преследовали цель создать цветовое пространство, изменение цвета в котором будет более линейным с точки зрения человеческого восприятия (по сравнению с XYZ)

Конвектор цветов

Коды и название цветов можно посмотреть здесь или же более подробный перечень — 256 безопасных цветов, их название, а также их Hex, RGB, HSL и CMYK-коды

Но можно ли перевести код цвета одной модели в другую? Можно и это можно осуществить при помощи он-лайн конвекторов, таких как CY-PR или ColorScheme

• www.htaccess.moscow
• Секреты продвижения сайтов