Конвертер цветовых
пространств
Цветовые пространства: чем они отличаются
Каждая цветовая модель описывает цвет по-своему. Одни удобны для экранов, другие для печати, третьи для интуитивного подбора оттенков. Понимание различий помогает выбирать правильный формат для конкретной задачи.
HEX (#RRGGBB)
Шестнадцатеричная запись трёх каналов RGB. Каждый канал кодируется двумя символами (00-FF), что даёт 256 значений. Самый популярный формат в вебе, CSS и дизайн-инструментах. Поддерживает сокращённую запись (#F00 = #FF0000) и 8-символьный формат с альфа-каналом (#RRGGBBAA).
RGB (Red, Green, Blue)
Аддитивная модель, основанная на смешении красного, зелёного и синего света. Каждый канал принимает значения 0-255. Используется во всех экранах: мониторах, телевизорах, смартфонах. Цвет получается путём сложения лучей — чем больше значение, тем ярче канал.
CMYK (Cyan, Magenta, Yellow, Key)
Субтрактивная модель для полиграфии и печати. Краски поглощают свет, а не излучают. Четвёртый канал K (Key = чёрный) добавлен, потому что смешение CMY даёт не чистый чёрный, а грязно-коричневый цвет. Значения указываются в процентах (0-100%).
HSL (Hue, Saturation, Lightness)
Модель на основе цветового круга. Оттенок (H) задаётся углом 0-360 градусов, насыщенность (S) и яркость (L) в процентах. Интуитивно понятна для дизайнеров: легко создавать вариации одного цвета, меняя только яркость или насыщенность.
HSV / HSB (Hue, Saturation, Value)
Похожа на HSL, но вместо яркости использует значение (Value / Brightness). При V=100% и S=100% получается максимально чистый цвет. Широко используется в графических редакторах (Photoshop, GIMP) и в палитрах выбора цвета.
Именованные CSS-цвета
В CSS определено 148 именованных цветов — от AliceBlue до YellowGreen. Наш конвертер автоматически находит ближайший именованный цвет к выбранному значению, что удобно для быстрого подбора и коммуникации с коллегами.
Возможности конвертера
Полный набор инструментов для работы с цветом — от простой конвертации до проверки доступности и подбора гармоний.
Мгновенная конвертация
Измените значение в любом из пяти форматов (HEX, RGB, CMYK, HSL, HSV) — все остальные обновятся автоматически. Никаких кнопок «Конвертировать», всё работает в реальном времени.
Визуальный предпросмотр
Большой цветовой сэмпл показывает выбранный цвет. Используйте нативный color picker браузера для интуитивного выбора или введите точные значения вручную.
Контрастность WCAG
Автоматический расчёт контраста выбранного цвета с чёрным и белым текстом. Отображение уровня доступности (AA, AAA, AA Large) по стандарту WCAG 2.1.
Цветовые гармонии
Подбор гармоничных сочетаний: комплементарная, триадная, аналоговая и расщеплённо-комплементарная схемы. Нажмите на цвет, чтобы переключиться на него.
Копирование в один клик
Каждый формат можно скопировать в буфер обмена одним нажатием. Скопированное значение сразу готово для вставки в CSS, код или дизайн-инструмент.
Определение CSS-цвета
Автоматический поиск ближайшего именованного CSS-цвета из 148 стандартных. Показывает название, HEX и «расстояние» до выбранного оттенка.
RGB vs CMYK/ для печати и экрана
Понимание разницы между RGB и CMYK критически важно, если вы работаете и с экранными, и с печатными материалами. Цвет на мониторе и цвет на бумаге формируются принципиально по-разному.
Аддитивная модель (RGB) — экраны
Пиксель монитора состоит из трёх светодиодов: красного, зелёного и синего. Когда все три горят на максимуме — получается белый цвет. Когда выключены — чёрный. Промежуточные значения дают миллионы оттенков. RGB не может быть напечатан напрямую — его нужно конвертировать в CMYK.
Субтрактивная модель (CMYK) — печать
Типографские краски поглощают (вычитают) часть спектра белого света бумаги. Циан поглощает красный, маджента — зелёный, жёлтый — синий. При смешении всех трёх должен получиться чёрный, но на практике выходит тёмно-коричневый, поэтому добавлен чёрный канал (Key). Гамма CMYK уже, чем у RGB — некоторые яркие экранные цвета невозможно точно воспроизвести на бумаге.
Практические рекомендации
Для веб-дизайна используйте RGB/HEX — это нативный формат экранов. Для подготовки макетов к печати конвертируйте в CMYK и проверяйте цвета в режиме soft proofing. Яркие неоновые цвета (насыщенный синий, ярко-зелёный) при печати станут приглушённее — учитывайте это на этапе дизайна.
Для веба: используйте HEX (#FF5733) или rgb(255, 87, 51). Для полупрозрачных элементов — rgba() или hsla() с альфа-каналом.
Для печати: работайте в CMYK с самого начала. Профиль FOGRA39 (ISO Coated v2) — стандарт для мелованной бумаги в Европе и России.
Теория цветовых гармоний
Цветовые гармонии основаны на взаимном расположении оттенков на цветовом круге. Правильное сочетание создаёт визуальный баланс и привлекает внимание зрителя.
Комплементарная
Два цвета, расположенные напротив друг друга на цветовом круге (разница 180 градусов). Создаёт максимальный контраст и визуальное напряжение. Идеальна для акцентных элементов: CTA-кнопок, выделений, логотипов. Примеры: синий + оранжевый, красный + зелёный.
Триадная
Три цвета, равноудалённые друг от друга на цветовом круге (по 120 градусов). Даёт яркую, динамичную палитру с балансом. Один цвет обычно доминирует, два других используются как акценты. Примеры: красный + синий + жёлтый, оранжевый + фиолетовый + зелёный.
Аналоговая
Цвета, расположенные рядом на цветовом круге (разница 30 градусов). Создаёт спокойную, гармоничную палитру без резких контрастов. Часто встречается в природе: осенние листья, закат, морской берег. Идеальна для фонов и мягких переходов.
Расщеплённо-комплементарная
Вариация комплементарной схемы. Вместо противоположного цвета берутся два соседних к нему (150 и 210 градусов). Сохраняет контрастность, но менее агрессивна. Хороший выбор для начинающих — сложнее ошибиться, чем с чистой комплементарной.
Советы по работе с цветом
Практические рекомендации, которые помогут эффективно использовать конвертер цветов в повседневной работе.
1Начинайте с HSL
Для подбора оттенков HSL интуитивнее RGB. Зафиксируйте оттенок (H), а затем варьируйте насыщенность и яркость. Так вы быстро получите палитру из нескольких вариаций одного цвета — от пастельного до тёмного.
2Проверяйте контрастность
Любой текст должен иметь контраст не менее 4.5:1 (WCAG AA) с фоном. Для крупного текста (от 18pt) допускается 3:1. Наш конвертер автоматически показывает контраст выбранного цвета с чёрным и белым текстом.
3Учитывайте дальтонизм
Около 8% мужчин имеют ту или иную форму дальтонизма. Не полагайтесь только на цвет для передачи информации — дублируйте иконками, текстом или паттернами. Избегайте сочетаний красный/зелёный как единственного способа различения элементов.
4Используйте правило 60-30-10
Классическое правило дизайна интерьера и UI: 60% основного цвета, 30% вторичного, 10% акцентного. Цветовые гармонии нашего конвертера помогут подобрать эти три цвета: основной, аналоговый и комплементарный.
5Конвертируйте заранее для печати
Если макет пойдёт в типографию, конвертируйте цвета из RGB в CMYK на этапе дизайна. Яркие неоновые цвета (насыщенный синий, кислотный зелёный) существенно тускнеют при печати — лучше узнать об этом заранее, чем при получении тиража.
6Создавайте градиенты осознанно
При создании градиентов между двумя цветами важно учитывать их положение на цветовом круге. Аналоговые цвета (близкие по H в HSL) дают чистые плавные переходы, а комплементарные — «грязную середину» в RGB-пространстве.
Как пользоваться конвертером
Простая пошаговая инструкция для работы с конвертером цветовых пространств.
Выберите цвет
Используйте палитру (кнопка «Выбрать цвет») или введите значение в любое поле: HEX, RGB, CMYK, HSL или HSV.
Все форматы обновятся
Изменение в любом поле мгновенно пересчитывает все остальные форматы. Большой сэмпл показывает выбранный цвет.
Скопируйте нужный формат
Нажмите «Копировать» рядом с нужным форматом. Значение скопируется в буфер обмена в готовом виде для CSS или кода.
Исследуйте гармонии
Прокрутите вниз к цветовым гармониям. Нажмите на любой цвет из предложенных сочетаний, чтобы переключиться на него.
Часто задаваемые вопросы
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.
Похожие калькуляторы
Конвертер типографских единиц
Конвертация между пунктами, мм, пикселями, em/rem. Типографская шкала, пика, цицеро, дюймы.
/konverter-tipografskih-edinicГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор DPI и размера печати
Пересчёт пикселей в размер печати при заданном DPI. Форматы A4-A0, фотопечать, полиграфия.
/kalkulyator-dpi-pechatГенератор цветовых палитр
Подбор гармоничных цветовых сочетаний: комплементарные, аналогичные, триадные. Экспорт в CSS, Tailwind, SCSS.
/generator-cvetovyh-palitrКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculatorКалькулятор PPI и DPI (плотность пикселей)
Рассчитайте PPI экрана, размер пикселя и физические размеры монитора/телефона. Конвертер пикселей в сантиметры.
/ppi-calculatorКалькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена
Комплексный калькулятор UX-метрик: System Usability Scale (SUS), Net Promoter Score (NPS), HEART framework Google, статистическая значимость A/B-тестов, эвристическая оценка Нильсена (10 эвристик), метрики выполнения задач (Task Success Rate, Efficiency).
/ux-metrics-calculatorКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКалькулятор пропорций золотого сечения
Расчёт пропорций по золотому сечению (φ = 1.618). Визуализация золотого прямоугольника и спирали Фибоначчи.
/zolotoe-sechenieКалькулятор соотношения сторон
Расчёт и пересчёт соотношения сторон изображения/видео. Определение ratio, пересчёт размеров, кроп.
/sootnoshenie-storonКалькулятор размера баннера
Размеры баннеров для VK, Telegram, YouTube, Яндекс Директ, Google Ads. Все форматы с рекомендациями по файлу.
/razmer-bannera