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

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Онлайн конвертер цветов поддерживает конвертацию в один клик между 14 цветовыми форматами, включая HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB и OKLCH. Включает встроенную пипетку для настройки в реальном времени, проверку контрастности WCAG, схемы цветовой гармонии, генерацию оттенков, пакетную конвертацию и извлечение цветов с изображений. Все вычисления выполняются полностью локально в вашем браузере — загрузка файлов не требуется, идеально подходит для дизайнеров и фронтенд-разработчиков.

Похожие

Симулятор дальтонизма

Фильтры Изображений

CSS Formatter

Конвертер единиц

Конвертер валют

Конвертация изображений

О цветовых пространствах и конвертации цветовых форматов

Конвертеры цветов — одни из наиболее часто используемых инструментов для дизайнеров и фронтенд-разработчиков, обеспечивающие точную конвертацию между различными представлениями цветов. Сам цвет — это визуальное восприятие; чтобы представить его на компьютерах и в печати, люди разработали несколько цветовых моделей (цветовых пространств), которые описывают один и тот же цвет с использованием разных числовых систем, каждая из которых подходит для разных сценариев и устройств.

Распространённые цветовые форматы включают: HEX (шестнадцатеричный RGB, стандартная веб-нотация), RGB (значения красного/зелёного/синего 0–255, основа экранных дисплеев), HSL (Тон/Насыщенность/Светлота, наиболее интуитивный для настройки цветов человеком), CMYK (проценты голубого/пурпурного/жёлтого/ключевого чёрного для печати). В последние годы перцептивно равномерные цветовые пространства, такие как OKLCH, набирают популярность, поскольку они математически гарантируют, что цвета с одинаковым значением светлоты визуально выглядят одинаково яркими — критически важно для построения дизайн-систем и генерации градиентов.

Зачем конвертировать между цветовыми форматами? Разные инструменты, платформы и носители вывода используют разные цветовые форматы: веб-CSS поддерживает HEX/RGB/HSL/OKLCH и другие; дизайнерское ПО, такое как Figma/Sketch, по умолчанию использует HEX; печать требует CMYK; а при динамической настройке цветов в коде (например, состояния наведения или изменения непрозрачности) HSL и OKLCH гораздо удобнее HEX. Точная конвертация цветов обеспечивает согласованность цветов между дизайн-макетами и финальной реализацией.

Контрастность WCAG — важный стандарт веб-доступности, измеряющий разницу яркости между текстом переднего плана и цветами фона для обеспечения читаемости для пользователей с нарушениями зрения. Обычный основной текст требует коэффициента контрастности 4.5:1 (уровень AA), для важного контента рекомендуется 7:1 (уровень AAA). Наш инструмент вычисляет это в реальном времени, помогая дизайнерам учитывать доступность при выборе цветов, а не исправлять её позже.

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

Оттенки/осветления цвета — это вариации одного и того же тона от светлого к тёмному, основа для построения дизайн-систем (как палитры Tailwind CSS 50–900). Традиционные RGB-оттенки просто смешиваются к белому, но выглядят визуально неравномерно; оттенки на основе OKLCH сохраняют тон и хрому, регулируя только светлоту, создавая визуально плавные переходы от светлого к тёмному — рекомендуемый подход для современных дизайн-систем. Наш инструмент предлагает оба стиля оттенков для сравнения.

Почему важна локальная обработка? Конвертация цветов — это чисто математическая операция и абсолютно не требует загрузки данных на серверы. Все вычисления в нашем инструменте выполняются полностью локально в вашем браузере — откройте страницу и используйте мгновенно без регистрации или входа, изображения и цветовые данные не загружаются. Это быстро и сохраняет конфиденциальность — вы можете уверенно использовать его даже для неопубликованных, конфиденциальных цветов дизайн-макетов.

Важное примечание: конвертация цветовых форматов математически точна, но из-за охватов экранов, калибровки мониторов и процессов печати одно и то же цветовое значение может выглядеть немного по-разному на разных устройствах и носителях. Экраны используют аддитивный RGB (больше света = ярче), а печать — субтрактивный CMYK (больше чернил = темнее). У них разные охваты — некоторые высоконасыщенные цвета RGB не могут быть точно воспроизведены чернилами CMYK. Результаты конвертации идеально подходят для цифрового дизайна и веб-разработки; для финальной печатной продукции рекомендуем профессиональное ПО для управления цветом для цветопробы.

