Этот конвертер 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 в строках результата.
Проверьте образец рядом с вводом для предпросмотра точного цвета.
Одно 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 или минифицирует обычный JavaScript.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Другие инструменты: Форматировщики кода
Сравнить текст — Сравнивайте два текста построчно и видите добавления и удаления.
Конвертер MDX — Рендерит MDX как текст, преобразует HTML → MDX и экранирует текст в литеральный MDX.
Форматировщик CSS / SCSS — Форматируйте или минифицируйте CSS/SCSS/LESS, сортируйте свойства и убирайте дубликаты.
Форматировщик JS / TS — Форматирует JavaScript, TypeScript и JSX/TSX с опциями Prettier или минифицирует обычный JavaScript.
Форматировщик HTML — Форматируйте или минифицируйте HTML, форматируйте встроенный CSS/JS и просматривайте результат.
Форматировщик XML — Форматируйте, минифицируйте и проверяйте XML, преобразуйте XML ↔ JSON.
Форматировщик SQL — Форматируйте SQL для MySQL, PostgreSQL, SQL Server, SQLite, BigQuery и Oracle.
Форматировщик GraphQL — Форматируйте или минифицируйте запросы и схемы GraphQL, проверяйте синтаксис и извлекайте операции.
Форматировщик Dockerfile — Форматируйте Dockerfile и получайте рекомендации по лучшим практикам и линту.