Выбор и конвертер цветов

Цветовые модели

Цветовая модель — это система описания цветов в виде чисел. Разные модели используются в разных контекстах в зависимости от того, является ли выход экраном, принтером или дизайн-спецификацией.

RGB / RGBA

Формат

RGB определяет цвета путём смешивания красного, зелёного и синего света. Каждый канал варьируется от 0 до 255. rgb(255, 0, 0) — чистый красный. rgb(255, 255, 255) — белый. Канал A (альфа) добавляет прозрачность от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Например, rgba(255, 0, 0, 0.5) — полупрозрачный красный. RGB — это родная цветовая модель для экранов и цифровых дисплеев.

История

Модель RGB основана на теории трёхкомпонентного цветового зрения Юнга—Гельмгольца XIX века. Джеймс Клерк Максвелл провёл первые эксперименты по RGB-фотографии в 1861 году. RGB стал стандартом для электронных дисплеев с развитием цветных ЭЛТ-телевизоров в 1930—1940-х годах. Цветовое пространство sRGB было официально принято как веб-стандарт в HTML 3.2 в январе 1997 года.

HEX / HEXA

Формат

HEX — компактная запись значений RGB в шестнадцатеричном формате. #FF0000 соответствует rgb(255, 0, 0). Каждая пара hex-цифр представляет один канал: #RRGGBB. 8-значная форма #RRGGBBAA добавляет альфа-канал, где 00 — полностью прозрачный, а FF — полностью непрозрачный. Например, #FF000080 — красный с 50% непрозрачности. Сокращённые формы, такие как #F00, раскрываются в #FF0000.

История

HEX-нотация цветов появилась в первых веб-браузерах в середине 1990-х. Первые версии Mosaic и Netscape Navigator унаследовали систему имён цветов X11. CSS Level 1, опубликованный в декабре 1996 года Hakon Wium Lie и Bert Bos, официально стандартизировал hex-триплеты как основной способ задания цветов в вебе.

HSL / HSLA

Формат

HSL описывает цвет как тон, насыщенность и светлоту. Тон — это градус на цветовом круге (0-360): 0 — красный, 120 — зелёный, 240 — синий. Насыщенность (0-100%) управляет интенсивностью цвета. Светлота (0-100%) управляет яркостью, где 0% — чёрный, 100% — белый. HSL часто интуитивнее RGB для выбора цветов, поскольку позволяет регулировать яркость и насыщенность независимо.

История

HSL был впервые описан George H. Joblove и Donald Greenberg в статье 1978 года в Computer Graphics. Он был создан для решения фундаментальной проблемы RGB: смешивание красного, зелёного и синего неинтуитивно для людей. HSL переорганизует цветовое пространство RGB, чтобы художники и дизайнеры могли думать в терминах цвета (тон), яркости (насыщенность) и светлоты, что ближе к тому, как люди естественно описывают цвета.

HSV / HSB

Формат

HSV (тон, насыщенность, значение) похож на HSL, но использует «значение» (яркость) вместо светлоты. При 100% значения полностью насыщенные цвета являются чистыми и яркими. HSV более естественно соответствует работе палитр выбора цвета: панель насыщенности/яркости регулирует S и V, а ползунок тона — H.

История

HSV был описан Alvy Ray Smith в августе 1978 года во время работы в лаборатории компьютерной графики Нью-Йоркского технологического института. Он был опубликован в том же номере Computer Graphics, что и HSL. Smith разработал HSV для использования в одной из первых программ цифровой живописи, где художникам требовался интуитивный способ выбора цветов на экране. Цилиндрическая модель HSV естественно реализуется как палитра с ползунком тона и панелью насыщенности/яркости.

CMYK

Формат

CMYK (голубой, пурпурный, жёлтый, ключевой/чёрный) используется в печати. В отличие от RGB (аддитивная модель, свет), CMYK является субтрактивной (краска). Каждое значение представляет процент нанесённой краски. cmyk(0, 100, 100, 0) даёт красный. Преобразование между RGB и CMYK является приблизительным, так как они охватывают разные цветовые диапазоны (гамуты).

История

Основы CMYK восходят к Jacob Christoph Le Blon, который изобрёл полутоновую цветную печать с отдельными медными пластинами около 1710 года. Сначала он использовал красную, жёлтую и синюю пластины, а позже добавил чёрную пластину для более чётких контуров и текста. Современный четырёхцветный процесс CMYK был впервые реализован в 1890-х годах для цветных газетных иллюстраций. Чёрная пластина называется «ключевой», потому что несёт мелкие детали, к которым выравниваются (привязываются) остальные пластины.

Форматы цветов CSS

Современный CSS поддерживает несколько форматов цветов:

• #FF5733 или #ff5733 (HEX)
• rgb(255, 87, 51) или rgba(255, 87, 51, 0.5)
• hsl(14, 100%, 60%) или hsla(14, 100%, 60%, 0.5)
• Именованные цвета: red, cornflowerblue, rebeccapurple (всего 148 именованных цветов)