Color Format Converter перетворює будь-який колір між 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 для налаштувань наведення. Color Format Converter виконує всі конвертації в одній панелі. Оберіть колір вбудованим колірним пікером, вставте наявний колір у будь-якому синтаксисі або перетягніть повзунки 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 — перцептивно рівномірний колірний простір, який стає новим стандартом для дизайн-систем.
Кожен вивід має власну кнопку копіювання. Натисніть, щоб отримати саме той формат, який потрібен для вашого коду — без ручного виділення.
Налаштуйте повзунки Red/Green/Blue/Alpha для тонкого підбору. Усі формати оновлюються в реальному часі під час перетягування.
Прозорість обробляється в кожному форматі: #RRGGBBAA, rgba(...), hsla(...). Встановіть один раз — конвертується всюди.
Figma дає вам OKLCH чи HSL — вставте його, скопіюйте еквівалент HEX для вашого Tailwind-конфігу чи CSS-змінних, не покидаючи браузер.
Перетягуйте повзунки, щоб досліджувати відтінки, фіксуючи значення OKLCH для системної палітри дизайн-системи.
Конвертуйте брендовий колір у форму HSL, щоб використовувати hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) для станів наведення.
Поле яскравості дає вам необроблене значення, яке використовується в розрахунках контрастності WCAG — корисно для математики доступності.
Вставте oklch(...) з CSS-файлу, який ви читаєте, і миттєво побачите, який колір він насправді дає.
Натисніть іконку Color Formats у доку DevSuite Pro. Відкриється панель з колірним пікером, полем для hex і повзунками RGB.
Скористайтеся колірним пікером, введіть hex або вставте будь-який рядок кольору CSS (rgb(...), oklch(...) тощо). Колір відображається миттєво.
Нижче відобразяться всі формати: HEX, RGB, HSL, HSV, OKLCH, CSS-змінна та яскравість. Усі залишаються синхронізованими під час коригування.
Перетягуйте повзунки R/G/B/A для тонких коригувань. Чудово підходить для підбору конкретного відтінку відповідно до дизайн-специфікації.
Натисніть "Копіювати" на потрібному рядку формату — значення потрапить у буфер обміну в правильному синтаксисі.
Встановіть DevSuite Pro безкоштовно та отримайте понад 64 інструментів розробника
