Преобразователь формата цвета переводит любой цвет между HEX, RGB, HSL, HSV и OKLCH. Выберите цвет встроенной палитрой, введите значение hex, вставьте любую строку цвета CSS или отрегулируйте слайдеры RGB — каждый формат обновляется в реальном времени и каждый имеет собственную кнопку копирования.
Современный CSS дает вам дюжину способов написать один и тот же цвет: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), плюс варианты альфа каждого. Вам часто нужно преобразовывать между ними — Figma дизайн передает вам OKLCH, ваша кодовая база использует HEX, а ваши переменные темы предпочитают HSL для подстройки наведения. Преобразователь формата цвета выполняет все преобразования в одной панели. Выберите цвет из встроенной палитры, вставьте существующий цвет в любом синтаксисе или перетащите слайдеры RGB, чтобы подобрать один. Каждый распространенный формат отображается одновременно: HEX (с альфа), rgb()/rgba(), hsl()/hsla(), hsv() и oklch() — плюс фрагмент переменной CSS и вычисленное значение светимости для быстрого расчета контрастности. Альфа-канал поддерживается по всему диапазону. Каждый формат имеет собственную кнопку копирования для одноклика использования, и синтаксический анализатор принимает встроенные имена цветов и все, что поддерживает CSS.
Показывает HEX, RGB/RGBA, HSL/HSLA, HSV и OKLCH одновременно — выберите любой формат, который ожидает ваш целевой код, без повторного преобразования каждый раз.
Принимает HEX (#abc или #aabbcc или #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() и встроенные имена цветов. Вставьте все, что поддерживает CSS.
Обрабатывает новый формат OKLCH, используемый в современном CSS — цветовое пространство, воспринимаемое человеком, которое становится новым стандартом системы проектирования.
Каждый выход имеет собственную кнопку копирования. Щелкните, чтобы получить ровно формат, который вам нужен для вашего кода, без необходимости в ручном выборе.
Отрегулируйте слайдеры красного/зеленого/синего/альфа для точной настройки. Каждый формат обновляется в реальном времени при перетаскивании.
Прозрачность обрабатывается во всех форматах: #RRGGBBAA, rgba(...), hsla(...). Установите один раз, преобразованные везде.
Figma передает вам OKLCH или HSL — вставьте его, скопируйте эквивалент HEX для вашей конфигурации Tailwind или переменных CSS без выхода из браузера.
Перетащите слайдеры, чтобы исследовать оттенки, отметив значения OKLCH для систематической палитры системы проектирования.
Преобразуйте цвет бренда в его форму HSL, чтобы вы могли использовать hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) для состояний наведения.
Поле светимости дает вам необработанное значение, используемое в расчетах контрастности WCAG — полезно для математики a11y.
Вставьте oklch(...) из файла CSS, который вы читаете, и мгновенно посмотрите, какой цвет он на самом деле производит.
Щелкните значок форматов цветов в панели DevSuite Pro. Откроется панель с палитрой цветов, вводом hex и слайдерами RGB.
Используйте палитру цветов, введите hex или вставьте любую строку цвета CSS (rgb(...), oklch(...) и т. д.). Цвет предпросматривается мгновенно.
Каждый формат отображается ниже: HEX, RGB, HSL, HSV, OKLCH, переменная CSS и светимость. Все остаются в синхронизации при регулировании.
Перетащите слайдеры R/G/B/A для точной настройки. Отлично подходит для диализации конкретного оттенка, который соответствует спецификации проекта.
Щелкните копирование в строке формата, который хотите — значение попадает в буфер обмена в правильном синтаксисе.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
