Material Design Kleurenpalet

Alle 19 kleurenfamilies met HEX-codes, CSS-variabelen en contrastcontrole. Klik op een kleur om te kopiëren.

CSS downloaden

{{ family.label }}

{{ color.shade }} {{ color.hex }} 
{{ usageExample }}
Witte tekst {{ whiteContrast.toFixed(1) }}:1
Zwarte tekst {{ blackContrast.toFixed(1) }}:1
{{ lastCopied.cssVar }}

Wat is het Material Design kleursysteem?

Google's Material Design kleursysteem bevat 19 kleurenfamilies, elk met 10 hoofdtinten (50, 100–900) en maximaal 4 accenttinten (A100–A700). Het biedt een consistente kleurtaal voor websites en apps.

Hoe gebruik je Material Design kleuren in CSS?

Download het CSS-bestand met alle variabelen en voeg het toe aan je project. Gebruik vervolgens de kleuren via CSS Custom Properties zoals var(--color-md-teal-500). Je kunt ook de HEX-codes direct gebruiken.

Tips voor kleurselectie

  • Kies een primaire kleur (bijv. Teal 500) en een accentkleur uit een andere familie.
  • Gebruik lichtere tinten (50–200) voor achtergronden en donkerdere (700–900) voor tekst.
  • Zorg voor voldoende contrast (minimaal 4.5:1) tussen tekst en achtergrond voor toegankelijkheid.
  • De 500-tint is de standaardrepresentatie van elke kleurenfamilie en ideaal als primaire kleur.