🎨

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

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

#3B82F6

HEX

RGB

HSL

Alpha100%

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

Аналоговые

Триадные

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

Тетрадные

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

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

Генератор цветов HTML и CSS онлайн — бесплатный инструмент подбора цвета

Профессиональный онлайн-генератор цветов HTML для веб-разработчиков, дизайнеров и всех, кому нужно подобрать цвет для сайта, приложения или любого дизайн-проекта. Инструмент позволяет создавать, конвертировать и анализировать цвета в любых форматах: HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK. Вы получаете мгновенную конвертацию между всеми популярными цветовыми моделями, визуальный выбор цвета через палитру, ручной ввод значений в любом формате и копирование готовых CSS-кодов в один клик. Генератор цветов HTML полностью работает в браузере, не требует установки и регистрации, все данные обрабатываются локально на вашем устройстве.

Помимо базового подбора цвета, инструмент включает генератор цветовых гармоний (комплементарные, аналоговые, триадные, тетрадные, монохроматические палитры), конструктор CSS-градиентов с настройкой направления и типа (линейный, радиальный), проверку контрастности по стандарту WCAG 2.1 для accessibility и генератор случайных цветовых палитр с возможностью фиксации отдельных цветов. Этот HTML color picker заменяет сразу несколько инструментов: подборщик цвета, конвертер цветов, генератор палитр и проверку контраста. Все результаты можно копировать в буфер обмена для быстрого использования в коде и дизайн-проектах.

Онлайн-подборщик цветов особенно полезен для тех, кто работает с CSS, HTML и веб-дизайном. Вы можете подобрать цвет для фона страницы, текста, кнопок, ссылок, рамок и других элементов сайта. Конвертер цветов автоматически рассчитывает эквиваленты в HEX, RGB, HSL, HSV и CMYK — достаточно ввести значение в любом из форматов, и остальные обновятся мгновенно. Для создания гармоничного дизайна используйте встроенный генератор цветовых гармоний, который автоматически вычисляет комплементарные, аналоговые и другие комбинации по теории цвета. А для проверки доступности (accessibility) веб-интерфейсов воспользуйтесь проверкой контрастности WCAG — инструмент покажет, соответствует ли выбранная комбинация цветов требованиям AA и AAA.

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

Генератор цветов HTML предназначен для широкого круга пользователей. Веб-разработчикам и фронтенд-специалистам он помогает быстро подобрать и сконвертировать цвета для CSS-стилей. UI/UX-дизайнерам — создать гармоничные цветовые палитры и проверить доступность интерфейса. Контент-менеджерам и SMM-специалистам инструмент позволяет подобрать цвета для публикаций и баннеров. Начинающие разработчики могут использовать его для изучения цветовых моделей и теории цвета. Инструмент также полезен для полиграфии при конвертации в CMYK, для email-маркетинга при подборе цветов писем и для любых задач, связанных с работой с цветом в цифровой среде.

Визуальный подбор цвета через встроенную палитру или ввод значений в HEX, RGB, HSL
Мгновенная конвертация цвета между форматами HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK
Генерация цветовых гармоний: комплементарные, аналоговые, триадные, тетрадные, монохроматические
Создание CSS-градиентов (линейных и радиальных) с настройкой угла и цветов
Проверка контрастности текста и фона по стандартам WCAG 2.1 (уровни AA и AAA)
Генератор случайных палитр с возможностью фиксации отдельных цветов
Коллекция популярных именованных CSS-цветов для быстрого выбора
Сохранение выбранных цветов в персональную палитру
Копирование любого цветового кода в буфер обмена в один клик
Настройка прозрачности (alpha-канал) для генерации RGBA и HSLA значений

Справочник цветовых моделей

Модель	Формат	Применение
HEX	#RRGGBB	HTML, CSS, дизайн-макеты — самый распространённый формат для веба
RGB	rgb(R, G, B)	CSS, программирование, цифровые экраны — аддитивная модель смешения света
HSL	hsl(H, S%, L%)	CSS, дизайн — интуитивная модель: тон, насыщенность, светлота
HSV/HSB	hsv(H, S%, V%)	Графические редакторы (Photoshop, Figma) — тон, насыщенность, яркость
CMYK	cmyk(C%, M%, Y%, K%)	Полиграфия и печать — субтрактивная модель для типографий
RGBA	rgba(R, G, B, A)	CSS — RGB с прозрачностью для наложения и полупрозрачных элементов

Как пользоваться генератором цветов 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.

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