Generator för Nyanser och Skuggor
Generera automatiskt de ljusaste nyanser och mörkaste skuggorna av valfri färg, tillsammans med dess HEX-kod.
Hur man genererar nyanser och skuggor från en färg
Välj en basfärg
Välj startfärgen med den visuella väljaren eller skriv dess HEX-kod.
Se nyanser och skuggor
Du ser automatiskt 5 ljusare nyanser (tints) och 5 mörkare skuggor genererade från din färg.
Kopiera HEX-koden du behöver
Klicka på valfri färgruta för att kopiera dess HEX-kod till urklipp.
Vanliga frågor om generatorn för nyanser och skuggor
Att ha ljusare och mörkare varianter av en färg är avgörande för att skapa en sammanhängande designpalett (till exempel för hover-tillstånd, bakgrunder eller gränser). Det här verktyget beräknar dem automatiskt.
Vad är skillnaden mellan en nyans (tint) och en skugga (shade)?
+
En ton skapas genom att blanda färgen med vitt (ljusare) och en skugga genom att blanda den med svart (mörkare).
Hur många varianter genereras?
+
Det genererar 5 ljusare toner och 5 mörkare skuggor från din basfärg, 10 totalt.
Kan jag kopiera koderna?
+
Ja, klicka på valfri färg i listan för att kopiera dess HEX-kod.
Kan det användas för att skapa en designpalett som Tailwind?
+
Ja, det är exakt samma koncept som färgskalan 50-900 som många designsystem använder.
Är det gratis?
+
Ja, det här verktyget är helt kostnadsfritt.
Överförs min färg till någon server?
+
Nej, all beräkning görs direkt i din webbläsare.
Färger
Färgkonverterare (HEX, RGB, HSL, CMYK)
Konvertera färger mellan HEX, RGB, HSL och CMYK direkt, med liveförhandsvisning och närmaste färgnamn.
Färgpalettgenerator
Skapa harmoniska färgpaletter med 5 färger (komplementära, analoga, triadiska eller monokromatiska) från en basfärg.
CSS-gradientgenerator
Skapa linjära eller radiella gradienter med upp till 4 färger och kopiera den färdiga CSS-koden.
WCAG-kontrastkontroll
Kontrollera om färgkombinationen mellan text och bakgrund uppfyller tillgänglighetsniväerna AA och AAA.
Slumpmässig färg
Generera en slumpmässig färg med ett klick och upptäck dess namn, HEX/RGB/HSL-kod och liknande färger.
Färgväljare (pipett)
Välj vilken färg som helst från din skärm med webbläsarens pipettverktyg, eller använd den klassiska färgväljaren.
Färgblindhetssimulator
Ladda upp en bild och se hur personer med protanopi, deuteranopi eller tritanopi skulle uppfatta den.
Mesh Gradient Generator
Skapa bakgrunder med mesh-gradienter (mjukt utfärgade färgfläckar) och ladda ner dem som PNG eller kopiera CSS-koden.
Färgblandare
Blanda två färger och upptäck mellantonerna steg för steg med deras HEX-kod.
Färghjul (Harmonier)
Välj en färg på hjulet och upptäck dess harmoniska kombinationer: komplementära, analoga, triadiska och mer.
Färgpalettextraktor från Bild
Ladda upp en bild och extrahera automatiskt dess dominanta färger i en palett, med HEX-kod för var och en.
Genomsnittlig Färg för en Bild
Ladda upp en bild och beräkna omedelbar dess genomsnittliga färg, med dess HEX-, RGB- och HSL-kod.
Utforska färger efter familj
Över 469 namngivna färger, med deras HEX-, RGB-, HSL- och CMYK-koder, organiserade i 12 färgtonfamiljer.