Варианты использования

  • Конвертация HEX-значений из дизайн-макетов в RGB/HSL для CSS-стилей во фронтенд-разработке или в RGBA при необходимости прозрачности
  • Унификация форматов цветовых значений при переключении между дизайнерскими инструментами, такими как Figma, Sketch и Photoshop для UI/UX-дизайнеров
  • Конвертация экранных RGB-значений в CMYK для справочника во время ранней коммуникации по печатной продукции
  • Проверка коэффициентов контрастности между цветами текста и фона для соответствия WCAG AA/AAA в доступном дизайне
  • Быстрая генерация полного семейства от светлого к тёмному для построения дизайн-систем с помощью генератора оттенков
  • Создание профессиональных цветовых схем (комплементарных, аналогичных и т.д.) для брендинга или дизайна постеров с помощью цветовой гармонии
  • Извлечение доминантных цветов из референсных изображений или фотографий для вдохновения (пипетка цветов с изображения)
  • Пакетная обработка нескольких цветовых значений из дизайн-макетов и конвертация в нужные форматы одновременно
  • Удобная настройка яркости и насыщенности с помощью HSL или OKLCH при написании CSS-состояний, например hover
  • Построение перцептивно равномерных цветов дизайн-системы с использованием современного цветового пространства CSS OKLCH
  • Обучение принципам цветовых пространств с интерактивным визуальным сравнением того, как разные форматы представляют один и тот же цвет
  • Быстрый поиск английского именованного цвета CSS для любого значения для удобного справочника и коммуникации

Как использовать

  1. Введите значение любого цветового формата в верхнее поле ввода, нажмите на образец цвета, чтобы использовать пипетку, или перетаскивайте ползунки RGB/HSL/HSV для настройки
  2. Инструмент автоматически конвертирует в реальном времени во все 14 форматов, включая HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Перейдите на «Цветовая гармония» для схем, «Оттенки» для шкал осветления/затемнения или «Пакетно/Пипетка» для пакетной конвертации или извлечения цветов с изображения
  4. Нажмите кнопку копирования рядом с любым цветовым форматом, чтобы скопировать стандартную нотацию напрямую для использования

Функции

  • Конвертация 14 цветовых форматов: поддержка HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH и именованных цветов CSS
  • Умное распознавание ввода: вставьте любой цветовой формат — он автоматически определяется; поддерживает сокращения #rgb, #rrggbbaa с альфа-каналом, rgb(), hsl() и имена цветов CSS
  • Настройка слайдерами в реальном времени: ползунки RGB красный/зелёный/синий, HSL тон/насыщенность/светлота, HSV для мгновенной настройки цвета WYSIWYG
  • Поддержка альфа-прозрачности: конвертация RGBA и HSLA с альфа-каналом, поддержка форматов непрозрачности в процентах и десятичных дробях
  • Сопоставление с именованными цветами CSS: автоматически находит ближайший стандартный именованный цвет CSS (более 140 вариантов) для быстрого справочника
  • Проверка контрастности WCAG: расчёт коэффициентов контрастности относительно белого и чёрного текста в реальном времени с автоматическими индикаторами прохождения/непрохождения AA (≥4.5:1) и AAA (≥7:1)
  • Генератор цветовой гармонии: создание в один клик 5 классических схем — комплементарной, аналогичной, триадной, расщеплённо-комплементарной и тетрадной
  • Генерация оттенков: доступны как традиционные оттенки в RGB-смешении, так и перцептивно равномерные оттенки OKLCH, мгновенная генерация 11 шагов светлоты
  • Пакетная конвертация: обработка нескольких цветовых значений одновременно с многострочным вводом — идеально для обработки палитр дизайн-систем
  • Пипетка цветов с изображения: загрузите изображение для автоматического семплирования и извлечения 16 доминантных цветов, отлично подходит для получения палитр из референсов или фотографий
  • Копирование в один клик: кнопка копирования рядом с каждым цветовым форматом для мгновенного копирования в стандартной нотации — готово для вставки прямо в CSS или дизайнерское ПО
  • Генератор случайных цветов: генерируйте случайные цвета в один клик для быстрого вдохновения
  • Обработка исключительно в браузере: все цветовые вычисления выполняются локально в браузере без загрузки на сервер — работает мгновенно без регистрации
  • Адаптивный дизайн: безупречно работает на десктопе, мобильных устройствах и планшетах — настраивайте цвета и копируйте значения с комфортом на телефонах

