🎨

Генератор цветов HTML

Подбор цвета, конвертация HEX/RGB/HSL/CMYK, гармонии, градиенты и проверка контраста WCAG

#3B82F6

HEX

RGB

HSL

Alpha100%

Комплементарные

Аналоговые

Триадные

Разделённо-комплементарные

Тетрадные

Монохроматические

Оттенки и тона

Генератор HTML-цветов

Инструмент генерирует случайные HTML-цвета в разных форматах: HEX (#FF5733), RGB (rgb(255, 87, 51)), HSL (hsl(9, 100%, 60%)). Полезен дизайнерам, веб-разработчикам, всем, кто работает с цветом в цифровой среде.

Вы можете сгенерировать один случайный цвет или целую палитру, выбрать тёплые или холодные оттенки, задать базовый цвет для гармоничных комбинаций. Инструмент подходит для прототипирования и творчества.

Форматы цветов

HEX — самый популярный в HTML/CSS, записывается как #RRGGBB. RGB — значения красного, зелёного, синего от 0 до 255. RGBA — то же + альфа-канал (прозрачность). HSL — оттенок, насыщенность, светлота, удобен для вариаций цвета.

Все форматы взаимно конвертируются. Выбирайте тот, что удобнее для вашей задачи: HEX для кода, RGB для Photoshop, HSL для создания градиентов и вариаций.

Цветовые палитры

Генератор может создавать гармоничные палитры: монохромные (разные оттенки одного цвета), комплементарные (противоположные на круге), аналоговые (соседние), триадные (треугольник), сплит-комплементарные.

Использование теории цвета — ключ к профессиональным дизайнам. Случайные цвета обычно плохо сочетаются, а палитры, построенные на теории, — почти всегда.

💡

Подбор палитры для сайта

Веб-дизайнер работает над сайтом магазина и нуждается в свежей цветовой палитре.

Генерирует 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 для выбранного цвета, что помогает оценить, как цвет будет выглядеть при печати, и скорректировать палитру при необходимости.

Часто задаваемые вопросы

Какие форматы поддерживаются?

HEX, RGB, RGBA, HSL, HSLA, именованные цвета HTML.

Можно ли генерировать палитры?

Да, есть монохромные, комплементарные, триадные и другие схемы.

Как скопировать цвет?

Нажмите на значение — оно автоматически копируется в буфер обмена.

Поддерживается ли прозрачность?

Да, через RGBA или HSLA форматы.

Можно ли генерировать тёплые цвета?

Да, есть фильтры по температуре и насыщенности.

Полезная информация

Все вычисления выполняются локально в браузере, что обеспечивает высокую скорость работы и полную конфиденциальность ваших данных. Инструмент не требует установки дополнительного программного обеспечения и работает на всех современных браузерах: Chrome, Firefox, Safari, Edge и Opera.

Если вы нашли ошибку или у вас есть предложения по улучшению генератора цветов, пожалуйста, свяжитесь с нами через форму обратной связи. Мы ценим каждый отзыв и стараемся сделать инструмент максимально полезным для всех пользователей.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

Создайте красивый CSS-градиент для сайта с живым предпросмотром

Перейти к инструменту →