RGB-kleurverloopgenerator
Maak een reproduceerbaar kleurverloop, bekijk elke gegenereerde stop en kopieer de exacte HEX-reeks voor CSS, grafieken of design tokens.
Aan de slag
RGB-kleurverloopgenerator
Maak een reproduceerbaar kleurverloop, bekijk elke gegenereerde stop en kopieer de exacte HEX-reeks voor CSS, grafieken of design tokens.
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, #575CD7, #8956C2, #BA4FAE, #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 flets uitzien tussen sommige complementaire kleuren.
- Een vloeiend ogend palet is niet automatisch toegankelijk voor mensen met kleurenblindheid.
- Deze generator produceert gelijkmatig verdeelde RGB-kleuren; het claimt geen perceptuele uniformiteit.
Veelgestelde vragen
Waarom kan het midden er grijs of flets 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.
Het aantal omvat beide eindpunten en is standaard 10. Decimalen worden afgekapt en het aantal wordt begrensd op 2–100. De panelen bieden HEX, RGB, HSV en HSL; de interpolatie gebruikt altijd gecodeerde RGB-kanalen, afgerond op gehele getallen. De voorvertoning staat vast op 90°. Extra kleurstops, alfa en kleurkeuze in een andere ruimte ontbreken. Uitvoer: één HEX per regel, geen CSS-code of afbeeldingsdownload.
De verwerking gebeurt lokaal in je browser.