Часто задаваемые вопросы

Какие цветовые форматы поддерживает конвертер цветов?

Поддерживает конвертацию между 14 распространёнными цветовыми форматами: HEX (3-значное сокращение и 8-значное с альфа), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 с источником света D65), CIE LAB, LCH, OKLAB, OKLCH, а также более 140 стандартных именованных цветов CSS. Введите любой формат для автоматической конвертации во все остальные.

Как пользоваться этим инструментом конвертации цветов?

Всё очень просто: 1) Введите любое цветовое значение в верхнее поле ввода — например #22c55e, rgb(34,197,94), hsl(142,71%,45%) или даже название цвета, например green; 2) Или нажмите на образец цвета, чтобы использовать пипетку, или перетаскивайте ползунки RGB/HSL/HSV для настройки в реальном времени; 3) Конвертация во все 14 форматов мгновенно отображается ниже — нажмите кнопку копирования рядом с любым форматом, чтобы скопировать его в буфер обмена.

В чём разница между HEX, RGB и HSL? Где используется каждый?

HEX — наиболее распространённая шестнадцатеричная нотация для веба — #ff0000 для красного — широко используется в CSS и файлах передачи дизайна. RGB представляет цвета значениями 0–255 для красного, зелёного и синего, является основой экранных дисплеев. HSL использует Тон (0–360°), Насыщенность и Светлоту, что лучше соответствует человеческому восприятию цвета и более интуитивно для дизайнеров при настройке цветов. CMYK использует проценты голубого, пурпурного, жёлтого и чёрного чернил для печати. OKLCH — современное перцептивно равномерное цветовое пространство, создающее визуально плавные градиенты и шкалы оттенков.

Что такое коэффициент контрастности WCAG? Какой коэффициент соответствует стандартам доступности?

Коэффициент контрастности WCAG измеряет разницу яркости между цветом текста и цветом фона, обеспечивая читаемость контента для пользователей с нарушениями зрения. Согласно Рекомендациям по обеспечению доступности веб-контента: обычный основной текст требует ≥4.5:1 для уровня AA (прохождение) и ≥7:1 для уровня AAA (отлично); крупный текст (≥18pt полужирный или ≥24pt обычный) требует ≥3:1 для AA. Инструмент отображает коэффициенты контрастности относительно белого и чёрного текста в реальном времени с автоматическими индикаторами прохождения/непрохождения для стандартов AA и AAA.

Что означает A в RGBA? Как настроить прозрачность?

A в RGBA означает Альфа-канал, который управляет прозрачностью — значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Например, rgba(34,197,94,0.5) — это полупрозрачный зелёный. Настраивайте прозрачность с помощью ползунка Альфа; результаты конвертации показывают форматы RGBA и HSLA с альфа. HEX также поддерживает прозрачность добавлением двух шестнадцатеричных цифр после 6-значного цвета — например #22c55e80 представляет 50% непрозрачности.

Что такое OKLCH и LCH? Чем они отличаются от HSL?

LCH и OKLCH — перцептивно равномерные цветовые пространства, где L — Светлота, C — Хрома (насыщенность), H — Тон. Их главное преимущество по сравнению с HSL: цвета с одинаковым значением L визуально выглядят одинаково яркими, что критически важно для дизайн-систем — если вы генерируете палитры с разными тонами, но одинаковой светлотой с помощью HSL, некоторые выглядят темнее других, но OKLCH гарантирует равномерную воспринимаемую светлоту. OKLCH новее LAB/LCH с более простыми вычислениями и более точным предсказанием цвета, рекомендуется в современном CSS (CSS Color Level 4).

Как пользоваться функцией пипетки цветов с изображения?

