Färgpaletter

Generator för färgnyanser

Välj en färg och se direkt hela dess skala, från den ljusaste nyansen till den mörkaste. Tryck på en nyans för att kopiera dess HEX-kod.

Skala från 50 till 950

Elva nyanser i samma färgfamilj, ordnade som i Tailwind. Din färg markeras vid den nyans som passar den.

Ljusa nyanser (med vitt)

Tryck på en nyans för att kopiera dess HEX.

Mörka nyanser (med svart)

Dova toner (med grått)

Exportera skalan

Vad är en nyansskala

Det är en serie nyanser som kommer från samma färg: från en nästan vit version till en nästan svart. Alla har samma grundton, därför passar de ihop utan ansträngning.

Ljusa nyanser, mörka nyanser och dova toner

En ljus nyans är färgen blandad med vitt: ljusare och mjukare. En mörk nyans är färgen blandad med svart: mörkare och djupare. En dov ton är färgen blandad med grått: mer dämpad och elegant.

Så använder du en nyansskala i din design

Använd de ljusa nyanserna (50–200) till bakgrunder, de mellersta (400–600) till knappar och länkar och de mörka (700–950) till text och kanter. Med en enda skala får du ett ordnat och enhetligt gränssnitt.

Vanliga frågor

Hur räknas skalan ut?

Vi använder färgrymden OKLCH, som efterliknar hur ögat uppfattar ljushet. Därför ser stegen mellan nyanserna jämna ut, utan tvära hopp.

Vad betyder siffrorna 50 till 950?

Det är skalan som Tailwind CSS och många designsystem använder: 50 är den ljusaste nyansen och 950 den mörkaste. Din färg hamnar på den siffra som passar den bäst.

Kan jag använda skalan i Tailwind eller CSS?

Ja. Skriv ett namn, välj format och kopiera koden: CSS-variabler redo att klistra in eller färgblocket till Tailwind-konfigurationen.

Vad är skillnaden mellan en nyansskala och en färgpalett?

En nyansskala är nyanser av en och samma färg. En palett blandar olika färger som passar ihop. Många paletter använder en skala till bakgrunder och text, plus en eller två accentfärger.

Andra guider och verktyg