CoderTools

Палитра цветов/Конвертер

Выбирайте цвета и конвертируйте между различными форматами

Пока нет истории
Хорошее совпадение ΔE: 0.00

Альтернативные совпадения:

Предпросмотр внешнего вида текста

The quick brown fox jumps over the lazy dog

Коэффициент контрастности
5.48:1
WCAG AA
Обычный текст Крупный текст
WCAG AAA
Обычный текст Крупный текст
color: #6366f1;
background-color: #6366f1;
border-color: #6366f1;

О форматах цветов

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

Понимание различных цветовых моделей необходимо для веб-разработки, UI-дизайна и создания цифрового искусства.

Поддерживаемые форматы цветов

HEX

#RRGGBB

RGB

0-255, 0-255, 0-255

HSL

0°-360°, 0-100%, 0-100%

HSV

0°-360°, 0-100%, 0-100%

CMYK

0-100%, ×4

YCbCr

16-235, 16-240, 16-240

Lab

L*: 0-100, a*/b*: -128 to +127

Детали формата цвета

HEX (Шестнадцатеричный)

Цвета HEX используют 6-значную шестнадцатеричную запись с префиксом #. Каждая пара представляет значения красного, зеленого и синего (00-FF). Короткая запись (#RGB) расширяется до #RRGGBB. Поддерживает 8-значный формат для прозрачности альфа (#RRGGBBAA).

Диапазон: #000000 (черный) до #FFFFFF (белый) Пример: #FF5733 = R:255, G:87, B:51

Использование: CSS, HTML, веб-дизайн, большинство языков программирования

RGB (Красный, Зеленый, Синий)

Модель RGB - это аддитивная цветовая модель, в которой красный, зеленый и синий свет объединяются для создания цветов. Эта модель напрямую соответствует тому, как экраны излучают свет, что делает ее родным цветовым пространством для цифровых дисплеев.

Диапазон: Каждый канал 0-255 (8-бит) или 0.0-1.0 (нормализованный) Пример: rgb(255, 87, 51) или rgba(255, 87, 51, 0.5) с альфа

Использование: Экранные дисплеи, светодиодное освещение, CSS, цифровая обработка изображений

HSL (Оттенок, Насыщенность, Светлота)

HSL представляет цвета с точки зрения человеческого восприятия. Оттенок - это угол цвета на цветовом круге, насыщенность - это интенсивность, а светлота - насколько светлым или темным является цвет. Это делает манипуляцию с цветом более интуитивной.

Диапазон: H: 0-360, S: 0%-100%, L: 0%-100% Пример: hsl(14, 100%, 60%) = теплый оранжевый цвет

Использование: CSS, генерация цветовых схем, интуитивный выбор цвета

HSV/HSB (Оттенок, Насыщенность, Значение/Яркость)

HSV (также называемый HSB) похож на HSL, но использует Значение вместо Светлоты. Значение представляет яркость, где 100% - самое яркое. Эта модель предпочтительна во многих графических приложениях, так как лучше соответствует тому, как художники думают о цвете.

Диапазон: H: 0-360, S: 0%-100%, V: 0%-100% Пример: hsv(14, 80%, 100%) = яркий оранжевый

Использование: Photoshop, GIMP, палитры цветов в графическом программном обеспечении

CMYK (Голубой, Пурпурный, Желтый, Ключевой/Черный)

CMYK - это субтрактивная цветовая модель, используемая в печати. В отличие от RGB, который добавляет свет, CMYK вычитает свет из белой бумаги. 'K' означает Ключевой (черный) для улучшения качества печати и сокращения использования чернил.

Диапазон: Каждый канал 0%-100% Пример: cmyk(0%, 66%, 80%, 0%) = оранжевый тон

Использование: Дизайн печати, коммерческая печать, упаковка

YCbCr (Яркость, Цветность)

YCbCr разделяет компоненты яркости (Y) и цветности (Cb, Cr). Это разделение позволяет эффективное сжатие видео, потому что человеческие глаза более чувствительны к яркости, чем к цвету. Обычно используется в JPEG, MPEG и стандартах вещания.

Диапазон: Y: 16-235 (цифровой), Cb/Cr: 16-240 (центрировано на 128) Пример: Y:166, Cb:90, Cr:198 оранжевый

Использование: Сжатие JPEG, кодирование видео (H.264, HEVC), телевещание

Lab (CIE L*a*b*)

Lab - это перцептивно-равномерное цветовое пространство, разработанное для приближения к человеческому зрению. L* представляет светлоту, a* ось зеленый-красный, а b* ось синий-желтый. Перцептивное расстояние в 1 единицу выглядит примерно одинаково независимо от цвета.

Диапазон: L*: 0-100, a*: -128 до +127, b*: -128 до +127 Пример: L*:70, a*:45, b*:65 оранжевый

Использование: Наука о цвете, расчет разницы цветов (Delta E), профессиональное управление цветом

Pantone (PMS)

Pantone Matching System (PMS) - это проприетарная система стандартизации цветов, широко используемая в печати, моде и дизайне продуктов. Каждый цвет имеет уникальный код, обеспечивающий согласованное воспроизведение на разных материалах и у разных производителей.

Формат: PANTONE [Номер] C/U/M (Глянцевый/Матовый/Матовый) Пример: PANTONE 186 C (Красный Coca-Cola), PANTONE 286 C (Синий IBM)

Использование: Фирменный стиль, коммерческая печать, дизайн упаковки, текстильная промышленность

Примечание: Это приблизительные цифровые представления. Фактические цвета Pantone могут отличаться при печати.

Основы теории цвета

Цвета существуют в различных 'пространствах', оптимизированных для разных целей. Аддитивные модели (RGB) работают путем добавления света, в то время как субтрактивные модели (CMYK) работают путем поглощения света. Перцептивные модели (Lab) соответствуют человеческому зрению.

Аддитивная цветовая модель

RGB объединяет красный, зеленый и синий свет. Добавление всех трех на полной интенсивности создает белый. Так работают экраны, проекторы и цифровые дисплеи.

=

Субтрактивная цветовая модель

CMYK поглощает (вычитает) длины волн света из белого. Объединение всех цветов создает черный (в теории). Так работают чернила и краски.

=

Перцептивная цветовая модель

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

L* a* b*

Примечания по конвертации

  • RGB HEX: Конвертация без потерь, просто изменение формата
  • RGB HSL/HSV: Без потерь в пределах гаммы, может потерять точность
  • RGB CMYK: Может потерять цвета за пределами печатной гаммы
  • RGB Lab: Использует иллюминант D65, предполагается цветовое пространство sRGB
  • RGB YCbCr: Использует стандарт BT.601 по умолчанию

Стандарты контрастности WCAG

Руководство по доступности веб-контента (WCAG) определяет минимальные требования к контрастности между текстом и фоном, чтобы обеспечить возможность чтения контента всеми пользователями, включая людей с нарушениями зрения.

AA Уровень AA: Минимум 4.5:1 для обычного текста, 3:1 для крупного текста
AAA Уровень AAA: Минимум 7:1 для обычного текста, 4.5:1 для крупного текста

Распространенные случаи использования

Настройки цветов CSS в веб-разработке
Цветовые схемы в UI/UX дизайне
Дизайн бренда и визуальная идентичность
Проверки соответствия дизайна доступности
Конвертация цветов для дизайна печати
Раскраска графиков визуализации данных