Перейдите на вкладку «Пакетно/Пипетка», нажмите загрузить, чтобы выбрать изображение — инструмент автоматически масштабирует изображения до сетки 100×100 и извлекает 16 цветов из равномерно распределённых позиций, отображая образцы и цветовые значения. Нажмите на любой образец, чтобы установить этот цвет как основной для дальнейшей настройки и конвертации. Идеально для быстрого извлечения палитр из референсных изображений, дизайн-макетов или фотографий.

Какие схемы цветовой гармонии доступны и как их использовать?

Инструмент предоставляет 5 классических схем гармонии: 1) Комплементарная: цвета на 180° друг от друга для высокой контрастности; 2) Аналогичная: цвета на 30° друг от друга для естественной гармонии; 3) Триадная: цвета на 120° друг от друга для яркого баланса; 4) Расщеплённо-комплементарная: базовый цвет + ±30° от комплементарного для контрастности с мягкостью; 5) Тетрадная (прямоугольник): четыре цвета на 90° друг от друга для богатого разнообразия. Перейдите на вкладку «Цветовая гармония», чтобы увидеть сгенерированные схемы — нажмите на любой образец, чтобы установить его как основной цвет.

Можно ли использовать результаты конвертации CMYK напрямую для печати?

Они хорошо подходят в качестве справочника, но учтите: экраны используют аддитивный цвет RGB (излучение света), а печать — субтрактивный CMYK (отражение чернил). У них разные охваты — некоторые яркие цвета RGB (например, насыщенные зелёные и синие) не могут быть точно воспроизведены чернилами CMYK, поэтому возникает некоторое смещение цветов. Инструмент использует стандартные формулы преобразования RGB в CMYK, подходит для раннего этапа коммуникации и быстрого справочника. Для финальной печатной продукции рекомендуем использовать профессиональное дизайнерское ПО с правильными цветовыми профилями ICC для цветопробы.

Как работает пакетная конвертация? Сколько цветов можно конвертировать одновременно?

Перейдите на вкладку «Пакетно/Пипетка», введите по одному цвету на строку в текстовом поле (свободно смешивая HEX/RGB/HSL/имена цветов CSS), затем нажмите пакетная конвертация для обработки всех цветов сразу. Результаты показывают образцы цветов и HEX-значения для каждого. Теоретического предела нет, но для сотен цветов рекомендуем обрабатывать пакетами, чтобы избежать зависаний браузера.

Можно ли использовать конвертер цветов на мобильных устройствах?

Да. Инструмент использует адаптивный дизайн и отлично работает на мобильных устройствах, планшетах и десктопных экранах любых размеров. На мобильных вы по-прежнему можете вводить цветовые значения, перетаскивать ползунки для настройки цветов, просматривать конвертации и копировать значения — все функции соответствуют десктопному опыту. А поскольку это чистые локальные вычисления, это не будет расходовать мобильный трафик.

Что делать, если при вводе отображается «неопознанный цветовой формат»?

Проверьте формат ввода: 1) HEX должен начинаться с # (необязательно), за которым следуют 3, 6 или 8 шестнадцатеричных символов (0-9/a-f) — #f00, #ff0000, #ff0000ff являются допустимыми; 2) Формат RGB должен быть rgb(r,g,b) с тремя значениями 0–255, разделёнными запятыми; 3) Формат HSL — hsl(h,s%,l%) с тоном 0–360°, насыщенностью и светлотой 0–100%; 4) Имена цветов CSS должны быть стандартными именами, например red/blue/green — китайские названия цветов не поддерживаются.

Почему конвертированные цвета выглядят по-разному в разном ПО?

Это нормальное поведение управления цветом: разное ПО, мониторы и операционные системы могут использовать разные цветовые профили (sRGB, Display P3, Adobe RGB), что вызывает небольшие визуальные различия для одного и того же цветового значения. Веб-страницы по умолчанию используют цветовое пространство sRGB — если вы используете профили Adobe RGB или Display P3 в таком ПО, как Photoshop, вам потребуется конвертировать в sRGB при экспорте для согласованного отображения в вебе.

Какой цветовой формат использовать во фронтенд-разработке?

