Nyanser och Skuggor — Skapa Färgvariationer Gratis

Varje designsystem behöver mer än en enda varumärkesfärg — det behöver en komplett skala av nyanser (ljusare) och skuggor (mörkare) för bakgrunder, ramar, hover-tillstånd och inaktiverade element. Vår generator skapar en komplett skala från valfri basfärg, med HEX-, RGB- och HSL-värden för varje variation.

Vad är en nyanser och skuggor-generator?

Nyanser skapas genom att blanda en färg med vitt (ökande ljusstyrka) och skuggor skapas genom att blanda med svart (minskande ljusstyrka). En generator ger en slät gradient av variationer från nästintill vitt till nästintill svart genom din valda basfärg, vilket ger dig en användbar färgskala.

Hur använder du generatorn?

Ange din basfärg med färgväljaren eller ett HEX-värde. Verktyget genererar 10 nyanser (ljusare) och 10 skuggor (mörkare) av den färgen. Varje variation visar sina HEX-, RGB- och HSL-värden. Klicka på valfri nyans för att kopiera dess färgkod för användning i din CSS eller ditt designverktyg.

Bästa praxis

Använd nyanser för bakgrunder och skuggor för text och ramar — detta skapar naturlig visuell hierarki med en enda basfärg. 500-värdet (din basfärg) bör vanligtvis vara den interaktiva/accent-färgen, med ljusare värden för bakgrunder och mörkare värden för text. Kontrollera kontrastförhållanden för att säkerställa tillgänglighet.