Color Format Converter převádí libovolnou barvu mezi formáty HEX, RGB, HSL, HSV a OKLCH. Vyberte barvu nativním výběrem barvy, zadejte hex hodnotu, vložte jakýkoliv CSS řetězec barvy nebo upravte posuvníky RGB — každý formát se aktualizuje živě a má vlastní tlačítko Copy.
Moderní CSS nabízí tucet způsobů, jak zapsat stejnou barvu: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), a k tomu alfa varianty každého z nich. Často potřebujete mezi nimi převádět — návrh z Figmy vám dá OKLCH, váš kód používá HEX a proměnné motivu preferují HSL pro úpravy hover stavů. Color Format Converter provádí všechny převody v jednom panelu. Vyberte barvu z nativního výběru barvy, vložte existující barvu v libovolné syntaxi nebo si ji vyladíte tažením posuvníků RGB. Každý běžný formát se vykreslí současně: HEX (s alfa), rgb()/rgba(), hsl()/hsla(), hsv() a oklch() — plus fragment CSS proměnné a vypočtenou hodnotu jasu pro rychlé výpočty kontrastu. Alfa kanál je podporován napříč celým procesem. Každý formát má vlastní tlačítko Copy pro použití na jedno kliknutí a parser přijímá nativní názvy barev i vše, co podporuje CSS.
Zobrazuje HEX, RGB/RGBA, HSL/HSLA, HSV a OKLCH současně — vyberte si přesně ten formát, který váš cílový kód očekává, bez opakovaného převádění.
Přijímá HEX (#abc nebo #aabbcc nebo #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() i nativní názvy barev. Vložte cokoliv, co podporuje CSS.
Zvládá nový formát OKLCH používaný v moderním CSS — percepčně jednotný barevný prostor, který se stává novým standardem v design systémech.
Každý výstup má vlastní tlačítko Copy. Kliknutím získáte přesně ten formát, který potřebujete pro svůj kód, bez ručního výběru.
Upravte posuvníky Red/Green/Blue/Alpha pro jemné doladění. Každý formát se aktualizuje v reálném čase, jak posouváte.
Průhlednost je zpracována ve všech formátech: #RRGGBBAA, rgba(...), hsla(...). Nastavíte jednou, převede se všude.
Figma vám dá OKLCH nebo HSL — vložte ji a zkopírujte ekvivalentní HEX pro svou konfiguraci Tailwind nebo CSS proměnné, aniž byste opustili prohlížeč.
Táhněte posuvníky, abyste prozkoumali odstíny, a zaznamenávejte hodnoty OKLCH pro systematickou paletu design systému.
Převeďte brandovou barvu na její formu HSL, abyste mohli použít hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) pro stavy hover.
Pole jasu vám poskytne surovou hodnotu použitou ve výpočtech kontrastu WCAG — užitečné pro výpočty přístupnosti.
Vložte oklch(...) ze souboru CSS, který právě čtete, a okamžitě uvidíte, jakou barvu ve skutečnosti vytváří.
Klikněte na ikonu Color Formats v docku DevSuite Pro. Otevře se panel s výběrem barvy, hex polem a posuvníky RGB.
Použijte výběr barvy, zadejte hex nebo vložte jakýkoliv CSS řetězec barvy (rgb(...), oklch(...) atd.). Barva se okamžitě zobrazí v náhledu.
Níže se vykreslí každý formát: HEX, RGB, HSL, HSV, OKLCH, CSS proměnná a jas. Všechny zůstávají synchronizované, jak provádíte úpravy.
Táhněte posuvníky R/G/B/A pro jemné úpravy. Skvělé pro vyladění konkrétního odstínu odpovídajícího návrhové specifikaci.
Klikněte na Copy u řádku formátu, který chcete — hodnota se uloží do schránky ve správné syntaxi.
Nainstalujte si DevSuite Pro zdarma a odemkněte 64+ vývojářských nástrojů pro svůj prohlížeč.