Современный CSS поддерживает все цветовые форматы: HEX наиболее распространён с лучшей совместимостью и является стандартом для передачи дизайна; RGB/RGBA хорошо подходит, когда вам нужна динамическая настройка непрозрачности или манипуляция на уровне каналов; HSL наиболее интуитивен для написания вариантов цветов непосредственно в коде (например, осветление состояния наведения простым увеличением L); OKLCH — будущее, нативно поддерживается в CSS Color Level 4, с перцептивной равномерностью идеально подходит для генерации оттенков и градиентов — выбирайте исходя из потребностей совместимости вашего проекта.

Для чего нужна функция генерации оттенков? В чём разница между традиционными оттенками и оттенками OKLCH?

Генерация оттенков мгновенно создаёт 11 шагов (50–900) осветлений и затемнений для цветовой семейства, идеально для построения палитр дизайн-систем (как система цветов Tailwind). Традиционные оттенки просто смешиваются к белому в RGB-пространстве — хотя численно они равномерны, средние тона могут выглядеть неравномерно. Оттенки OKLCH сохраняют тон и хрому, регулируя только светлоту L, создавая визуально плавные переходы между светлым и тёмным — более профессионально и отполированно.

Устранение неполадок

Что делать, если при вводе отображается «неопознанный цветовой формат»?

Проверьте: 1) Формат HEX использует допустимые шестнадцатеричные символы (0-9, a-f, A-F) с 3, 6 или 8 цифрами; # необязателен; 2) Формат RGB/RGBA требует трёх или четырёх значений в скобках — R/G/B 0-255, Альфа 0-1, разделённых запятыми; 3) Формат HSL/HSLA требует H 0-360, S и L как процентные значения 0-100; 4) Имена цветов CSS должны быть стандартными английскими именами — китайские названия цветов не поддерживаются.

Почему конвертация CMYK выглядит иначе, чем реальная печать?

Это ожидаемо: у RGB и CMYK разные охваты — многие яркие цвета RGB не могут быть воспроизведены чернилами CMYK. Инструмент использует стандартные формулы конвертации, подходящие для раннего справочника. Для профессиональной печати: 1) Переведите в режим CMYK в дизайнерском ПО; 2) Используйте правильные цветовые профили ICC; 3) Выполните цифровую цветопробу.

Почему один и тот же цвет выглядит по-разному на телефоне и на компьютере?

Разные экраны имеют разный охват цветов, цветовую температуру, яркость и калибровку: Mac по умолчанию использует широкий охват Display P3, большинство ПК с Windows используют sRGB, а мобильные экраны различаются. Для веб-дизайна рекомендуется стандартизировать sRGB в качестве базового уровня для согласованного отображения на большинстве устройств.

Загрузка изображения для пипетки цветов не реагирует?

Пожалуйста, подтвердите: 1) Вы загружаете стандартный формат изображения (JPG/PNG/GIF/WebP); 2) Файл изображения не повреждён; 3) Размер файла не слишком велик (рекомендуется менее 5МБ). Извлечение цветов с изображения обрабатывается локально в canvas и никогда не загружается на серверы — обновление страницы и повторная загрузка обычно решают проблемы.

Глоссарий

