Färgkonverterare

Om färgformat

Samma färg kan skrivas som HEX (#ff6600), RGB (rgb(255, 102, 0)) eller HSL (hsl(24, 100%, 50%)) — tre olika sätt att beskriva exakt samma färg, var och en lämpad för olika situationer.

HEX har en kompakt förkortning: en 3-siffrig kod som #f60 motsvarar exakt den 6-siffriga #ff6600 — varje siffra dubbleras helt enkelt —, och en 8-siffrig form som #ff6600cc lägger till en alfakanal på samma sätt som rgba() och hsla(). Det här verktyget accepterar och normaliserar förkortningen vid indata, och ger alltid ut den fullständiga 6- eller 8-siffriga formen så att resultatet blir entydigt att klistra in någon annanstans. En sak det inte gör: kontrollera färger för tillgänglig kontrast eller simulera färgblindhet — det är en separat, lika viktig designfråga, skild från formatkonvertering.

Var du stöter på det

• Översätta en designers HEX-färg till den RGB eller HSL som kodbasen redan använder
• Justera ljushet eller mättnad, vilket är betydligt enklare att resonera om i HSL än i RGB
• Läsa av en färg från en webbläsares beräknade stilar och konvertera den för att matcha en designspecifikation
• Kontrollera hur ett CSS-färgvärde faktiskt renderas innan man bestämmer sig för det

Vanliga frågor

Varför finns HSL om RGB redan fungerar?
RGB beskriver en färg som intensiteter av rött/grönt/blått ljus, vilket stämmer dåligt med hur människor tänker på färg. HSL separerar nyans, mättnad och ljushet, så "gör den mörkare" eller "gör den mer levande" blir en enda siffra att ändra istället för att räkna om tre.

Vad betyder alfavärdet i rgba()/hsla()?
Det är opaciteten, från 0 (helt transparent) till 1 (helt opak). Detta verktyg bevarar den mellan formaten — även som 8-siffrig HEX — när din indata innehåller en.

Stöds namngivna CSS-färger som "tomato"?
Inte ännu — endast HEX-, RGB(A)- och HSL(A)-indata. Slå upp den namngivna färgens HEX-värde först om det är där du börjar.

Är #f60 samma färg som #ff6600?
Ja, exakt. Den 3-siffriga HEX-förkortningen dubblerar varje siffra för att få den fullständiga formen: f blir ff, 6 blir 66, 0 blir 00. Det är rent ett kortare sätt att skriva vissa färger — bara de där varje kanal råkar vara en upprepad siffra —, inte ett annat eller mindre precist färgrum. Det här verktyget accepterar båda längderna och ger alltid ut den fullständiga 6- eller 8-siffriga formen.