Generator för toner och nyanser
21 färger
#ffffffrgb(255, 255, 255)#ebf3fergb(235, 243, 254)#d8e6fdrgb(216, 230, 253)#c4dafcrgb(196, 218, 252)#b1cdfbrgb(177, 205, 251)#9dc1fbrgb(157, 193, 251)#89b4fargb(137, 180, 250)#76a8f9rgb(118, 168, 249)#629bf8rgb(98, 155, 248)#4f8ff7rgb(79, 143, 247)#3b82f6rgb(59, 130, 246)#3575ddrgb(53, 117, 221)#2f68c5rgb(47, 104, 197)#295bacrgb(41, 91, 172)#234e94rgb(35, 78, 148)#1e417brgb(30, 65, 123)#183462rgb(24, 52, 98)#12274argb(18, 39, 74)#0c1a31rgb(12, 26, 49)#060d19rgb(6, 13, 25)#000000rgb(0, 0, 0)Tekniska detaljer
Så fungerar generatorn för nyanser och skuggor
Vad verktyget gör
Generatorn för nyanser och skuggor skapar ljusare nyanser (blandade med vitt) och mörkare skuggor (blandade med svart) från valfri basfärg. Ange en färg och välj antalet steg för att generera en mjuk gradient av variationer. Varje steg visar HEX- och RGB-värden samt blandningsprocenten, vilket gör det enkelt att bygga konsekventa färgskalor för UI-design, varumärkesprofilering och datavisualisering.
Vanliga användningsfall för utvecklare
Utvecklare använder generatorer för nyanser och skuggor när de bygger skalor för designtokens (t.ex. blue-100 till blue-900), skapar hover- och active-tillstånd för interaktiva element, designar tillgängliga färghierarkier och tar fram konsekventa bakgrunds- och ytfärger för ljusa och mörka teman. Verktyget är viktigt för att bygga anpassade färgpaletter för Tailwind CSS eller färgsystem enligt Material Design.
Så fungerar nyanser och skuggor
En nyans skapas genom att blanda en färg med vitt, vilket ökar dess ljushet. En skugga skapas genom att blanda med svart, vilket minskar ljusheten. Formeln för nyanser är: new = base + (255 - base) × factor. För skuggor: new = base × (1 - factor). Stegen fördelas jämnt mellan basfärgen och rent vitt (nyanser) eller rent svart (skuggor), vilket ger en linjär gradient av färgvärden.
Vanliga fallgropar och specialfall
Linjär blandning med vitt eller svart kan ge urvattnade nyanser eller grumliga skuggor för vissa kulörer. Gult kan se grönaktigt ut när det mörkas, och blått kan tappa livfullhet när det ljusas upp. För perceptuellt jämna skalor, överväg att använda färgrymderna OKLCH eller CIELAB. Verifiera alltid att dina ljusaste nyanser och mörkaste skuggor har tillräcklig kontrast mot sina avsedda bakgrunder.
När du ska använda det här verktyget jämfört med kod
Använd det här webbläsarverktyget för snabb utforskning och för att generera färgskalor under designarbete. För produktionsklara designsystem, generera nyanser och skuggor programmatiskt med färgbibliotek som chroma.js eller culori som stödjer perceptuellt jämna färgrymder och kan exportera designtokens i valfritt format.