HEX
Шестнадцатеричная цветовая нотация с использованием #, за которым следуют 6 шестнадцатеричных цифр, представляющих RGB (две цифры на канал, 00–FF) — #FF0000 для красного, наиболее распространённый формат для веб и дизайнерского ПО. Поддерживает 3-значные сокращения (например #f00) и 8-значную нотацию с альфа-каналом.
RGB/RGBA
Представляет цвет тремя значениями 0–255 для красного, зелёного и синего; rgba() добавляет Альфа-канал для прозрачности (0–1). Основная цветовая модель для экранных дисплеев.
HSL/HSLA
Представляет цвет Тоном (0–360°), Насыщенностью (0–100%) и Светлотой (0–100%), лучше соответствует человеческому восприятию цвета — более интуитивно для дизайнеров при настройке цветов.
HSV/HSB
Тон, Насыщенность, Значение/Яркость — похоже на HSL, но с другим расчётом светлоты, часто встречается в пипетках в дизайнерском ПО, таком как Photoshop.
HWB
Тон, Белизна, Чёрнота — дополнение CSS Color Level 4, более интуитивное, чем HSL: просто добавьте белый или чёрный для настройки тона.
CMYK
Проценты чернил голубого, пурпурного, жёлтого и ключевого (чёрного), используются в полиграфии для представления соотношений смешения чернил.
CIE LAB/LAB
Перцептивно равномерное цветовое пространство, определённое Международной комиссией по освещению (CIE): L — Светлота (0–100), a — ось зелёный-красный, b — ось синий-жёлтый — разработано так, чтобы числовые расстояния соответствовали воспринимаемым цветовым различиям.
LCH
Представление в полярных координатах, преобразованное из LAB: L Светлота, C Хрома (насыщенность), H Тон — более перцептивно равномерное, чем HSL, подходит для профессионального дизайна, требующего точного перцептивного контроля.
OKLAB/OKLCH
Новое поколение перцептивно равномерных цветовых пространств, представленное в 2020 году — более простые вычисления и более точное предсказание тона, чем LAB/LCH. OKLCH — его полярная форма, нативно поддерживается в современном CSS и рекомендуется для построения дизайн-систем.
Контрастность WCAG
Коэффициент яркости между текстом переднего плана и фоном, указанный в Рекомендациях по обеспечению доступности веб-контента: AA требует ≥4.5:1 для основного текста, AAA требует ≥7:1 — обеспечивает читаемость для пользователей с нарушениями зрения.
Цветовая гармония
Теория цвета, основанная на положениях вокруг цветового круга, использующая геометрические соотношения (комплементарная 180°, аналогичная с шагом 30°, триадная с шагом 120° и т.д.) для генерации визуально цельных и эстетически приятных комбинаций.
Оттенки/осветления
Диапазон вариаций одного и того же тона от светлого к тёмному, обычно генерируемый как 11 шагов от 50 до 900, используется в дизайн-системах для разных применений одного цвета (фоны, границы, текст, акценты).

Краткий справочник сравнения 14 цветовых форматов

Ниже приведены диапазоны значений, примеры чистого красного и основные варианты использования для каждого цветового формата:

ФорматДиапазон значенийПример чистого красногоОсновные варианты использования
HEX#RRGGBB 00-FF#ff0000Веб-CSS, передача дизайна — наиболее универсальный формат
RGBR/G/B: 0-255rgb(255,0,0)Основа экранных дисплеев, программирование Canvas/WebGL
RGBAПлюс A: 0-1rgba(255,0,0,1)CSS, требующий прозрачности, эффекты наложения
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)Дизайнерская настройка цветов, динамическая манипуляция цветами в коде
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Пипетки в дизайнерском ПО, таком как Photoshop
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4 — интуитивная настройка добавлением белого/чёрного
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)Полиграфия и издательская индустрия
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)Современный CSS, палитры дизайн-систем, перцептивно равномерные градиенты

Справочник стандартов контрастности доступности WCAG

Минимальные требования к контрастности из Рекомендаций по обеспечению доступности веб-контента (WCAG 2.1):

УровеньТребуемый коэффициент контрастностиПрименимый тип текстаПримечания
AA≥ 4.5:1Обычный основной текст (<18pt обычный или <14pt полужирный)Минимальный проходной стандарт, требование юридического соответствия
AA≥ 3:1Крупный текст (≥18pt обычный или ≥14pt полужирный)Крупные заголовки могут иметь пониженные требования
AAA≥ 7:1Обычный основной текст (расширенный)Рекомендуется для важного контента, длинного чтения
AAA≥ 4.5:1Крупный текст (расширенный)Отличный доступный дизайн

Краткий справочник 5 схем цветовой гармонии

Классические цветовые комбинации на основе углов цветового круга — нажмите для мгновенной генерации:

Тип схемыРасстояние по тонуКоличество цветовВизуальный эффект и варианты использования
Комплементарная180° друг от друга2 цветаСильная контрастность — идеально для кнопок, акцентов, CTA
Аналогичная±30° рядом3 цветаГармонично и естественно — отлично для больших фонов, основных палитр
Триаднаяс шагом 120°3 цветаЯрко и сбалансированно — идеально для брендинга, иллюстраций
Расщеплённо-комплементарнаяБазовый + ±30° от комплементарного3 цветаКонтрастность с мягкостью — более изысканно, чем комплементарная
Тетраднаяс шагом 90°4 цветаБогато и разнообразно — идеально для сложных дизайнов, детских товаров

Privacy & Security

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

Authoritative References