Pretvornik barvnih formatov pretvarja poljubno barvo med HEX, RGB, HSL, HSV in OKLCH. Izberite barvo z domačim izbirnikom, vnesite vrednost hex, prilepite poljuben niz barve CSS ali prilagodite drsnike RGB — vsak format se posodablja v živo, vsak pa ima svoj gumb za kopiranje.
Sodobni CSS ponuja ducat načinov za zapis iste barve: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), poleg tega pa še alfa različice vsakega. Pogosto jih morate pretvarjati med seboj — Figma vam ponudi OKLCH, vaša koda uporablja HEX, vaše spremenljivke teme pa za prilagoditve ob prehodu miške raje uporabljajo HSL. Pretvornik barvnih formatov vse te pretvorbe opravi na eni plošči. Izberite barvo z domačim izbirnikom, prilepite obstoječo barvo v poljubni sintaksi ali povlecite drsnike RGB, da jo natančno nastavite. Vsak pogosti format se izriše hkrati: HEX (z alfo), rgb()/rgba(), hsl()/hsla(), hsv() in oklch() — poleg tega še izsek spremenljivke CSS in izračunana vrednost svetlosti za hiter izračun kontrasta. Alfa kanal je podprt v celoti. Vsak format ima svoj gumb za kopiranje za uporabo z enim klikom, razčlenjevalnik pa sprejema domača imena barv in vse, kar podpira CSS.
Hkrati prikaže HEX, RGB/RGBA, HSL/HSLA, HSV in OKLCH — izberite format, ki ga pričakuje vaša ciljna koda, ne da bi vsakič znova pretvarjali.
Sprejema HEX (#abc ali #aabbcc ali #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() in domača imena barv. Prilepite karkoli, kar podpira CSS.
Obvladuje novi format OKLCH, ki se uporablja v sodobnem CSS-ju — zaznavno enakomeren barvni prostor, ki postaja nov privzeti standard oblikovalskih sistemov.
Vsak izpis ima svoj gumb Kopiraj. Kliknite in dobite natanko format, ki ga potrebujete za svojo kodo, brez ročnega izbiranja.
Za natančno prilagajanje uporabite drsnike Rdeča/Zelena/Modra/Alfa. Vsak format se posodobi v realnem času med vlečenjem.
Prosojnost je obravnavana v vseh formatih: #RRGGBBAA, rgba(...), hsla(...). Nastavite enkrat, pretvori se povsod.
Figma vam ponudi OKLCH ali HSL — prilepite ga, kopirajte ustreznik HEX za svojo konfiguracijo Tailwind ali spremenljivke CSS, ne da bi zapustili brskalnik.
Povlecite drsnike, da raziščete odtenke, in si zabeležite vrednosti OKLCH za sistematično paleto oblikovalskega sistema.
Pretvorite barvo blagovne znamke v obliko HSL, da lahko uporabite hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) za stanja ob prehodu miške.
Polje svetlosti prikaže surovo vrednost, uporabljeno pri izračunih kontrasta WCAG — uporabno za matematiko dostopnosti.
Prilepite oklch(...) iz datoteke CSS, ki jo berete, in takoj vidite, katero barvo dejansko ustvari.
Kliknite ikono Barvni formati v vrstici DevSuite Pro. Odpre se plošča z izbirnikom barv, vnosom hex in drsniki RGB.
Uporabite izbirnik barv, vnesite hex ali prilepite poljuben niz barve CSS (rgb(...), oklch(...) itd.). Predogled barve se pokaže takoj.
Spodaj se izrišejo vsi formati: HEX, RGB, HSL, HSV, OKLCH, spremenljivka CSS in svetlost. Vsi ostanejo usklajeni ob vsaki prilagoditvi.
Povlecite drsnike R/G/B/A za natančne prilagoditve. Odlično za doseganje določenega odtenka, ki ustreza specifikaciji oblikovanja.
Kliknite Kopiraj v vrstici formata, ki ga želite — vrednost pristane na odložišču v pravilni sintaksi.
Namestite DevSuite Pro brezplačno in odklenite več kot 64 orodij za razvijalce za svoj brskalnik.
