Конвертер цветовых
пространств
Цветовые пространства: чем они отличаются
Каждая цветовая модель описывает цвет по-своему. Одни удобны для экранов, другие для печати, третьи для интуитивного подбора оттенков. Понимание различий помогает выбирать правильный формат для конкретной задачи.
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 или кода.
Исследуйте гармонии
Прокрутите вниз к цветовым гармониям. Нажмите на любой цвет из предложенных сочетаний, чтобы переключиться на него.
Часто задаваемые вопросы
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.
Похожие инструменты
Калькулятор настольного тенниса: рейтинг, вращение, инвентарь
Калькулятор для настольного тенниса. Рейтинг Эло, скорость и вращение мяча, подбор ракетки и накладок, правила и размеры стола.
Калькулятор ПВХ-окон
Расчёт стоимости пластиковых окон по размерам. REHAU, KBE, VEKA, Salamander.
Калькулятор грузоперевозки (вес/объем/стоимость)
Расчет стоимости доставки груза. Учитывает расстояние, вес, объем и дополнительные услуги (страховка, погрузка).
Калькулятор шифрования и криптографии
Расчёты криптографии: стойкость пароля, AES, RSA/ECC, хеширование, ключи, квантовая угроза
Калькулятор теории графов
Построение графов, алгоритмы Дейкстры, BFS, DFS, минимальное остовное дерево (Краскал, Прим). Свойства графов.
Калькулятор расхода AdBlue
Расчёт расхода AdBlue (мочевины SCR) для дизельных автомобилей. Нормы 3-7%, стоимость, интервал заправки.
Калькулятор тарифов мобильной связи (сравнение МТС, Билайн, МегаФон, Tele2)
Сравните тарифы мобильных операторов МТС, Билайн, МегаФон, Tele2. Подберите оптимальный тариф по минутам, интернету и SMS. Расчёт стоимости связи в месяц и за год.
Калькулятор гидрологии
Расчёт стока, формула Маннинга, закон Дарси, метод кривых CN, водный баланс, эвапотранспирация, паводок.
Калькулятор анализа сигналов и алгоритмов
Продвинутый калькулятор: спектральный анализ (FFT), решение задачи о рюкзаке и симуляция генетических алгоритмов.
Генератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
Калькулятор пособия по безработице
Расчёт пособия по безработице: по среднему заработку, минимум и максимум 2025.
Калькулятор компьютерного зрения: CNN, детекция, аугментация
Комплексный калькулятор компьютерного зрения. Архитектура CNN (выходной размер, параметры, рецептивное поле), метрики детекции (mAP, IoU, NMS), предобработка изображений, аугментация данных, сравнение моделей (ResNet, YOLO, ViT) и видеообработка.
Калькулятор сейсмических нагрузок: СП 14.13330, ОСР-2015
Расчёт сейсмических нагрузок по СП 14.13330: линейно-спектральный метод, динамичность, распределение по этажам.
Калькулятор хранения вещей: объём, размер ячейки, стоимость
Калькулятор self-storage. Расчёт объёма вещей, подбор размера ячейки, стоимость аренды, сравнение вариантов хранения.
Калькулятор компота
Расчёт фруктов, сахара и воды для домашнего компота. 10 видов фруктов и ягод, банки 1–3 литра, стерилизация.