Elphinstone
Alle tools

Kleurenpalet Generator

Kies 1 brandkleur en genereer een compleet kleurensysteem met WCAG contrastverhoudingen. Exporteer als CSS, Tailwind of hex.

•
Kleurenpalet Generator

Exporteer

:root {
  --primary: #6D28D9;
  --primary-foreground: #ffffff;
  --secondary: #b853c6;
  --accent: #91cc33;
  --background: #faf9fa;
  --card: #ffffff;
  --foreground: #141117;
  --muted: #efeef2;
  --muted-foreground: #70677e;
  --border: #e0dde3;
}

Waarom een consistent kleurenpalet belangrijk is

Een goed kleurenpalet is de ruggengraat van je visuele identiteit. Het zorgt voor herkenning, professionaliteit en consistentie over alle touchpoints. Van website tot visitekaartje, van social media tot app.

Maar een kleurenpalet maken is meer dan willekeurig kleuren kiezen. Je hebt harmonieuze verhoudingen nodig, voldoende contrast voor leesbaarheid, en varianten voor verschillende toepassingen.

Hoe deze generator werkt

Je kiest één brandkleur. De generator maakt vervolgens automatisch een compleet kleurensysteem met:

  • Primaire kleur: je gekozen brandkleur, voor belangrijke elementen
  • Secundaire kleur: een complementaire tint voor variatie
  • Accentkleur: een opvallende kleur voor call-to-actions
  • Achtergrond en card kleuren: subtiele varianten voor structuur
  • Tekstkleuren: optimaal leesbaar op je achtergronden
  • Borders en muted tinten: voor subtiele scheiding

Light en dark mode

Moderne websites ondersteunen vaak zowel light als dark mode. Het is niet genoeg om simpelweg kleuren om te draaien. Je hebt aparte, doordachte kleurwaarden nodig voor elke modus.

Deze generator maakt voor beide modi een geoptimaliseerd palet. De dark mode kleuren zijn niet zomaar inversies, maar zorgvuldig afgestemd op leesbaarheid in donkere omgevingen.

Contrastverhoudingen begrijpen

Bij elke kleur zie je een contrastverhouding. Dit getal toont het contrast tussen die kleur en de achtergrond. WCAG richtlijnen vereisen:

  • 4.5:1 of hoger (groen): uitstekend voor normale tekst
  • 3:1 tot 4.5:1 (geel): acceptabel voor grote tekst en UI-elementen
  • Onder 3:1 (rood): onvoldoende voor tekst, alleen decoratief gebruiken

Exporteren en gebruiken

Je kunt het gegenereerde palet exporteren in drie formaten:

  • CSS variabelen: direct plakken in je stylesheet
  • Tailwind config: voor Tailwind CSS projecten
  • Hex waarden: voor gebruik in designtools zoals Figma

Klik op een individuele kleur om de hex-waarde direct te kopiëren.

Zelf zoiets laten bouwen?

Deze tool is gebouwd met HSL manipulatie, WCAG algoritmes. Ik bouw dit soort tools en platforms voor ondernemers. Laten we sparren over jouw idee.

Neem contact opBekijk projecten

Vond je deze tool handig?

Deel hem met je netwerk en help andere ondernemers

Gratis tool van Elphinstone — Ik bouw tools en platforms voor ondernemers