Палитра цветов/Конвертер
Выбирайте цвета и конвертируйте между различными форматами
Альтернативные совпадения:
Предпросмотр внешнего вида текста
The quick brown fox jumps over the lazy dog
color: #6366f1; background-color: #6366f1; border-color: #6366f1;
О цветовых моделях
Инструмент для точной работы с цветом в дизайне и разработке.
Понимание различных цветовых моделей необходимо для веб-разработки, UI-дизайна и создания цифрового искусства.
Форматы
#RRGGBB
0-255, 0-255, 0-255
0°-360°, 0-100%, 0-100%
0°-360°, 0-100%, 0-100%
0-100%, ×4
16-235, 16-240, 16-240
L*: 0-100, a*/b*: -128 to +127
Детали формата цвета
HEX (Шестнадцатеричный)
Цвета HEX используют 6-значную шестнадцатеричную запись с префиксом #. Каждая пара представляет значения красного, зеленого и синего (00-FF). Короткая запись (#RGB) расширяется до #RRGGBB. Поддерживает 8-значный формат для прозрачности альфа (#RRGGBBAA).
Использование: CSS, HTML, веб-дизайн, большинство языков программирования
RGB (Красный, Зеленый, Синий)
Модель RGB - это аддитивная цветовая модель, в которой красный, зеленый и синий свет объединяются для создания цветов. Эта модель напрямую соответствует тому, как экраны излучают свет, что делает ее родным цветовым пространством для цифровых дисплеев.
Использование: Экранные дисплеи, светодиодное освещение, CSS, цифровая обработка изображений
HSL (Оттенок, Насыщенность, Светлота)
HSL представляет цвета с точки зрения человеческого восприятия. Оттенок - это угол цвета на цветовом круге, насыщенность - это интенсивность, а светлота - насколько светлым или темным является цвет. Это делает манипуляцию с цветом более интуитивной.
Использование: CSS, генерация цветовых схем, интуитивный выбор цвета
HSV/HSB (Оттенок, Насыщенность, Значение/Яркость)
HSV (также называемый HSB) похож на HSL, но использует Значение вместо Светлоты. Значение представляет яркость, где 100% - самое яркое. Эта модель предпочтительна во многих графических приложениях, так как лучше соответствует тому, как художники думают о цвете.
Использование: Photoshop, GIMP, палитры цветов в графическом программном обеспечении
CMYK (Голубой, Пурпурный, Желтый, Ключевой/Черный)
CMYK - это субтрактивная цветовая модель, используемая в печати. В отличие от RGB, который добавляет свет, CMYK вычитает свет из белой бумаги. 'K' означает Ключевой (черный) для улучшения качества печати и сокращения использования чернил.
Использование: Дизайн печати, коммерческая печать, упаковка
YCbCr (Яркость, Цветность)
YCbCr разделяет компоненты яркости (Y) и цветности (Cb, Cr). Это разделение позволяет эффективное сжатие видео, потому что человеческие глаза более чувствительны к яркости, чем к цвету. Обычно используется в JPEG, MPEG и стандартах вещания.
Использование: Сжатие JPEG, кодирование видео (H.264, HEVC), телевещание
Lab (CIE L*a*b*)
Lab - это перцептивно-равномерное цветовое пространство, разработанное для приближения к человеческому зрению. L* представляет светлоту, a* ось зеленый-красный, а b* ось синий-желтый. Перцептивное расстояние в 1 единицу выглядит примерно одинаково независимо от цвета.
Использование: Наука о цвете, расчет разницы цветов (Delta E), профессиональное управление цветом
Pantone (PMS)
Pantone Matching System (PMS) - это проприетарная система стандартизации цветов, широко используемая в печати, моде и дизайне продуктов. Каждый цвет имеет уникальный код, обеспечивающий согласованное воспроизведение на разных материалах и у разных производителей.
Использование: Фирменный стиль, коммерческая печать, дизайн упаковки, текстильная промышленность
Примечание: Это приблизительные цифровые представления. Фактические цвета Pantone могут отличаться при печати.
Основы теории цвета
Цвета существуют в различных 'пространствах', оптимизированных для разных целей. Аддитивные модели (RGB) работают путем добавления света, в то время как субтрактивные модели (CMYK) работают путем поглощения света. Перцептивные модели (Lab) соответствуют человеческому зрению.
Аддитивная цветовая модель
RGB объединяет красный, зеленый и синий свет. Добавление всех трех на полной интенсивности создает белый. Так работают экраны, проекторы и цифровые дисплеи.
Субтрактивная цветовая модель
CMYK поглощает (вычитает) длины волн света из белого. Объединение всех цветов создает черный (в теории). Так работают чернила и краски.
Перцептивная цветовая модель
Lab и аналогичные пространства разработаны вокруг человеческого восприятия, что делает их идеальными для сравнения и коррекции цветов.
Примечания по конвертации
- RGB HEX: Конвертация без потерь, просто изменение формата
- RGB HSL/HSV: Без потерь в пределах гаммы, может потерять точность
- RGB CMYK: Может потерять цвета за пределами печатной гаммы
- RGB Lab: Использует иллюминант D65, предполагается цветовое пространство sRGB
- RGB YCbCr: Использует стандарт BT.601 по умолчанию
Стандарты контрастности WCAG
Руководство по доступности веб-контента (WCAG) определяет минимальные требования к контрастности между текстом и фоном, чтобы обеспечить возможность чтения контента всеми пользователями, включая людей с нарушениями зрения.
Распространенные случаи использования
Частые вопросы
Чем отличаются форматы HEX, RGB и HSL?
HEX — это компактная шестизначная шестнадцатеричная запись (например #FF5733), кодирующая те же красный, зелёный и синий каналы, что и RGB, но в семнадцатеричной системе. RGB задаёт каждый канал десятичным числом от 0 до 255. HSL (цветовой тон, насыщенность, светлота) разделяет угол цвета, яркость и светлоту — гораздо удобнее для создания оттенков и тонов без подбора RGB. Все три формата взаимопересчитываемы.
Что означает альфа-канал (A) в RGBA и HSLA?
Альфа-канал управляет прозрачностью цвета. Значение A идёт от 0 (полная прозрачность) до 1 (полная непрозрачность), или от 0 % до 100 % в CSS. Например, rgba(255, 0, 0, 0.5) — это красный цвет с 50% прозрачностью. Альфа широко применяется для наложений, теней и эффектов при наведении. Стандартный HEX не содержит альфу, если не использовать 8-значный HEX (например #FF573380).
Чем отличаются HSL и HSV (HSB)?
HSL и HSV (также HSB — цветовой тон, насыщенность, яркость) обе используют угол цвета, но по-разному определяют третью ось. В HSL светлота 50% при максимальной насыщенности — это яркий чистый цвет, 0% — чёрный, 100% — белый. В HSV яркость 100% и максимальная насыщенность дают яркий чистый цвет, а 0% яркости всегда чёрный. HSV широко используется в Photoshop, HSL — в CSS и веб-дизайне.
Чем цвета CMYK отличаются от RGB?
RGB использует аддитивное смешивание: все три канала на полной интенсивности дают белый. CMYK — субтрактивное: краски поглощают свет и дают тёмный тон. RGB — нативная модель экранов и камер, CMYK — стандарт полиграфической печати. При подготовке печатных материалов конвертируйте цвета в CMYK заранее: насыщенные синие и электрический зелёный Ѿчасто выглядят тусклее на бумаге.
Почему один цвет выглядит по-разному на разных экранах или устройствах?
Внешний вид цвета пользуются разными от устройства куству различиям дисплея технологий, цветовых профилей и аппаратной калибровки. У каждого экрана есть цветовой охват — диапазон отображаемых цветов. Бюджетные мониторы охватывают лишь 60–72% sRGB, тогда как профессиональные достигают 99% sRGB или покрывают широкие цветовые пространства P3 и AdobeRGB. Профили ICC сообщают ОС, как интерпретировать числовые значения цвета для конкретного дисплея. Без калибровки #FF5733 может выглядеть оранжевым на одном экране и красно-оранжевым на другом. Для точной цветопередачи используйте аппаратно скалиброванный дисплей.
Связанные инструменты
Конвертер изображений в Base64
Преобразование изображений в кодировку Base64 с поддержкой форматов PNG, JPG, GIF, SVG, WebP, генерация Data URI и CSS фонов
CSS Минификатор и Украшатель
Сжатие или украшение CSS кода, удаление пробелов и комментариев для оптимизации размера файла или форматирование кода для удобочитаемости
Генератор цветовых палитр
Профессиональный генератор цветовых палитр с смешиванием цветов, созданием градиентов, цветовыми схемами и экспортом в форматы CSS/SCSS/JSON
HTML Кодировщик/Декодер
Преобразование специальных символов в HTML сущности с именованными, десятичными и шестнадцатеричными форматами для предотвращения XSS атак
Base64 Кодировщик/Декодер
Быстрое кодирование и декодирование Base64 строк с поддержкой текста и файлов
URL Кодировщик/Декодер
Кодирование и декодирование URL для обеспечения соответствия и удобства использования