Färgkonverterare
Konvertera färger mellan HEX, RGB, HSL, HWB och CMYK med transparensstöd och liveförhandsvisning.
Så här fungerar det
Färgkonverteraren omvandlar färgvärden mellan HEX-, RGB-, HSL- och HSV-format med standardmatematiska formler — utan avrundning eller approximation.
Ange en färg i något av de stödda formaten: hexadecimalt (#RRGGBB), RGB (t.ex. rgb(255, 128, 0)), HSL (t.ex. hsl(30, 100%, 50%)) eller HSV. Kalkylatorn beräknar automatiskt alla andra representationer simultaneously.
Använd färgväljaren för att visuellt välja värden istället för att skriva dem manuellt.
HEX-format används mest i CSS och HTML. RGB är bekvämt för programmatisk manipulation. HSL är intuitivt när man justerar nyans, mättnad och ljushet.
Praktiskt exempel
Ange #1E90FF: verktyget rapporterar rgb(30, 144, 255) och hsl(210, 100%, 56%), identifierar det som den namngivna CSS-färgen dodgerblue och visar dess relativa WCAG-luminans. Harmonisektionen genererar komplement-, analoga, triadiska och delade komplementfärger — klicka på valfri ruta för att ladda den och utforska vidare. Motsatt väg är lika vanlig: klistra in rgb(30, 144, 255) från ett designverktyg och kopiera hexvärdet till din stilmall, med alla format synkade medan du justerar.
Användningsfall
- Översätta en designers HEX-färg till HSL för CSS-animationer
- Kontrollera RGB-tripletten bakom en varumärkesfärg
- Kopiera färgvärden mellan designverktyg som använder olika format
- Undervisa i färgteori med ett visuellt färgprov
Vanliga frågor
- Varför kan HSL→HEX→HSL inte returnera exakt samma värden?
- Viss avrundning är oundviklig vid konvertering mellan färgrymder — skillnaden är visuellt försumbar.
- Stöder det alfakanal/transparens?
- Den aktuella versionen hanterar ogenomskinliga färger. Alfa (RGBA/HSLA) är planerat.
- Vilket format ska jag välja för CSS?
- HEX eller rgb() för hela webfärger; hsl() när du programmatiskt behöver justera ljushet/mättnad.
- Kan jag kopiera värden med ett klick?
- Ja — varje utdatafält har en Kopiera-knapp.
- Hanterar konverteraren namngivna CSS-färger?
- Inte direkt — ange HEX-ekvivalenten för den namngivna färgen.