Home / Kleurtools / CSS Gradient Generator
Gratis online tools

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

Invoer

#2563EB → #EC4899, 5 kleuren

Resultaat

#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.