UI Kleuren
Genereer harmonieuze kleurenschalen voor interface design met automatische contrastberekening en directe export naar Tailwind CSS.
Designcollecties voor gebruikersinterfaces
Essentieel UI Studio
Citrus & Neon
Hedendaags Pastel
Boutique & Specerijen
Nordic Minimal
Stille Oceaan & Gletsjer
Oceaan & Zonsondergang
Schemering & Fluweel
Haute Couture Atelier
Aarde & Vuur
Industrieel Bauhaus
Zijde & Keizerlijk Jade
Silicon Pop Digital
Metropool & Royalty
Obsidiaan & Digitaal Neon
Terminal & Smaragdcode
Cupertino & Glassysteem
Aurora & Digitaal Verloop
Hoe complete UI-kleurenschalen (50-950) te genereren voor Tailwind CSS
Bij het bouwen van een design system heeft u aan één enkele merkkleur niet genoeg: u heeft lichte tinten nodig voor achtergronden (50, 100), middentonen voor randen en iconen (300, 400), de hoofdkleur voor knoppen (500, 600) en diepe donkere tinten voor tekst en actieve staten (800, 900, 950).
Voer simpelweg uw basis HEX-kleur in en deze generator berekent automatisch een harmonieuze 10-staps kleurenschaal op basis van perceptuele kleurruimten (OKLCH). Exporteer de code met één klik als Tailwind CSS-configuratie of CSS-variabelen.
Vergelijking voor en na
Bekijk het verschil in bestandsgrootte, beeldscherpte en snelheid.
#3B82F6
Geen bijpassende lichte of donkere tinten
- •Ontwikkelaars gokken zelf willekeurige lichte en donkere varianten.
- •Gebrek aan contrastconsistentie tussen knoppen, randen en achtergronden.
- •Tijdrovend handmatig coderen in Tailwind-configuraties.
50 tot 950 Schaal
Wiskundig berekende stappen met consistente luminantie
- ✓Direct klaar om in te voegen in `tailwind.config.js` of globale CSS.
- ✓Gegarandeerde contrastverhoudingen tussen opeenvolgende stappen.
- ✓Ondersteunt zowel lichte als donkere modus zonder kleurverschuiving.
Toepassingen voor UI-kleurenschalen
Design Systems en Componenten
Creëer een consistente kleurhiërarchie voor knoppen, invoervelden, meldingen en achtergronden.
Tailwind CSS Projecten
Genereer kant-en-klare themakleuren die naadloos werken met klassen zoals `bg-brand-50`, `text-brand-900` en `hover:bg-brand-600`.
Donkere Modus (Dark Mode)
Gebruik de 900 en 950 stappen voor rustgevende donkere interfaces en de 50 stappen voor leesbare tekst.
Veelgestelde vragen over UI-kleurenschalen
OKLCH is afgestemd op de menselijke waarneming van helderheid (perceptuele uniformiteit). Hierdoor behouden alle stappen dezelfde waargenomen zuiverheid zonder flets of modderig te worden.
Kopieer de gegenereerde JSON-structuur en plak deze onder `theme.extend.colors` in uw bestand `tailwind.config.js`.