Color Format Converter oversetter enhver farge mellom HEX, RGB, HSL, HSV og OKLCH. Velg en farge med den innebygde velgeren, skriv inn en hex-verdi, lim inn en hvilken som helst CSS-fargestreng, eller juster RGB-glidebrytere — hvert format oppdateres live og har sin egen Kopier-knapp.
Moderne CSS gir deg et dusin måter å skrive den samme fargen på: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), pluss alfa-varianter av hver. Du trenger ofte å konvertere mellom dem — et Figma-design gir deg en OKLCH, kodebasen din bruker HEX, og temavariablene dine foretrekker HSL for hover-justeringer. Color Format Converter gjør alle konverteringer i ett panel. Velg en farge fra den innebygde fargevelgeren, lim inn en eksisterende farge i en hvilken som helst syntaks, eller dra RGB-glidebrytere for å stille inn en. Hvert vanlig format vises samtidig: HEX (med alfa), rgb()/rgba(), hsl()/hsla(), hsv() og oklch() — pluss en CSS-variabel-snutt og den beregnede luminansverdien for rask kontrastmatematikk. Alfakanal støttes gjennomgående. Hvert format har sin egen Kopier-knapp for bruk med ett klikk, og parseren godtar innebygde fargenavn og alt CSS støtter.
Viser HEX, RGB/RGBA, HSL/HSLA, HSV og OKLCH samtidig — velg hvilket format koden din trenger uten å konvertere på nytt hver gang.
Godtar HEX (#abc eller #aabbcc eller #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() og innebygde fargenavn. Lim inn alt CSS støtter.
Håndterer det nye OKLCH-formatet brukt i moderne CSS — et perseptuelt uniformt fargerom som er i ferd med å bli den nye standarden i designsystemer.
Hvert output har sin egen Kopier-knapp. Klikk for å hente nøyaktig det formatet du trenger til koden din, ingen manuell markering nødvendig.
Juster Rød/Grønn/Blå/Alfa-glidebrytere for finjustering. Hvert format oppdateres i sanntid mens du drar.
Gjennomsiktighet håndteres på tvers av alle formater: #RRGGBBAA, rgba(...), hsla(...). Angi én gang, konverteres overalt.
Figma gir deg en OKLCH eller HSL — lim den inn, kopier HEX-tilsvaret for Tailwind-konfigurasjonen eller CSS-variablene dine uten å forlate nettleseren.
Dra glidebryterne for å utforske nyanser, og noter OKLCH-verdiene for en systematisk designsystem-palett.
Konverter en merkevarefarge til HSL-form slik at du kan bruke hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) for hover-tilstander.
Luminans-feltet gir deg råverdien som brukes i WCAG-kontrastberegninger — nyttig for a11y-matematikk.
Lim inn en oklch(...) fra en CSS-fil du leser, og se umiddelbart hvilken farge den faktisk produserer.
Klikk på Fargeformater-ikonet i DevSuite Pro-dokken. Et panel åpnes med en fargevelger, hex-felt og RGB-glidebrytere.
Bruk fargevelgeren, skriv inn en hex-verdi, eller lim inn en hvilken som helst CSS-fargestreng (rgb(...), oklch(...), osv.). Fargen forhåndsvises umiddelbart.
Hvert format vises under: HEX, RGB, HSL, HSV, OKLCH, CSS-variabel og luminans. Alle holdes synkronisert mens du justerer.
Dra R/G/B/A-glidebryterne for finjusteringer. Perfekt for å stille inn en spesifikk nyanse som matcher en designspesifikasjon.
Klikk Kopier på formatraden du ønsker — verdien havner i utklippstavlen din i riktig syntaks.
Installer DevSuite Pro gratis og lås opp 64+ utviklerverktøy for nettleseren din.
