HSL-färg: det vänligaste sättet att skriva färger i CSS

En HSL-färg skrivs som tre tal: nyans, mättnad och ljushet. I CSS betyder hsl(262 83% 58%) en nyans på 262 grader (violett), 83 % mättnad (stark) och 58 % ljushet (lite över mittpunkten). Det är samma violett som #7c3bed, men du kan läsa den. Vill du ha den ljusare? Höj sista talet. Mjukare? Sänk det i mitten. Den enda egenskapen, en betydelse per tal, är varför HSL är det vänligaste sättet att skriva färger för hand.

Vad nyans, mättnad och ljushet betyder

Nyans är en position på färghjulet, angiven i grader. Rött ligger på 0 och igen på 360, gult på 60, grönt på 120, cyan på 180, blått på 240 och magenta på 300. Att flytta nyansen roterar färgen men behåller dess styrka.

Mättnad är hur mycket färg det finns. Vid 0 % är varje nyans samma grå. Vid 100 % är den så stark som skärmen tillåter. Ljushet går från svart vid 0 % till vitt vid 100 %, med den rena nyansen vid 50 %. Modellen beskrivs bredare i nyans, mättnad och ljusstyrka, som också förklarar hur HSB i designappar skiljer sig från HSL i CSS.

HSL-syntax i CSS

Det finns två skrivsätt. Det moderna skiljer värden med mellanslag och sätter alfa efter ett snedstreck. Det äldre använder kommatecken och en separat funktion hsla(). Webbläsare accepterar båda, och hsl() tar numera alfa också, så hsla() behövs inte längre. MDN:s referens för hsl() listar varje form.

.button {
  /* modern syntax */
  background: hsl(262 83% 58%);

  /* with 80% opacity */
  background: hsl(262 83% 58% / 0.8);

  /* older comma syntax, still valid */
  background: hsla(262, 83%, 58%, 0.8);

  /* hue can carry a unit */
  background: hsl(262deg 83% 58%);
}

Bygg en färgskala genom att ändra ljushet

Här förtjänar HSL sin plats. Håll nyans och mättnad fasta, stega ljusheten, och du får en familj av toner och skuggor som uppenbart hör ihop. Här är en violett i sju steg, med den hex var och en konverteras till.

Kombinera det med CSS-variabler så hänger hela ditt tema på två tal. Spara nyans och mättnad en gång och välj sedan en ljushet per roll. Ändra nyansvariabeln och hela gränssnittet går från violett till teal, vilket är tanken bakom CSS-variabler för teman.

:root {
  --brand-h: 262;
  --brand-s: 83%;

  --brand-50:  hsl(var(--brand-h) var(--brand-s) 95%);
  --brand-200: hsl(var(--brand-h) var(--brand-s) 85%);
  --brand-500: hsl(var(--brand-h) var(--brand-s) 58%);
  --brand-800: hsl(var(--brand-h) var(--brand-s) 30%);
}

/* a teal theme is one line */
.theme-teal {
  --brand-h: 175;
}

Relativa färger

Nyare webbläsare stöder också syntax för relativa färger, som läser HSL-delarna i vilken färg som helst och låter dig justera dem. hsl(from var(--brand) h s calc(l + 15%)) ger en ljusare version av vad varumärkesfärgen än är, även om den definierats i hex. Kontrollera aktuellt stöd på caniuse innan du förlitar dig på det, och behåll en enkel reservlösning. För att blanda två färger snarare än att putta på en är color-mix() i CSS verktyget.

Där HSL ljuger för dig

HSL är en omordning av RGB, inte en modell av mänskligt seende. Dess ljushet är ett enkelt medelvärde av den ljusaste och den svagaste kanalen, så den bortser från att våra ögon ser gult och grönt som långt ljusare än blått. Resultatet: två färger med identisk HSL-ljushet kan se helt olika ljusa ut.

Det här spelar roll på två ställen. För det första blir en skala byggd genom att stega HSL-ljushet ojämn mellan nyanser: ett gult vid 50 % är långt för ljust för text medan ett blått vid 50 % klarar det lätt. Testa alltid riktiga par med en kontrastkontroll. För det andra blir gradienter och genererade paletter som roterar nyans vid fast ljushet ljusare och mörkare när de passerar gult och blått.

OKLCH behåller samma vänliga idé (ljushet, färgstyrka, nyans) men mäter ljushet så som ögon gör. Om du startar ett nytt designsystem är det det bättre valet. Om du redigerar befintlig CSS eller vill ha en snabb, läsbar justering är HSL fortfarande helt bra.

Att konvertera HSL till hex och tillbaka

Du behöver sällan räkna själv, eftersom varje designverktyg och webbläsares utvecklarpanel konverterar åt dig: klicka på en färgruta i Chromes eller Firefoxs utvecklarverktyg och växla mellan formaten. Under huven konverteras HSL först till RGB, och RGB till hex är enkel parräkning, förklarad i hex till RGB. Räkna med små avrundningsskillnader: hsl(262 83% 58%) landar på #7c3bed, ett steg från den #7c3aed du kanske började med, eftersom hela procent inte kan träffa vart och ett av de 16,7 miljoner hexvärdena.

Om du designar i Gradiently rör du sällan de här talen alls: en Mark bär sin egen palett, och i Pro lagrar varumärkeskitet dina färger så att Designern tillämpar dem åt dig.