Color Palette Generator
Generate a complete 10-shade color palette from any base color in Tailwind CSS style.
50#f0f6fergb(240, 246, 254)hsl(217, 91%, 97%)
100#dde9fdrgb(221, 233, 253)hsl(217, 91%, 93%)
200#b6d1fcrgb(182, 209, 252)hsl(217, 91%, 85%)
300#7bacf9rgb(123, 172, 249)hsl(217, 91%, 73%)
400#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
500#3c83f6rgb(60, 131, 246)hsl(217, 91%, 60%)
600#0b60eargb(11, 96, 234)hsl(217, 91%, 48%)
700#094cb9rgb(9, 76, 185)hsl(217, 91%, 38%)
800#063888rgb(6, 56, 136)hsl(217, 91%, 28%)
900#042458rgb(4, 36, 88)hsl(217, 91%, 18%)
Om det här verktyget
Färgpalettextraktorn genererar en 10-stegsskala för designsystem från vilken grundfärg som helst, enligt konventionerna för nyanser 50–900 som används av Tailwind CSS, Material Design och liknande ramverk.
Varje prov i den genererade skalan visar sina hex-, RGB- och HSL-värden. Textfärgen justeras automatiskt till vit eller mörk baserat på luminans.
Hur man använder
- Välj en grundfärg med färgväljaren eller skriv ett hex-värde.
- 10-stegsskalan (50–900) genereras omedelbart och täcker hela ljushetsintervallet.
- Använd hex-, RGB- eller HSL-värden i ditt designsystem eller CSS-variabler.
Användningsfall
Designsystemteam genererar fullständiga färgskalor som Tailwind-konfigurationsutökningar eller anpassade CSS-egenskaper. Frontend-utvecklare bygger tillgängliga UI-komponenter.
Vanliga frågor
- Hur skiljer sig denna skala från "nyanser" i andra verktyg? — Det här verktyget genererar en fast 10-stegsskala (50, 100, 200, … 900) förankrad vid specifika ljushetsvärden, i linje med vanliga designsystemkonventioner.
- Påverkar förändring av mättnad skalan? — Mättnaden hos din grundfärg bevaras på alla steg — bara ljusheten förändras.
- Kan jag använda dessa färger direkt i Tailwind CSS? — Ja. Kopiera hex-värdena från varje nyanssnivå och lägg till dem i tailwind.config.js under theme.extend.colors med nyanssnumren som nycklar.