Hoppa till innehåll

Färgnyansgenerator

Generera ljusa och mörka nyanser av valfri färg för designsystem och UI-paletter. Utdata som HEX, RGB eller HSL. Gratis, 100% i din webbläsare.

Vad är nyanser och toner?

Inom färgteori är en ton (tint) en färg blandad med vitt (gör den ljusare), och en nyans (shade) är en färg blandad med svart (gör den mörkare). Tillsammans bildar de en monokromatisk palett — variationer av en enda nyans på olika ljusnivåer. Detta verktyg genererar en komplett skala från vitt genom din grundfärg till svart, vilket ger dig en redo-att-använda färgrampa för design och utveckling.

Användningsområden för färgnyanser

Designsystem — generera en 9-stegs eller 11-stegs nyans skala för en varumärkesfärg, enligt mönstret som används av Tailwind CSS (50–950), Material Design och de flesta moderna designsystem. UI-komponenttillstånd — använd ljusare toner för bakgrunder och hover-tillstånd, grundfärgen för primära åtgärder och mörkare nyanser för text, ramar och aktiva tillstånd. Datavisualisering — skapa sekventiella ljus-till-mörk-färgskalor för koropletkartor, värmekartor och diagram där intensitet representerar storlek. Tillgänglighet — hitta nyanskombinationer som uppfyller WCAG-kontrastkrav (4,5:1 för normal text, 3:1 för stor text).

Hur nyanser genereras

Nyanser genereras genom linjär interpolering i RGB-rymden från vitt (#FFFFFF) genom grundfärgen till svart (#000000). Vid N nyanser placeras grundfärgen vid skalans mittpunkt. Varje steg blandas jämnt, vilket producerar konsekvent ljushetsprogressioner. Utdata finns tillgänglig i HEX-, RGB- och HSL-format — kopiera enskilda värden eller hela paletten på en gång.

Integritet

All färggenerering körs 100% i din webbläsare. Inga data skickas till någon server.