Универсальный цветовой инструмент для дизайнеров и разработчиков. Выбирайте цвет визуально или вводите значения в любом формате (HEX, RGB, HSL, HSV или CMYK) и видьте конвертации во все другие форматы с готовым к использованию CSS-кодом.
color: #ff5733;background-color: rgba(255, 87, 51, 1);border-color: #ff5733;box-shadow: 0 2px 8px rgba(255, 87, 51, 0.3);Нажмите на большой цветовой образец, чтобы открыть нативный подборщик цветов, или введите значение напрямую в любое поле формата (HEX, RGB, HSL, HSV или CMYK). Изменение любого ввода обновляет все другие форматы и образец предпросмотра. Настройте ползунок альфа/прозрачности для создания прозрачных цветов (RGBA/HSLA). Раздел CSS-кода предоставляет готовые к копированию значения цветов в каждом формате. Раздел цветовых гармоний показывает комплементарные, триадные и аналогичные цвета на основе теории цвета. Инструмент также проверяет, соответствует ли ваш цвет именованному CSS-цвету (вроде 'coral' или 'steelblue').
Универсальный подборщик цветов незаменим для веб-разработчиков, нуждающихся в CSS-значениях цветов в специфичных форматах, UI/UX-дизайнеров, конвертирующих фирменные цвета между дизайнерскими инструментами (Figma использует HEX, некоторые API используют RGB, печать требует CMYK), фронтенд-разработчиков, отлаживающих значения цветов в DevTools, графических дизайнеров, подготавливающих ресурсы и для веба (RGB), и для печати (CMYK), специалистов по доступности, проверяющих и настраивающих цвета для соответствия контрасту, разработчиков email, нуждающихся во встроенных CSS-цветах, игровых разработчиков, конвертирующих между цветовыми пространствами, и инженеров визуализации данных, выбирающих гармоничные цветовые палитры для диаграмм и графиков.
Конвертация цветов между пространствами использует стандартные математические преобразования. Конвертация RGB в HSL нормализует значения RGB до 0-1, находит максимальный и минимальный каналы, вычисляет светлоту как (max+min)/2, насыщенность на основе светлоты и оттенок на основе того, какой канал доминирует. HSV (Hue-Saturation-Value, также называемый HSB) отличается от HSL тем, что Value представляет яркость цвета, а не светлоту. Конвертация CMYK из RGB представляет приближение, подходящее для экранного предпросмотра. Точный CMYK для печати требует конвертации на основе ICC-профилей цвета. Цветовые гармонии используют вращение оттенка HSL: комплементарные (+180°), триадные (+120°, +240°) и аналогичные (+30°, -30°). Именованные CSS-цвета сопоставляются со 148 стандартными ключевыми словами CSS-цветов, определёнными в спецификации CSS Color Module Level 4.
HSL (Hue, Saturation, Lightness) и HSV (Hue, Saturation, Value/Brightness) представляют цилиндрические цветовые модели, но отличаются тем, как представляют яркость. В HSL 50% светлоты даёт чистый цвет, в то время как 0% обозначает чёрный, а 100% обозначает белый. В HSV 100% значения даёт самую яркую версию цвета, а насыщенность контролирует, насколько он яркий. HSL используется в CSS; HSV распространён в дизайнерских инструментах вроде Photoshop.
Показанные значения CMYK представляют математическое приближение на основе формул RGB-в-CMYK. Для профессионального производства печати вам нужна конвертация на основе ICC-профилей цвета с использованием инструментов вроде Adobe Photoshop или Illustrator, так как реальные значения CMYK зависят от конкретного принтера, бумаги и используемых чернил.
Цветовые гармонии представляют комбинации цветов, которые визуально приятны на основе их позиций на цветовом круге. Комплементарные цвета противоположны друг другу (на расстоянии 180°), создавая высокий контраст. Триадные цвета равномерно распределены (на расстоянии 120°) для ярких сбалансированных палитр. Аналогичные цвета смежны (на расстоянии 30°) для тонких связных дизайнов.
Конвертируйте CSS-таблицы стилей в inline-стили для совместимости с HTML-email.
Генерируйте гармоничные цветовые палитры с использованием алгоритмов теории цвета.
Визуальный редактор для изучения CSS Flexbox. Настраивайте свойства контейнера и элементов, смотрите результат в реальном времени.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты