Tint & Shade Generator
Generera tints (ljusare) och shades (mörkare) från valfri basfärg. Bygg en komplett färgskala för ditt designsystem.
Om det här verktyget
Ton- och skugggeneratorn skapar ljusare och mörkare varianter från vilken grundfärg som helst. Toner skapas genom att blanda grundfärgen med vitt (lägga till ljusstyrka), medan skuggor skapas genom att blanda med svart (minska ljusstyrka).
Verktyget genererar upp till 5 nivåer toner och 5 nivåer skuggor, plus den ursprungliga grundfärgen, vilket ger en 11-stegs palett centrerad runt den valda nyansen. Klicka på valfritt swatchfält för att kopiera dess hexkod.
Hur man använder
- Välj en grundfärg med färgväljaren eller skriv en hexkod.
- Använd exempelknapparna för att snabbt prova förinställda färger.
- Justera antalet nivåer (3-5) för att styra palettens bredd.
- Klicka på valfritt swatchfält för att kopiera hexkoden. Använd Kopiera alla för hela skalan.
Användningsfall
Designsystem behöver en systematisk färgskala för varje varumärkesfärg. UI-designers genererar hover-, aktiva och inaktiva tillstånd från en enda åtgärdsfärg. Frontend-utvecklare skapar konsekventa färgvarianter.
Vanliga frågor
- Vad är skillnaden mellan en ton och en skugga? — En ton blandar färgen med vitt (ljusare); en skugga blandar med svart (mörkare). En färgnyans blandar med grå och genereras inte här.
- Hur beräknas nivåerna? — Varje nivå blandar grundfärgen med vitt eller svart i proportionerna 10%, 30%, 50%, 70% och 90%, vilket ger konsekventa visuella steg.
- Kan jag få CSS-variabler från detta? — Utdata är hexkoder. Du kan klistra in dem i din CSS som --color-500, --color-400 osv.