Tint- en schaduwschaal-generator
Maak van één merkkleur een 50-900 designsysteemschaal — tien tinten en schaduwen met hexcodes, klik om te kopiëren.
739 weergaven
Klik op een kleurvlak om de hexcode te kopiëren
Van één kleur naar een systeem
Designsystemen (Tailwind, Material) leveren nooit één merkkleur — ze leveren een schaal van 50 (bijna wit) tot 900 (bijna zwart), met de merkkleur rond 500. Lichte stappen (tints) mengen de basis richting wit, donkere stappen (shades) richting zwart. Deze generator produceert de tien standaardstappen met hexcodes en CSS-variabelen; klik op een kleurvlak om te kopiëren.
Zo wordt de schaal gebruikt: 50-100 voor achtergronden en hover-vlakken, 200-300 voor randen, 500-600 voor knoppen en links, 700-900 voor tekst op lichte achtergrond. Stappen uit dezelfde schaal combineren houdt de UI harmonieus, en stappen ≥700 op ≤100 halen meestal WCAG-contrast — controleer het exacte paar met onze contrastchecker.
Veelgestelde vragen
Waarom oogt mijn felle kleur vaal in lichte tinten?
Mengen richting puur wit vermindert verzadiging — dat is gewenst voor achtergronden. Wilt u levendigere tinten, maak de basiskleur dan wat verzadigder voordat u genereert.
Waar moet mijn merkkleur op de schaal staan?
Mik op 500-600. Is uw merkkleur erg licht of donker, plaats hem dan op de stap die bij zijn helderheid past; de generator vult beide richtingen aan.
Zijn dit dezelfde waarden als bij Tailwind?
Niet identiek — Tailwind-paletten zijn per kleurtoon handmatig afgesteld. Deze schaal gebruikt een consistente menging, wat voorspelbaar is voor eigen merkkleuren en dicht genoeg bij echte projecten.
Vergelijkbare tools
Probleem melden
Tint- en schaduwschaal-generator