Обзор
Генератор CSS-цветов — это визуальный инструмент для генерации CSS-кода цвета. Взаимодействуйте с color picker и ползунком альфа-канала, чтобы мгновенно получить HEX, 8-значный HEX (с альфа-каналом), RGB, RGBA и код CSS custom-property, что позволяет фронтенд-разработчикам и дизайнерам быстро собирать и копировать соответствующие CSS цвета.
Как пользоваться инструментом
Шаг 1 — выберите цвет через нативный color picker (кликните на палитру) или введите HEX-значение в поле. Шаг 2 — перетаскивайте ползунок Alpha для изменения прозрачности (0 — полностью прозрачно, 1 — полностью непрозрачно); превью цвета отображается на шахматном фоне, чтобы вы могли видеть эффект прозрачности. Шаг 3 — кликните по одной из предустановленных палитр, чтобы подставить распространённый цвет темы. Шаг 4 — в панели «CSS код» у каждого формата есть кнопка «Копировать»; результат готов к вставке в CSS-файл или стили компонента.
Типичные сценарии
Фронтенд-разработчики, отлаживающие стили компонентов, быстро создают цвета с альфа-каналом (например,
rgba(0, 229, 255, 0.5)); команды дизайн-систем стандартизируют палитру и генерируют код CSS-переменных; настройка оттенка оверлея, маски или состояния hover; конвертация цветов из дизайн-спецификации в полноценный CSS-код; итерации над цветовыми решениями при построении переключения тем.Технические детали
8-значный HEX использует форму
#RRGGBBAA, где AA — шестнадцатеричное представление альфа-канала (0.5 → 7f), и поддерживается CSS Color Module Level 4. Альфа-канал RGBA использует десятичное значение от 0 до 1. Фрагмент CSS-переменной использует плейсхолдер --color — переименуйте по необходимости. HEX поддерживает автоматическое расширение 3-значной формы в 6-значную. Предустановленные палитры — это яркая коллекция цветов, часто используемых в дизайне.Конфиденциальность и безопасность
Вся генерация цветов выполняется локально в вашем браузере и сетевые запросы не выполняются.