Color Format Converter oversætter enhver farve mellem HEX, RGB, HSL, HSV og OKLCH. Vælg en farve med den native farvevælger, skriv en hex-værdi, indsæt en vilkårlig CSS-farvestreng, eller justér RGB-skydere — alle formater opdateres live, og hvert har sin egen Copy-knap.
Moderne CSS giver dig et dusin måder at skrive den samme farve på: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus alfavarianter af hver. Du skal ofte konvertere mellem dem — et Figma-design giver dig en OKLCH, din kodebase bruger HEX, og dine temavariabler foretrækker HSL til hover-justeringer. Color Format Converter klarer alle konverteringer i ét panel. Vælg en farve fra den native farvevælger, indsæt en eksisterende farve i en vilkårlig syntaks, eller træk i RGB-skydere for at ramme den rigtige. Hvert almindeligt format vises samtidig: HEX (med alfa), rgb()/rgba(), hsl()/hsla(), hsv() og oklch() — plus et CSS-variabel-uddrag og den beregnede luminansværdi til hurtig kontrastberegning. Alfakanalen understøttes hele vejen igennem. Hvert format har sin egen Copy-knap til brug med ét klik, og fortolkeren accepterer native farvenavne og alt, hvad CSS understøtter.
Viser HEX, RGB/RGBA, HSL/HSLA, HSV og OKLCH samtidig — vælg det format, din målkode forventer, uden at skulle konvertere hver gang.
Accepterer HEX (#abc eller #aabbcc eller #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() og native farvenavne. Indsæt alt, hvad CSS understøtter.
Håndterer det nye OKLCH-format, der bruges i moderne CSS — et perceptuelt ensartet farverum, der er ved at blive den nye standard i designsystemer.
Hvert output har sin egen Copy-knap. Klik for at hente præcis det format, du har brug for til din kode, uden manuel markering.
Justér skyderne for rød/grøn/blå/alfa for finjustering. Alle formater opdateres i realtid, mens du trækker.
Gennemsigtighed håndteres på tværs af alle formater: #RRGGBBAA, rgba(...), hsla(...). Indstil én gang, konverteret alle steder.
Figma giver dig en OKLCH eller HSL — indsæt den, kopiér den tilsvarende HEX til din Tailwind-konfiguration eller CSS-variabler uden at forlade browseren.
Træk i skyderne for at udforske nuancer, og noter OKLCH-værdierne til en systematisk designsystempalet.
Konvertér en brandfarve til dens HSL-form, så du kan bruge hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) til hover-tilstande.
Luminansfeltet giver dig den rå værdi, der bruges i WCAG-kontrastberegninger — nyttigt til a11y-matematik.
Indsæt en oklch(...) fra en CSS-fil, du læser, og se øjeblikkeligt, hvilken farve den faktisk giver.
Klik på Color Formats-ikonet i DevSuite Pro-dokken. Et panel åbner med en farvevælger, hex-felt og RGB-skydere.
Brug farvevælgeren, skriv en hex-værdi, eller indsæt en vilkårlig CSS-farvestreng (rgb(...), oklch(...) osv.). Farven vises med det samme i forhåndsvisningen.
Alle formater vises nedenfor: HEX, RGB, HSL, HSV, OKLCH, CSS-variabel og luminans. Alle holdes synkroniseret, mens du justerer.
Træk i R/G/B/A-skyderne for finjusteringer. Fremragende til at ramme en bestemt nuance, der matcher en designspecifikation.
Klik på Copy på den formatrække, du vil bruge — værdien lander i din udklipsholder i den korrekte syntaks.
Installer DevSuite Pro gratis og lås op for 64+ udviklerværktøjer til din browser.
