Color Format Converter översätter valfri färg mellan HEX, RGB, HSL, HSV och OKLCH. Välj en färg med den inbyggda färgväljaren, skriv ett hexvärde, klistra in en CSS-färgsträng eller justera RGB-reglagen — alla format uppdateras live och varje har sin egen kopieringsknapp.
Modern CSS ger dig ett dussin sätt att skriva samma färg: #7C3AED, rgb(124, 58, 237), hsl(262, 83%, 58%), oklch(55% 0.24 293), plus alfavarianter av var och en. Du behöver ofta konvertera mellan dem — en Figma-design ger dig en OKLCH, din kodbas använder HEX, och dina temavariabler föredrar HSL för hover-justeringar. Color Format Converter gör alla konverteringar i en och samma panel. Välj en färg från den inbyggda färgväljaren, klistra in en befintlig färg i valfri syntax, eller dra RGB-reglagen för att ringa in en exakt nyans. Alla vanliga format renderas samtidigt: HEX (med alfa), rgb()/rgba(), hsl()/hsla(), hsv() och oklch() — plus ett CSS-variabelutdrag och det beräknade luminansvärdet för snabb kontrastmatematik. Alfakanalen stöds fullt ut. Varje format har sin egen kopieringsknapp för användning med ett klick, och parsern accepterar inbyggda färgnamn och allt CSS stöder.
Visar HEX, RGB/RGBA, HSL/HSLA, HSV och OKLCH samtidigt — välj vilket format din målkod förväntar sig utan att konvertera på nytt varje gång.
Accepterar HEX (#abc eller #aabbcc eller #aabbccff), rgb()/rgba(), hsl()/hsla(), oklch() och inbyggda färgnamn. Klistra in vad som helst som CSS stöder.
Hanterar det nya OKLCH-formatet som används i modern CSS — ett perceptuellt enhetligt färgrum som blir det nya standardvalet i designsystem.
Varje utdata har sin egen kopieringsknapp. Klicka för att hämta exakt det format du behöver i din kod, ingen manuell markering krävs.
Justera reglagen för Röd/Grön/Blå/Alfa för finjustering. Alla format uppdateras i realtid när du drar.
Transparens hanteras i alla format: #RRGGBBAA, rgba(...), hsla(...). Ställ in en gång, konverterat överallt.
Figma ger dig en OKLCH eller HSL — klistra in den, kopiera HEX-motsvarigheten för din Tailwind-konfiguration eller CSS-variabler utan att lämna webbläsaren.
Dra reglagen för att utforska nyanser och anteckna OKLCH-värdena för en systematisk palett i ditt designsystem.
Konvertera en varumärkesfärg till dess HSL-form så att du kan använda hsl(var(--brand-h) var(--brand-s) calc(var(--brand-l) + 10%)) för hover-tillstånd.
Luminansfältet ger dig rådata som används i WCAG-kontrastberäkningar — användbart för a11y-matematik.
Klistra in en oklch(...) från en CSS-fil du läser och se direkt vilken färg den faktiskt ger.
Klicka på Color Formats-ikonen i DevSuite Pro-dockan. En panel öppnas med en färgväljare, hex-inmatning och RGB-reglage.
Använd färgväljaren, skriv en hex eller klistra in en CSS-färgsträng (rgb(...), oklch(...) osv.). Färgen förhandsvisas direkt.
Alla format renderas nedanför: HEX, RGB, HSL, HSV, OKLCH, CSS-variabel och luminans. Alla hålls synkroniserade när du justerar.
Dra R/G/B/A-reglagen för finjusteringar. Perfekt för att ringa in en specifik nyans som matchar en designspecifikation.
Klicka på Copy på formatraden du vill ha — värdet hamnar i urklipp med korrekt syntax.
Installera DevSuite Pro gratis och lås upp 64+ utvecklarverktyg för din webbläsare.
