HEX, RGB och HSL — Vilket Färgformat Ska Du Använda?

CSS accepterar färger i HEX, RGB, HSL och flera andra format — men designers ger dig en HEX-kod, Figma exporterar RGB och dina CSS-variabler använder HSL. Att konvertera mellan dessa format manuellt är tråkigt och felbenäget. Vår färgkonverterare översätter mellan alla större färgformat i realtid med en levande förhandsvisning.

Vad är en färgkonverterare?

En färgkonverterare översätter ett färgvärde från en notation till en annan. Mata in en HEX-kod som #1db954 och få direkt dess RGB-motsvarighet rgb(29, 185, 84) och HSL-motsvarighet hsl(141, 73%, 42%). Förhandsvisningsrutan bekräftar att du har rätt färg innan du klistrar in den i din kod.

Varför använda HSL?

HSL är idealiskt för att skapa färgvariationer — justera bara ljusstyrkan för nyanser och toner medan nyansen och mättnaden hålls konstant. Att dela färger med icke-utvecklare fungerar bäst med HEX-koder, som är det mest allmänt igenkända formatet. Kom ihåg att HEX-kortform (#fff) expanderar till fullform (#ffffff) och att båda är giltig CSS.

Praktiska råd

Använd HSL i dina CSS-variabler — att justera ljusstyrka och mättnad är mycket mer intuitivt än att pilka på enskilda HEX-siffror. Konvertering manuellt mellan HEX och HSL innefattar flera steg och avrundning — verktyget gör matematiken exakt.