Генератор цветов HTML
Подбор цвета, конвертация HEX/RGB/HSL/CMYK, гармонии, градиенты и проверка контраста WCAG
Генератор HTML-цветов
Инструмент работает с цветом в восьми форматах сразу: HEX (#FF5733), HEX8 с альфа-каналом, RGB и RGBA, HSL и HSLA, HSV и CMYK. Введите цвет в любом формате — остальные пересчитаются автоматически. Каждое значение копируется в буфер обмена одним кликом и готово к вставке в CSS.
Помимо конвертации генератор строит цветовые гармонии (комплементарные, аналоговые, триадные и другие), шкалу оттенков и тонов, CSS-градиенты с готовым кодом и проверяет контраст пары «текст/фон» по стандарту WCAG (уровни AA и AAA). Можно собрать палитру из пяти цветов с фиксацией нужных и сохранить понравившиеся оттенки на время сессии. Подходит дизайнерам, веб-разработчикам и всем, кто работает с цветом в вёрстке.
Форматы цветов
HEX — самый популярный в HTML/CSS, записывается как #RRGGBB; HEX8 добавляет байт прозрачности (#RRGGBBAA). RGB — красный, зелёный и синий от 0 до 255; RGBA добавляет альфа-канал. HSL (тон, насыщенность, светлота) удобен для вариаций цвета, HSLA — с прозрачностью.
HSV (тон, насыщенность, яркость) часто используется в графических редакторах, а CMYK (голубой, пурпурный, жёлтый, чёрный) — в полиграфии. Все восемь форматов взаимно конвертируются: выбирайте HEX для кода, RGB для экранной графики, CMYK для печати, HSL/HSV — для подбора оттенков.
Цветовые палитры
Генератор может создавать гармоничные палитры: монохромные (разные оттенки одного цвета), комплементарные (противоположные на круге), аналоговые (соседние), триадные (треугольник), сплит-комплементарные.
Использование теории цвета — ключ к профессиональным дизайнам. Случайные цвета обычно плохо сочетаются, а палитры, построенные на теории, — почти всегда.
Подбор палитры для сайта
Веб-дизайнер работает над сайтом магазина и нуждается в свежей цветовой палитре.
Генерирует 5 случайных цветов, но они не сочетаются. Переключает на "комплементарную палитру" с базой #2D5BFF.
Получает гармоничный набор: #2D5BFF (синий) + #FF8A2D (оранжевый) + светлые и тёмные вариации. Этой палитры хватает на весь сайт: кнопки, фоны, акценты.
Знаете ли вы?
HTML поддерживает 147 именованных цветов (red, blue, mediumorchid...).
В RGB 16,7 миллиона возможных цветов.
Человек различает около 10 миллионов оттенков.
Теория цвета — часть классической образовательной программы дизайнеров.
Современные браузеры также поддерживают форматы OKLCH и LAB для более точной работы с цветом.
Использование случайных несогласованных цветов — признак любительского дизайна.
Форматы цвета в CSS
| Формат | Пример | Применение |
|---|---|---|
| HEX | #FF5733 | Самый частый |
| RGB | rgb(255,87,51) | Photoshop |
| RGBA | rgba(255,87,51,0.5) | С прозрачностью |
| HSL | hsl(9,100%,60%) | Вариации цвета |
| Name | tomato | Простой код |
Важно знать
Для профессионального дизайна никогда не берите цвет "на глаз". Используйте готовые палитры (Coolors, Adobe Color, UIGradients) или теорию цвета (комплементарные, аналоговые). Случайные цвета обычно плохо сочетаются.
Как пользоваться генератором цветов HTML
Выберите цвет
Нажмите на цветную область для открытия палитры выбора цвета. Вы также можете ввести значение в формате HEX (например, #FF5733), RGB (каналы красного, зелёного и синего от 0 до 255) или HSL (тон, насыщенность, светлота). При изменении любого поля остальные обновятся автоматически.
Скопируйте код цвета
Под основной областью выбора расположены карточки со всеми форматами: HEX, HEX8, RGB, RGBA, HSL, HSLA, HSV, CMYK. Нажмите на любую карточку для копирования значения в буфер обмена. Готовый CSS-код можно вставить прямо в стили вашего проекта.
Исследуйте гармонии и градиенты
Переключайтесь между вкладками для работы с цветовыми гармониями, градиентами, проверкой контрастности и генератором палитр. На вкладке "Гармонии" показаны комплементарные, аналоговые, триадные и другие сочетания выбранного цвета. Нажмите на любой цвет в гармонии, чтобы сделать его основным.
Проверьте контрастность и сохраните палитру
На вкладке "Контраст" проверьте читаемость текста по стандартам WCAG. На вкладке "Палитра" генерируйте случайные цветовые палитры, фиксируя понравившиеся цвета. Не забудьте сохранить любимые цвета кнопкой "Сохранить" — они будут доступны в течение сессии.
Примеры использования генератора цветов
🎨 Разработка дизайн-системы
Дизайнер создаёт палитру для нового продукта: выбирает основной фирменный цвет, использует вкладку гармоний для подбора акцентных цветов, генерирует оттенки для разных состояний элементов (hover, active, disabled), проверяет контрастность каждой пары цвет-фон по WCAG для соответствия требованиям доступности. Все коды экспортируются в CSS-переменные.
💻 Вёрстка лендинга
Фронтенд-разработчик получает макет от дизайнера с цветами в HEX и хочет использовать HSL для более удобной работы с оттенками в CSS. Вводит HEX-код, мгновенно получает HSL, создаёт CSS-градиенты для фоновых секций через вкладку градиентов, копирует готовый CSS-код для линейных и радиальных градиентов.
📱 Адаптация под тёмную тему
Разработчик переводит приложение на тёмную тему. Используя монохроматические оттенки и шкалу тонов, подбирает варианты фоновых цветов. Проверяет контрастность белого и серого текста на тёмных фонах через встроенный WCAG-чекер. Сохраняет все подобранные цвета в палитру для дальнейшего использования.
🖨️ Подготовка макета к печати
Дизайнер переводит цвета из веб-формата (RGB/HEX) в CMYK для полиграфии. Инструмент мгновенно показывает значения CMYK для выбранного цвета, что помогает оценить, как цвет будет выглядеть при печати, и скорректировать палитру при необходимости.
Часто задаваемые вопросы
Какие форматы цвета поддерживаются?
Можно ли создавать цветовые гармонии и палитры?
Как скопировать цвет?
Поддерживается ли прозрачность?
Можно ли проверить контраст текста и фона?
Цвета обрабатываются на сервере?
Полезная информация
Все вычисления выполняются локально в браузере, что обеспечивает высокую скорость работы и полную конфиденциальность ваших данных. Инструмент не требует установки дополнительного программного обеспечения и работает на всех современных браузерах: Chrome, Firefox, Safari, Edge и Opera.
Если вы нашли ошибку или у вас есть предложения по улучшению генератора цветов, пожалуйста, свяжитесь с нами через форму обратной связи. Мы ценим каждый отзыв и стараемся сделать инструмент максимально полезным для всех пользователей.
Смежные инструменты
Узкие инструменты под отдельные задачи: конвертация, градиенты, контраст и палитры.