Color Format Converter pretvara bilo koju boju između HEX, RGB, HSL, HSV i OKLCH formata. Odaberite boju izvornim biračem, upišite heksadecimalnu vrijednost, zalijepite bilo koji CSS niz boje ili prilagodite RGB klizače — svaki format ažurira se uživo, a svaki ima vlastiti gumb za kopiranje.
Moderni CSS pruža desetak načina za zapisivanje iste boje: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), uz alfa varijante svakog. Često ih trebate pretvarati jednu u drugu — Figma dizajn vam daje OKLCH, vaš kod koristi HEX, a varijable teme radije koriste HSL za prilagodbe pri lebdenju. Color Format Converter obavlja sve pretvorbe u jednom panelu. Odaberite boju izvornim biračem boja, zalijepite postojeću boju u bilo kojoj sintaksi ili povucite RGB klizače za precizno podešavanje. Svaki uobičajeni format prikazuje se istovremeno: HEX (s alfa kanalom), rgb()/rgba(), hsl()/hsla(), hsv() i oklch() — uz isječak CSS varijable i izračunatu vrijednost luminancije za brzu matematiku kontrasta. Alfa kanal podržan je od početka do kraja. Svaki format ima vlastiti gumb za kopiranje jednim klikom, a parser prihvaća izvorne nazive boja i sve što CSS podržava.
Prikazuje HEX, RGB/RGBA, HSL/HSLA, HSV i OKLCH istovremeno — odaberite format koji vaš ciljni kod očekuje bez ponovnog pretvaranja svaki put.
Prihvaća HEX (#abc ili #aabbcc ili #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() i izvorne nazive boja. Zalijepite bilo što što CSS podržava.
Obrađuje novi OKLCH format korišten u modernom CSS-u — perceptualno ujednačen prostor boja koji postaje novi zadani standard za dizajn sustave.
Svaki izlaz ima vlastiti gumb Copy. Kliknite za dohvat točno onog formata koji vam treba za kod, bez ručnog označavanja.
Prilagodite klizače Red/Green/Blue/Alpha za fino podešavanje. Svaki format ažurira se u stvarnom vremenu dok povlačite.
Prozirnost je obrađena u svakom formatu: #RRGGBBAA, rgba(...), hsla(...). Postavite jednom, pretvoreno je posvuda.
Figma vam daje OKLCH ili HSL — zalijepite ga, kopirajte HEX ekvivalent za vašu Tailwind konfiguraciju ili CSS varijable bez napuštanja preglednika.
Povucite klizače za istraživanje nijansi, bilježeći OKLCH vrijednosti za sustavnu paletu dizajn sustava.
Pretvorite boju brenda u njezin HSL oblik kako biste mogli koristiti hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) za stanja lebdenja.
Polje luminancije daje vam sirovu vrijednost korištenu u WCAG izračunima kontrasta — korisno za matematiku pristupačnosti.
Zalijepite oklch(...) iz CSS datoteke koju čitate i odmah vidite koju boju zapravo daje.
Kliknite ikonu Color Formats u DevSuite Pro doku. Otvara se panel s biračem boja, unosom heksadecimalne vrijednosti i RGB klizačima.
Koristite birač boja, upišite heksadecimalnu vrijednost ili zalijepite bilo koji CSS niz boje (rgb(...), oklch(...) itd.). Boja se odmah prikazuje.
Svaki format prikazuje se ispod: HEX, RGB, HSL, HSV, OKLCH, CSS varijabla i luminancija. Svi ostaju sinkronizirani dok prilagođavate.
Povucite klizače R/G/B/A za fina podešavanja. Odlično za precizno postizanje određene nijanse koja odgovara dizajnerskoj specifikaciji.
Kliknite Copy na retku formata koji želite — vrijednost se sprema u međuspremnik u ispravnoj sintaksi.
Instalirajte DevSuite Pro besplatno i otključajte 64+ razvojnih alata za svoj preglednik.
