CSS Gradient Generator
Maak een reproduceerbaar kleurverloop, bekijk elke gegenereerde stop en kopieer de exacte HEX-reeks voor CSS, grafieken of design tokens. De verwerking gebeu…
Aan de slag
Wat deze tool voor je doet
Maak een reproduceerbaar kleurverloop, bekijk elke gegenereerde stop en kopieer de exacte HEX-reeks voor CSS, grafieken of design tokens.
Voorbeeld
#2563EB → #EC4899, 5 kleuren
#2563EB, #584EC0, #8A39A2, #BB2585, #EC4899
Hoe het resultaat tot stand komt
Elke tussenkleur wordt gemaakt door lineaire interpolatie van de rode, groene en blauwe kanalen. De eindpunten blijven behouden en de overige kleuren worden op gelijke afstanden geplaatst.
Handige toepassingen
- Maak geordende grafiekkleuren of heatmap-verlopen
- Bouw hover- en statuskleuren tussen twee design tokens
- Genereer een compact palet voor een achtergrondverloop
Belangrijke beperkingen
- RGB-interpolatie kan er donkerder of vies uitzien tussen sommige complementaire kleuren.
- Een vloeiend ogend palet is niet automatisch kleurenblind toegankelijk.
- Deze generator produceert gelijkmatig verdeelde RGB-kleuren; het claimt geen perceptuele uniformiteit.
Veelgestelde vragen
Waarom kan het midden er grijs of vies uitzien?
Tegenovergestelde RGB-kanalen kunnen naar een neutrale kleur neigen. Voeg een geschikte middenkleur toe in een multi-stop CSS-workflow als visuele levendigheid belangrijk is.
Hoeveel kleuren moet ik genereren?
Gebruik het kleinste aantal dat past bij de verschillende toestanden of databanden die je nodig hebt; voor doorlopende achtergronden kun je meer stappen gebruiken.
De verwerking gebeurt lokaal in je browser.