Цветовые инструменты ToolDeck позволяют конвертировать цвета между форматами, проверять коэффициенты контрастности для доступности, генерировать палитры, создавать CSS-градиенты и искать названия цветов или классы Tailwind прямо в браузере. Color Converter поддерживает HEX, RGB, HSL и HSV в обоих направлениях. Contrast Checker проверяет соответствие WCAG 2.1 AA и AAA. Palette Generator создаёт комплементарные, аналогичные, триадные и тетрадные схемы из любого базового цвета. CSS Gradient Generator выводит готовый к вставке код линейных и радиальных градиентов. Color Name Finder сопоставляет любое значение с ближайшим CSS-именем цвета, а Tailwind Color Finder находит ближайший класс утилиты Tailwind для произвольного цвета. Все инструменты работают на стороне клиента — данные не отправляются ни на какой сервер.
Что такое цветовые инструменты?
Цветовые инструменты — это утилиты, которые помогают разработчикам и дизайнерам работать с цифровыми значениями цветов. Каждый цвет на экране хранится в виде чисел: три канала для RGB (красный, зелёный, синий), шестнадцатеричный триплет для сокращённой записи CSS или угловой тон плюс насыщенность и светлота для HSL. Преобразование между этими представлениями вручную — медленный и ненадёжный процесс, особенно когда нужно учитывать прозрачность или более новые модели, такие как OKLCH.
Помимо конвертации форматов, работа с цветом включает тестирование доступности, создание палитр и генерацию градиентов. WCAG 2.1 определяет минимальные коэффициенты контрастности (4.5:1 для обычного текста на уровне AA, 7:1 для AAA), которые сложно проверить на глаз. Создание гармоничных цветовых схем требует точных угловых расчётов на цветовом круге HSL. CSS-градиенты требуют правильного синтаксиса для направления, цветовых точек и запасных значений. Делать всё это вручную в дизайн-системе с десятками токенов быстро становится утомительным.
Цветовые инструменты автоматизируют эти задачи. Они принимают цвет в одном формате, выполняют вычисления и возвращают нужный результат — будь то конвертированное значение, вердикт о доступности, набор гармоничных образцов или фрагмент CSS-кода. Когда инструмент работает в браузере, вы также избегаете загрузки чувствительных токенов дизайна в сторонние сервисы.
Зачем использовать цветовые инструменты на ToolDeck?
Цветовые инструменты ToolDeck работают полностью в вашем браузере. Никакие значения цветов не покидают ваш компьютер, учётная запись не требуется, и каждый инструмент загружается мгновенно без установки расширений или настольного программного обеспечения.
🎨Конвертируйте форматы за один шаг
Вставьте HEX-код и получите значения RGB, HSL и HSV одновременно. Не нужно цеплять несколько конвертеров или помнить формулы преобразования.
🔒Храните токены дизайна в тайне
Вся обработка происходит на стороне клиента. Ваши фирменные цвета, ещё не опубликованные решения по палитре и значения внутренней дизайн-системы остаются на вашем устройстве.
♿Тестируйте доступность мгновенно
Проверяйте любую пару «передний план/фон» по порогам WCAG 2.1 AA и AAA для обычного и крупного текста. Получайте точный коэффициент контрастности, а не просто ярлык «прошёл/не прошёл».
⚡Копируйте готовый к использованию результат
Каждый инструмент выводит значения, которые можно вставить напрямую в CSS, конфигурацию Tailwind или поля ввода инструментов дизайна. Никакого переформатирования не нужно.
Сценарии использования цветовых инструментов
Вот шесть распространённых ситуаций, где цветовые инструменты ToolDeck экономят время.
Поддержка дизайн-системы
При обновлении дизайн-системы вы часто получаете цвета в HEX от дизайнера, но нуждаетесь в HSL для CSS-кастомных свойств.
Color Converter переводит между форматами, чтобы вы могли заполнять файлы токенов без ручных вычислений.
Аудит доступности
В ходе аудита соответствия WCAG каждая комбинация «текст/фон» должна соответствовать минимальным коэффициентам контрастности.
Color Contrast Checker показывает точный коэффициент и статус прохождения AA/AAA для обычного и крупного текста.
Исследование фирменной палитры
Начиная с одного фирменного цвета, вам нужны акцентные и нейтральные варианты.
Color Palette Generator вычисляет комплементарные, аналогичные, триадные и тетрадные гармонии, чтобы вы могли оценить варианты до утверждения палитры.
Стилизация фона CSS
Создание секции-баннера или фона карточки с градиентом требует правильного CSS-синтаксиса для углов, цветовых точек и вендорных префиксов.
CSS Gradient Generator позволяет строить градиент визуально и копировать код.
Миграция на Tailwind
При миграции проекта на Tailwind CSS нужно сопоставить существующие значения HEX или RGB с ближайшим классом утилиты Tailwind.
Tailwind Color Finder находит ближайшее совпадение и показывает расхождение, чтобы вы могли решить, приемлема ли аппроксимация.
Ревью кода и документация
При ревью кода сырое HEX-значение вроде #708090 ни о чём не говорит с первого взгляда.
Color Name Finder определяет его как SlateGray, делая ревью и документацию более понятными.
Справочник по цветовым моделям CSS
CSS поддерживает несколько цветовых моделей. Таблица ниже суммирует шесть наиболее распространённых форматов, их синтаксис и типичные сценарии использования. Все они поддерживаются Color Converter на ToolDeck.
| Модель | CSS-синтаксис | Каналы | Диапазон значений | Типичное применение |
|---|
| HEX | #rrggbb | Red, Green, Blue | 00–ff на канал | Наиболее распространён в CSS, при передаче макетов, в гайдлайнах бренда |
| RGB | rgb(r, g, b) | Red, Green, Blue | 0–255 на канал | JavaScript canvas API, вычисляемые стили, обработка изображений |
| HSL | hsl(h, s%, l%) | Hue, Saturation, Lightness | 0–360 / 0–100% / 0–100% | Токены дизайна, генерация тем, программные варианты оттенков |
| HSV | N/A (не в CSS) | Hue, Saturation, Value | 0–360 / 0–100% / 0–100% | Палитры цветовых пикеров (Photoshop, Figma), аппаратная калибровка цвета |
| OKLCH | oklch(L C H) | Lightness, Chroma, Hue | 0–1 / 0–0.4 / 0–360 | Перцептуально равномерные палитры (спецификация CSS Color Level 4) |
| Named | например, slategray | Отображается в RGB внутри | 148 предопределённых имён | Прототипирование, читаемый код, быстрые демонстрации |
CSS Color Level 4 (W3C) также определяет функции lab(), lch() и color(). HEX и RGB остаются наиболее широко поддерживаемыми форматами в браузерах и инструментах дизайна.
Как выбрать правильный цветовой инструмент
Каждый цветовой инструмент решает свою задачу. Используйте руководство ниже, чтобы найти подходящий для вашей цели.
- 1
Если вам нужно конвертировать цвет между форматами HEX, RGB, HSL или HSV → Color Converter - 2
Если вам нужно проверить, соответствует ли пара цветов текст/фон стандартам доступности WCAG → Color Contrast Checker - 3
Если вам нужно создать набор гармоничных цветов из одного базового цвета → Color Palette Generator - 4
Если вам нужно построить линейный или радиальный CSS-градиент и получить код → CSS Gradient Generator - 5
Если вам нужно найти ближайшее CSS-имя цвета, понятное человеку, для заданного значения → Color Name Finder - 6
Если вам нужно сопоставить произвольный цвет с ближайшим классом утилиты Tailwind CSS → Tailwind Color Finder
Все шесть инструментов принимают ввод в нескольких форматах. Если вы не уверены, в каком формате задан цвет, начните с Color Converter — он автоматически распознаёт нотации HEX, RGB, HSL и HSV.
Часто задаваемые вопросы
В чём разница между форматами цветов HEX и RGB?
HEX и RGB представляют одно и то же цветовое пространство. HEX-код вида #ff6600 — это шестнадцатеричная кодировка трёх каналов RGB: ff = 255 (красный), 66 = 102 (зелёный), 00 = 0 (синий). Разница только в нотации. HEX компактнее в таблицах стилей CSS, тогда как RGB проще обрабатывать программно, поскольку каждый канал уже является десятичным целым числом.
Когда использовать HSL вместо HEX или RGB?
HSL отделяет тон (сам цвет) от насыщенности и светлоты. Это упрощает создание вариантов оттенков: зафиксируйте тон, уменьшите светлоту для более тёмного оттенка, увеличьте для более светлого. Дизайн-системы, генерирующие светлые и тёмные темы из одного базового цвета, часто хранят токены в HSL именно по этой причине. CSS-кастомные свойства также хорошо сочетаются с HSL, поскольку позволяют переопределять отдельные каналы.
Какой коэффициент контрастности требует WCAG 2.1 для текста?
WCAG 2.1 уровень AA требует минимального коэффициента контрастности 4.5:1 для обычного текста (ниже 18pt или 14pt жирный) и 3:1 для крупного текста (18pt+ или 14pt+ жирный). Уровень AAA повышает эти пороги до 7:1 и 4.5:1 соответственно. Коэффициенты рассчитываются исходя из относительной яркости цветов переднего плана и фона по формуле, определённой в критерии успеха WCAG 2.1 1.4.3.
Сколько именованных цветов поддерживает CSS?
CSS определяет 148 именованных цветов, унаследованных из спецификаций SVG 1.1 и CSS3 Color. Они варьируются от распространённых имён вроде red, blue и white до специфичных — MediumSlateBlue, PapayaWhip и LavenderBlush. Именованные цвета соответствуют фиксированным значениям RGB. Спецификация CSS Color Level 4 сохраняет те же 148 имён и не добавляет новых. Браузеры также распознают ключевое слово transparent (эквивалент rgba(0,0,0,0)).
Можно ли использовать цвета OKLCH в CSS сегодня?
Да. Функция oklch() поддерживается в Chrome 111+, Firefox 113+ и Safari 15.4+. OKLCH входит в спецификацию CSS Color Level 4, опубликованную W3C. Его главное преимущество перед HSL — перцептуальная равномерность: два цвета с одинаковым значением светлоты в OKLCH действительно выглядят одинаково яркими для человеческого глаза, чего нельзя сказать о HSL. Это делает OKLCH лучшим выбором для создания доступных палитр с единообразной воспринимаемой яркостью.
В чём разница между HSL и HSV?
HSL и HSV используют цилиндрическое представление с тоном в качестве угла, но по-разному определяют яркость. В HSL светлота 50% — это чистый цвет; 0% — чёрный, 100% — белый. В HSV значение 100% — это чистый цвет; 0% — чёрный. В HSV нет встроенного способа достичь белого без уменьшения насыщенности. Дизайнеры и цветовые пикеры (Photoshop, Figma) обычно используют HSV, тогда как CSS нативно использует HSL.
Как найти класс Tailwind для произвольного HEX-цвета?
Tailwind CSS поставляется с фиксированной палитрой примерно из 220 цветовых классов (22 оттенка по 10 градаций каждый, плюс black, white и transparent). Для нахождения ближайшего класса к заданному HEX-значению вычисляется Евклидово расстояние в перцептуальном цветовом пространстве (например, CIELAB или OKLCH) между вашим цветом и каждым образцом Tailwind. Tailwind Color Finder на ToolDeck делает это автоматически и показывает ближайшее совпадение вместе с разницей цветов, чтобы вы могли оценить, приемлема ли аппроксимация.
Безопасно ли вставлять конфиденциальные фирменные цвета в онлайн-инструмент?
Зависит от инструмента. Любой инструмент, отправляющий ваш ввод на сервер, раскрывает эти значения в сетевом трафике и серверных журналах. Цветовые инструменты ToolDeck работают полностью в вашем браузере с использованием JavaScript на стороне клиента. Никакие HTTP-запросы не передают данные о цветах на какой-либо бэкенд. Вы можете убедиться в этом, открыв вкладку «Сеть» в браузере во время использования инструмента. Для максимальной осторожности инструменты также можно использовать в офлайн-режиме после первоначальной загрузки страницы.