Color Format Converter превежда произволен цвят между HEX, RGB, HSL, HSV и OKLCH. Изберете цвят с вградения цветоизбирач, въведете hex стойност, поставете произволен CSS цветови низ или коригирайте RGB плъзгачите — всеки формат се обновява на живо и всеки има собствен бутон Copy.
Съвременният CSS ви дава десетина начина да запишете същия цвят: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), плюс алфа варианти на всеки. Често се налага да преобразувате между тях — Figma дизайн ви дава OKLCH, вашият код използва HEX, а вашите theme променливи предпочитат HSL за hover корекции. Color Format Converter извършва всички преобразувания в един панел. Изберете цвят от вградения цветоизбирач, поставете съществуващ цвят в произволен синтаксис или плъзнете RGB плъзгачите, за да настроите желания. Всеки често използван формат се изчертава едновременно: HEX (с алфа), rgb()/rgba(), hsl()/hsla(), hsv() и oklch() — плюс CSS variable фрагмент и изчислената стойност за яркост за бърза математика при контраст. Алфа каналът се поддържа навсякъде. Всеки формат има собствен бутон Copy за употреба с едно кликване, а парсерът приема вградени имена на цветове и всичко, което CSS поддържа.
Показва HEX, RGB/RGBA, HSL/HSLA, HSV и OKLCH едновременно — изберете формата, който очаква целевият ви код, без да преобразувате всеки път.
Приема HEX (#abc или #aabbcc или #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() и вградени имена на цветове. Поставете каквото поддържа CSS.
Обработва новия формат OKLCH, използван в съвременния CSS — перцептивно еднородно цветово пространство, което се превръща в новия стандарт за дизайн системи.
Всеки изход има собствен бутон Copy. Кликнете, за да вземете точно формата, който ви трябва за кода, без ръчно избиране.
Коригирайте плъзгачите за 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%)) за hover състояния.
Полето за яркост ви дава суровата стойност, използвана при WCAG изчисления на контраста — полезно за a11y математика.
Поставете oklch(...) от CSS файл, който четете, и веднага вижте какъв цвят всъщност произвежда.
Кликнете иконата Color Formats в дока на DevSuite Pro. Отваря се панел с цветоизбирач, hex поле и RGB плъзгачи.
Използвайте цветоизбирача, въведете hex или поставете произволен CSS цветови низ (rgb(...), oklch(...) и т.н.). Цветът се преглежда мигновено.
Всеки формат се изчертава отдолу: HEX, RGB, HSL, HSV, OKLCH, CSS variable и яркост. Всички остават синхронизирани, докато правите корекции.
Плъзнете R/G/B/A плъзгачите за фини настройки. Отлично за постигане на конкретен нюанс, който отговаря на дизайнерска спецификация.
Кликнете Copy на реда с формата, който искате — стойността попада в клипборда ви в правилния синтаксис.
Инсталирайте DevSuite Pro безплатно и отключете 64+ инструмента за разработчици за вашия браузър.
