Переведите цвет HEX или RGB в значения HEX, RGB и HSL. Согласуйте цвета в макете и CSS без ручного пересчёта.
Как пользоваться
Введите HEX из трёх или шести цифр либо rgb() с целыми значениями каналов. Скопируйте нужное представление.
Пример
#ff0000 даёт rgb(255, 0, 0) и hsl(0, 100%, 50%). Короткая запись #f00 обозначает тот же цвет.
Вопросы и ответы
Можно ли задать прозрачность или название цвета?
Нет. Альфа канал, имена цветов и ввод HSL не поддерживаются. Вывод HSL округляется до целых значений.
Связанные инструменты
Практическая задача
Проверьте основной цвет перед тонкими оттенками. #00ff00 соответствует rgb(0, 255, 0) и hsl(120, 100%, 50%). Это ориентир для разных записей цвета в CSS и макете.
Дополнительный вопрос
Округление HSL влияет на обратный перевод?
Да. Округлённые значения теряют часть точности. Для точного совпадения каналов храните исходный HEX или RGB.
Детали для проверки результата
| Деталь | Пояснение |
|---|---|
| Каналы RGB | RGB описывает красный, зелёный и синий каналы света. В целочисленной форме каждый принимает значение от 0 до 255. Шесть цифр HEX записывают те же каналы по две цифры на канал. |
| Значения HSL | HSL разделяет оттенок, насыщенность и светлоту. Это удобно для вариантов одного цвета, но процент светлоты не равен воспринимаемому контрасту и не подтверждает доступность. |
| Контраст цветов | Для читаемого текста нужен достаточный контраст переднего плана и фона. Красивые цвета не гарантируют доступность. Проверяйте размер, насыщенность шрифта и реальный фон вместе. |
| Округление компонентов цвета | Округление оттенка, насыщенности и светлоты убирает точность. Для точного фирменного цвета храните исходные каналы RGB или HEX. Похожий вид не доказывает числовое равенство. |
| Поддерживаемая запись цвета | Конвертер понимает только реализованные форматы. Допустимый цвет CSS может использовать другой синтаксис. Проверьте прозрачность, имена цветов и новые формы CSS до вывода о неверном цвете. |
| Контекст отображения | Цвет виден рядом с другими цветами и при настройках экрана, влияющих на восприятие. Проверяйте значение в реальном интерфейсе с соседями и текстом, а не только отдельный квадрат. |
| Подписи кроме цвета | Одного цвета недостаточно для важных категорий. Добавляйте подписи, формы и узоры для графиков и статусов. Корректная палитра не гарантирует различимость всех пунктов для каждого зрителя. |
| Прозрачность и фон | Полупрозрачный цвет смешивается с фоном. Одно значение выглядит по разному на белом, чёрном и изображении. Оценивайте конечное сочетание, а не отдельный передний цвет. |
| Каскад CSS | Один селектор может повторяться намеренно. Результат зависит от порядка, специфичности, медиазапросов и наследования. Короткая и аккуратная таблица стилей всё равно требует проверки на странице. |