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

Это браузерный инструмент, который читает любой HEX, rgb()/rgba(), hsl()/hsla() или распространённое имя CSS-цвета и конвертирует его в HEX, RGB и HSL вместе с живым образцом.

Как конвертировать HEX в RGB и HSL с помощью этого инструмента?

Вставьте hex-код вроде #3b82f6 в поле Цвет, и конвертер CSS-цветов мгновенно покажет соответствующие значения rgb() и hsl() в строках результата.

Поддерживает ли конвертер CSS-цветов прозрачность и альфа-каналы?

Да. rgba(), hsla() и 8-значный hex с альфа-значением разбираются, и альфа сохраняется во всех выходных форматах.

Могу ли я вставить имя CSS-цвета вместо кода?

Да, стандартные имена, такие как blue, teal, gold и indigo, распознаются и конвертируются в HEX, RGB и HSL.

Принимает ли он сокращённые hex-коды?

Да, 3-значный и 4-значный сокращённый hex вроде #f00 или #f00a автоматически разворачиваются перед конвертацией.

Загружаются ли введённые мной значения цветов куда-либо?

Нет. Конвертер CSS-цветов работает полностью в вашем браузере, поэтому введённые значения обрабатываются локально и не покидают устройство.

Конвертер цветов CSS

Преобразуйте между HEX, RGB и HSL с живым образцом цвета.

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

Проверяете читаемость? Попробуйте Contrast Checker.

Об инструменте Конвертер цветов CSS

Этот конвертер CSS-цветов превращает любое цветовое значение в HEX, RGB и HSL сразу, с живым образцом-плашкой, чтобы вы видели точный оттенок по мере ввода. Вставьте hex-код, значение rgb() или hsl() или распространённое имя CSS-цвета вроде blue, teal или gold, и он мгновенно нормализует ввод во все три формата. Он обрабатывает и прозрачность, включая rgba(), hsla() и 8-значный hex с альфа-каналом. Вычисляете ли вы hex в rgb для дизайн-токена, конвертируете rgb в hex для таблицы стилей или проверяете значение hsl при настройке палитры — он держит все форматы синхронизированными. Создан для фронтенд-разработчиков, дизайнеров и QA-инженеров, которые ежедневно жонглируют цветовыми форматами. Всё работает локально в вашем браузере, поэтому введённые значения не покидают устройство.

Возможности

Конвертирует HEX, RGB и HSL сразу из одного ввода
Распознаёт распространённые имена CSS-цветов, такие как blue, teal и gold
Поддерживает прозрачность через rgba(), hsla() и 8-значный hex с альфой
Живой образец цвета обновляется мгновенно по мере ввода
Принимает сокращённые 3- и 4-значные hex-коды
Нормализует процентные и 0-255 значения каналов RGB
Показывает понятное встроенное сообщение об ошибке, когда значение не удаётся разобрать
Обрабатывается локально в вашем браузере

Как использовать Конвертер цветов CSS

Введите или вставьте цвет в поле ввода Цвет.
Используйте hex-код, rgb(), hsl() или имя CSS-цвета вроде blue.
Читайте сконвертированные значения HEX, RGB и HSL в строках результата.
Проверьте образец рядом с вводом для предпросмотра точного цвета.

Пример

Ввод

#3b82f6

Результат

HEX  #3b82f6
RGB  rgb(59, 130, 246)
HSL  hsl(217, 91%, 60%)

Одно hex-значение, сконвертированное в RGB и HSL с совпадающим живым образцом.

Частые ошибки и устранение неполадок

После ввода значения появляется «Couldn't parse that color». — Используйте валидный hex-код, rgb()/rgba(), hsl()/hsla() или поддерживаемое имя CSS-цвета; лишние символы или отсутствующие скобки ломают разбор.
Имя CSS-цвета вроде «salmon» не распознаётся. — Поддерживается только подобранный набор распространённых имён. Введите вместо него эквивалентное значение hex или rgb().
Альфа теряется после конвертации. — Включите альфа-канал во ввод, например rgba(0,0,0,0.5) или 8-значный hex вроде #00000080, и он перенесётся во все форматы.
Значения RGB выше 255 или проценты выглядят неправильно. — Каналы ограничиваются допустимым диапазоном; передавайте числа от 0 до 255 или проценты от 0% до 100%, чтобы получить ожидаемый результат.

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

Что такое конвертер CSS-цветов?: Это браузерный инструмент, который читает любой HEX, rgb()/rgba(), hsl()/hsla() или распространённое имя CSS-цвета и конвертирует его в HEX, RGB и HSL вместе с живым образцом.
Как конвертировать HEX в RGB и HSL с помощью этого инструмента?: Вставьте hex-код вроде #3b82f6 в поле Цвет, и конвертер CSS-цветов мгновенно покажет соответствующие значения rgb() и hsl() в строках результата.
Поддерживает ли конвертер CSS-цветов прозрачность и альфа-каналы?: Да. rgba(), hsla() и 8-значный hex с альфа-значением разбираются, и альфа сохраняется во всех выходных форматах.
Могу ли я вставить имя CSS-цвета вместо кода?: Да, стандартные имена, такие как blue, teal, gold и indigo, распознаются и конвертируются в HEX, RGB и HSL.
Принимает ли он сокращённые hex-коды?: Да, 3-значный и 4-значный сокращённый hex вроде #f00 или #f00a автоматически разворачиваются перед конвертацией.
Загружаются ли введённые мной значения цветов куда-либо?: Нет. Конвертер CSS-цветов работает полностью в вашем браузере, поэтому введённые значения обрабатываются локально и не покидают устройство.

Связанные инструменты

Проверка контраста — Проверяйте коэффициент контраста WCAG и соответствие AA/AAA между двумя цветами.
Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Оптимизатор SVG — Минифицирует SVG: удаляет комментарии, метаданные и остатки редактора, сжимает пробелы.
Конвертер систем счисления — Преобразуйте целые числа между двоичной, восьмеричной, десятичной и шестнадцатеричной системами.
Экранирование HTML — Экранируйте и разэкранируйте специальные символы и сущности HTML.
Форматировщик JS / TS — Форматируйте или минифицируйте JavaScript, TypeScript и JSX/TSX с настройками Prettier.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.