HEX till HSL-omvandlare
Vad är HEX till HSL-omvandlare
Det här verktyget omvandlar HEX-färgkoder (som #3B82F6) till HSL-värden (som hsl(217, 91%, 60%)). HSL står för Hue, Saturation och Lightness (nyans, mättnad och ljushet) — en mer intuitiv färgmodell för designer. Att justera ljushet i HSL är mycket enklare än i HEX eller RGB, vilket gör det idealiskt för att skapa färgpaletter och CSS-variabler.
Så använder du
- Skriv eller klistra in en HEX-färgkod i HEX-fältet (med eller utan #).
- HSL- och RGB-värden visas direkt i fälten nedanför.
- Klicka på kopiera-knappen bredvid HSL för att kopiera formatet hsl(h, s%, l%).
- Växla mellan alla 6 färgomvandlare med lägeslänkarna högst upp.
När du använder det
Bygger du ett färgsystem från en varumärkesfärg? Klistra in varumärkets HEX (#E63946) och få tillbaka hsl(356, 75%, 56%). Därifrån kan du skapa ljusare toner genom att höja ljusheten och mörkare nyanser genom att sänka den, allt med exakt samma nyans.
Vanliga frågor
Vad är HSL och varför använda det i stället för HEX?
HSL (Hue, Saturation, Lightness) beskriver färg i mänskligt intuitiva termer. Hue är positionen på färghjulet (0–360°), Saturation är färgintensitet (0–100 %) och Lightness är ljushet (0–100 %). Det är mycket enklare att skapa färgvariationer i HSL än i HEX.
Vad är #FF0000 i HSL?
Rent rött #FF0000 är hsl(0, 100%, 50%). Nyans 0° är rött på färghjulet, 100 % mättnad betyder fullt mättat och 50 % ljushet är den rena färgen.
Stöder CSS HSL-färger?
Ja. Modern CSS har fullt stöd för hsl()- och hsla()-notation. Till exempel: color: hsl(217, 91%, 60%); och background: hsla(217, 91%, 60%, 0.5);
Vad är #000000 i HSL?
Svart (#000000) är hsl(0, 0%, 0%). Ljushet på 0 % ger rent svart oavsett nyans eller mättnad.
Kan jag dela verktyget med mina värden ifyllda?
Ja. Webbadressen uppdateras automatiskt medan du skriver. Kopiera den från adressfältet eller använd Dela-knappen — den som öppnar länken ser exakt dina värden redo att användas.
Relaterade verktyg
HSL till HEX-omvandlare
Omvandla HSL-färgvärden till HEX-koder direkt. Gratis HSL till HEX-omvandlare med live-förhandsvisning för CSS och design.
Bildförhållande Kalkylator
Räkna ut bildförhållandet, hitta saknad bredd eller höjd och ändra storlek på bilder och video utan att förvränga proportionerna. Gratis.
Base64-avkodare
Avkoda Base64-strängar till vanlig text direkt i din webbläsare. Stöder fullständig Unicode-utdata inklusive emojis. Gratis Base64-avkodare online.