Color Format Converter prevádza akúkoľvek farbu medzi HEX, RGB, HSL, HSV a OKLCH. Vyberte farbu pomocou natívneho výberu, zadajte hexadecimálnu hodnotu, vložte akýkoľvek CSS reťazec farby alebo upravte posuvníky RGB — každý formát sa aktualizuje naživo a každý má vlastné tlačidlo Copy.
Moderné CSS ponúka tucet spôsobov, ako zapísať tú istú farbu: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus alfa varianty každého z nich. Často potrebujete medzi nimi konvertovať — Figma návrh vám dá OKLCH, váš kód používa HEX a vaše premenné témy preferujú HSL pri úpravách hover stavov. Color Format Converter zvládne všetky konverzie v jednom paneli. Vyberte farbu z natívneho výberu farieb, vložte existujúcu farbu v akejkoľvek syntaxi, alebo ju doladíte ťahaním posuvníkov RGB. Každý bežný formát sa vykresľuje súčasne: HEX (s alfa kanálom), rgb()/rgba(), hsl()/hsla(), hsv() a oklch() — plus úryvok CSS premennej a vypočítaná hodnota jasu pre rýchly výpočet kontrastu. Alfa kanál je podporovaný v celom rozsahu. Každý formát má vlastné tlačidlo Copy na použitie jedným kliknutím a parser prijíma natívne názvy farieb aj všetko, čo podporuje CSS.
Zobrazuje HEX, RGB/RGBA, HSL/HSLA, HSV a OKLCH súčasne — vyberte si formát, ktorý potrebuje váš cieľový kód, bez opakovaného prevodu.
Prijíma HEX (#abc alebo #aabbcc alebo #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() aj natívne názvy farieb. Vložte čokoľvek, čo podporuje CSS.
Zvláda nový formát OKLCH používaný v modernom CSS — perceptuálne jednotný farebný priestor, ktorý sa stáva novým štandardom v dizajnových systémoch.
Každý výstup má vlastné tlačidlo Copy. Kliknutím získate presne ten formát, ktorý potrebujete pre svoj kód, bez ručného výberu.
Doladenie pomocou posuvníkov Red/Green/Blue/Alpha. Každý formát sa aktualizuje v reálnom čase počas ťahania.
Priehľadnosť je spracovaná vo všetkých formátoch: #RRGGBBAA, rgba(...), hsla(...). Nastavíte raz, prekonvertuje sa všade.
Figma vám dá OKLCH alebo HSL — vložte ho a skopírujte ekvivalent v HEX pre vašu konfiguráciu Tailwind alebo CSS premenné bez opúšťania prehliadača.
Ťahajte posuvníky na preskúmanie odtieňov a zaznamenávajte hodnoty OKLCH pre systematickú paletu dizajnového systému.
Skonvertujte značkovú farbu do formátu HSL, aby ste mohli použiť hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) pre stavy hover.
Pole luminance vám poskytuje surovú hodnotu použitú vo výpočtoch kontrastu podľa WCAG — užitočné pri výpočtoch prístupnosti.
Vložte oklch(...) zo CSS súboru, ktorý práve čítate, a okamžite uvidíte, akú farbu v skutočnosti tvorí.
Kliknite na ikonu Color Formats v dokovacom paneli DevSuite Pro. Otvorí sa panel s výberom farby, hex vstupom a posuvníkmi RGB.
Použite výber farby, zadajte hex hodnotu alebo vložte akýkoľvek CSS reťazec farby (rgb(...), oklch(...) atď.). Náhľad farby sa zobrazí okamžite.
Nižšie sa vykreslí každý formát: HEX, RGB, HSL, HSV, OKLCH, CSS premenná a jas. Všetky zostávajú synchronizované pri úpravách.
Ťahajte posuvníky R/G/B/A pre jemné úpravy. Skvelé na doladenie konkrétneho odtieňa podľa dizajnovej špecifikácie.
Kliknite na Copy pri riadku formátu, ktorý chcete — hodnota sa uloží do schránky v správnej syntaxi.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 64 vývojárskych nástools pre váš prehliadač.
