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%)
Over deze tool
De Kleurenpalet-extractor genereert een 10-stappenschaal voor ontwerpsystemen van elke basiskleur, overeenkomend met de 50–900 tintenconventies die worden gebruikt door Tailwind CSS, Material Design en soortgelijke frameworks.
Elk kleurenstaal in de gegenereerde schaal toont zijn hex-, RGB- en HSL-waarden. De tekstkleur past zich automatisch aan naar wit of donker op basis van luminantie.
Hoe te gebruiken
- Kies een basiskleur met de kleurpicker of typ een hex-waarde.
- De 10-stappenschaal (50–900) wordt onmiddellijk gegenereerd, het volledige helderheidsbereik dekkend.
- Gebruik hex-, RGB- of HSL-waarden in uw ontwerpsysteem of CSS-variabelen.
Gebruiksscenario's
Ontwerpsysteemteams genereren volledige kleurenschalen als Tailwind-configuratie-uitbreidingen of aangepaste CSS-eigenschappen. Frontend-ontwikkelaars bouwen toegankelijke UI-componenten.
Veelgestelde vragen
- Hoe verschilt deze schaal van "tinten" in andere hulpmiddelen? — Dit hulpmiddel genereert een vaste 10-stappenschaal (50, 100, 200, … 900) verankerd op specifieke helderheidswaarden, overeenkomend met gangbare ontwerpsysteemconventies.
- Beïnvloedt het wijzigen van verzadiging de schaal? — De verzadiging van uw basiskleur blijft behouden op alle stappen — alleen de helderheid verandert.
- Kan ik deze kleuren direct gebruiken in Tailwind CSS? — Ja. Kopieer de hex-waarden van elk tintniveau en voeg ze toe aan tailwind.config.js onder theme.extend.colors met de tintnummers als sleutels.