Что такое Генератор кодов цвета CSS?

Генератор CSS-кодов цветов преобразует любой цвет во все совместимые с CSS форматы: HEX, RGB, RGBA, HSL, HSLA, OKLCH и именованные CSS-цвета. Выберите цвет визуально или введите значение в любом формате — остальные форматы появятся мгновенно, вместе с проверкой контраста по WCAG.

Введите hex, потяните за пипетку, подвиньте ползунки RGB или вставьте уже готовую строку rgb() или hsl(). Инструмент пересчитывает остальные форматы в реальном времени, включая OKLCH для перцептивно ровных палитр, и находит ближайший именованный CSS-цвет из списка W3C на 147 значений. Альфа-канал появляется в rgba() и hsla() только когда вы опускаете прозрачность ниже 100%. Панель контраста показывает коэффициент WCAG на белом и чёрном фоне, чтобы вы сразу видели, читается ли цвет как текст.

Как использовать

1. Выберите цвет с помощью визуальной палитры или введите значение в любом поддерживаемом формате (HEX, RGB, HSL).
2. Просмотрите цвет сразу во всех CSS-форматах и скопируйте нужный одним кликом.
3. Настройте прозрачность с помощью ползунка alpha для получения значений RGBA и HSLA, затем скопируйте необходимый CSS-код.

Когда использовать

• Перевести hex от дизайнера в формат, который ожидает ваш CSS-фреймворк.
• Сформировать палитру и взять HSL, чтобы построить согласованные более светлые и более тёмные оттенки.
• Добавить прозрачность к фирменному цвету для оверлеев, теней и состояний hover.

Результат

Фронтенд-разработчик выбирает фирменный оранжевый #F97316 и мгновенно получает rgb(249, 115, 22), hsl(25, 95%, 53%) и все другие форматы для единообразного применения в таблице стилей.

Частые вопросы

Почему поле именованного цвета иногда пустое?

В CSS всего 147 именованных цветов, и ваш hex должен совпасть с одним из них точно. Почти любой фирменный цвет оказывается между двумя именованными значениями — это нормально. Поле в основном нужно для проверки стандартных оттенков вроде tomato или steelblue.

Когда выбирать HSL вместо HEX или RGB?

HSL удобнее править вручную: +10 к яркости даёт более светлый оттенок, +30 к тону смещает по цветовому кругу. Дизайнеры берут HSL, когда строят шкалы. RGB и HEX короче в финальной таблице стилей.

Ползунок прозрачности меняет сам цвет или только прозрачность?

Меняется только альфа-канал. Значения красного, зелёного и синего остаются прежними. Поэтому rgba(255, 0, 0, 0.5) поверх белого фона выглядит розовым: тот же красный, смешанный 50/50 с тем, что под ним.

Поддерживаются ли эти CSS-значения во всех браузерах?

HEX, RGB, RGBA, HSL, HSLA и именованные цвета имеют универсальную поддержку уже 15 лет, вплоть до IE11. OKLCH здесь тоже генерируется и работает во всём современном — Chrome, Firefox, Safari и Edge с 2023 года, поэтому оставьте запасной вариант в hex или rgb(), если ещё ориентируетесь на очень старые движки.

Как получить hex для цвета, который я вижу на сайте?

Нажмите «Взять с экрана», чтобы открыть пипетку, и кликните по любому пикселю на экране — странице, изображении, макете — и этот цвет тут же подставится. (Пипетка работает в Chrome, Edge и Opera; в Safari или Firefox возьмите hex встроенной в систему пипеткой и вставьте его в поле HEX.) В любом случае вы сразу получите все эквивалентные форматы и варианты с прозрачностью.

Похожие инструменты