De standaard voor moderne CSS-gradienten
Een gedetailleerd overzicht van de editor, exportmogelijkheden, API-toegang en teamfuncties die KleurFlow onderscheiden.
KleurFlow is gebouwd voor designers, developers en teams die geen compromis willen sluiten tussen creativiteit en technische precisie. Onderstaande functionaliteiten vormen de kern van het platform — van visuele editor tot productieklare code.
Editor
Visuele gradient-editor met pixelperfect controle
Multi-stop color picker
Voeg tot 12 kleurstops toe per gradient. Elke stop ondersteunt HEX, RGB, HSL en LAB-kleurnotatie met real-time conversie. Kleurharmonie-suggesties op basis van NCS en Pantone-referenties.
Richting & hoekregeling
Sleep een visuele kompasnaald of voer exacte graden in (0–360°). Ondersteuning voor linear, radial, conic en repeating-varianten. Voorschouw wordt gerenderd in 60fps via WebGL.
Layerview & compositie
Stack meerdere gradient-lagen met onafhankelijke blend-modes (multiply, screen, overlay, soft-light). Per laag instelbare opaciteit en clip-path. Exporteert als geneste CSS of geoptimaliseerde single-rule.
Animatie-bouwsteen
Genereer CSS keyframes voor animerende gradienten — shifting stops, roterende hoeken of pulsating radial centers. Stel duration, easing en iteration-count in via een visuele timeline. Output: kant-klare @keyframes + animation property.
Export
Exporteer naar elk formaat, direct klaar voor productie
CSS (inline, class, variable)
Kies tussen inline style, benoemde class of CSS custom property. Automatische vendor-prefixes voor -webkit- en -moz-. Gecomprimeerde en leesbare output. Ondersteunt CSS Houdings- en container queries wanneer van toepassing.
SVG & PNG
Export als schaalbaar SVG met ingebedde
Tailwind & Framework-config
Genereer een Tailwind config-uitbreiding met benoemde gradient-utilities. Ook beschikbaar als SCSS-mixins of styled-components template literals. Eén klik naar je clipboard.
Color-palette export
Extract alle gebruikte kleuren naar een georganiseerde palette: HEX, RGB, HSL, CMYK en WCAG-contrast scores. Export als JSON, ADE (Adobe ASE) of direct naar Style Dictionary.
API & Integraties
Programmatief toegang voor developers
REST API v2
Genereer, opslaan en ophalen van gradient-configuraties via een RESTful endpoint. JSON request/response. Rate limit: 1.000 calls/uur op Standard, 10.000/uur op Enterprise. Webhook-ondersteuning voor real-time sync.
NPM-pakket @kleurflow/core
Headless JavaScript-bibliotheek (8kb gzipped) voor gradient-generatie in Node.js of browser. Functies: kleur-interpolatie, gradient-string parsing, contrast-berekening en SVG-rendering. Documentatie op docs.kleurflow.dev.
Figma & Sketch plugin
Sync gradienten tweerichtingsverkeer tussen KleurFlow en je design tool. Pas een gradient aan in Figma, zie het direct updaten in de editor — en omgekeerd. Ondersteunt Figma Variables en Sketch Symbols.
CI/CD integratie
Koppel je pipeline via GitHub Actions of GitLab CI. Laat gradient-configuraties valideren op contrast-ratio's, bestandsgrootte en browser-compatibiliteit voordat ze naar productie gaan. Fail-fast reporting.
Team & Samenwerking
Werken in team, zonder chaos
Gedeelde werkruimten
Maak projectgebonden workspaces aan met eigen gradient-bibliotheken, style guides en export-instellingen. Rollen: Owner, Editor, Viewer. Tot 200 teamleden per workspace op het Enterprise-plan.
Versiebeheer & rollback
Elke wijziging wordt automatisch gelogd met timestamp, auteur en diff-overzicht. Roll terug naar eerdere versies met één klik. Versiegeschiedenis behouden voor 12 maanden (Standard) of onbeperkt (Enterprise).
Commentaar & annotaties
Plaats contextuele commentaren op specifieke kleurstops, lagen of export-instellingen. @meld teamleden, koppel tickets (Jira, Linear, GitHub Issues) en markeer discussies als opgelost.
SSO & auditlogs
Single Sign-On via SAML 2.0 of OAuth 2.0 (okta, Azure AD, Google Workspace). Uitgebreide auditlogs voor compliance: wie heeft wat gewijzigd, wanneer en vanuit welk IP-adres. Exporteerbaar naar SIEM-systemen.
Vergelijking
KleurFlow versus de concurrentie
Hoe staat KleurFlow er tegenover andere gradient-tools? Onderstaande tabel vergelijkt de kernfunctionaliteiten op basis van publicly beschikbare informatie en onafhankelijke tests (peildatum: maart 2025).
| Functionaliteit | KleurFlow | CSS Gradient (CSS3.info) | Gradientise | WebGradients |
|---|---|---|---|---|
| Max. kleurstops per gradient | 12 | 3 | 5 | — (vooraf gedefinieerd) |
| Gradient-types | Linear, Radial, Conic, Repeating | Linear | Linear | Linear |
| CSS-variabelen export | ✓ | ✗ | ✗ | ✗ |
| Tailwind-config generator | ✓ | ✗ | ✗ | ✗ |
| Animatie-keyframes generator | ✓ | ✗ | ✗ | ✗ |
| REST API | ✓ (v2) | ✗ | ✗ | ✗ |
| NPM-pakket | ✓ (@kleurflow/core) | ✗ | ✗ | ✗ |
| Figma / Sketch plugin | ✓ | ✗ | ✗ | ✗ |
| Team-workspaces | ✓ (tot 200 leden) | ✗ | ✗ | ✗ |
| Versiebeheer & rollback | ✓ | ✗ | ✗ | ✗ |
| WCAG contrast-checker | ✓ (AA & AAA) | ✗ | ✗ | ✗ |
| Batch-export (ZIP) | ✓ | ✗ | ✗ | ✗ |
| Gratis plan beschikbaar | ✓ (beperkt) | ✓ | ✓ | ✓ |
Bronnen: eigen tests uitgevoerd op 14 maart 2025. Functionaliteiten van concurrenten gebaseerd op hun respectievelijke websites en publicaties. Specificaties kunnen wijzigen; raadpleeg de bronnen voor de meest actuele informatie.
Klaar om te beginnen met kleurwerk?
Maak een gratis account aan en ontdek de editor, of bekijk onze tarieven voor team- en enterprise-teams.