Softonic

Material Design-kleurkiezer

Stap 1 / 3 Kies een kleurenfamilie

Vast Material Design-palet uit 2014 (Material Design 2). Material 3 gebruikt in plaats daarvan gegenereerde toonpaletten.

Kies een kleurenfamilie

Red Pink Purple Deep Purple Indigo Blue Light Blue Cyan Teal Green Light Green Lime Yellow Amber Orange Deep Orange Brown Gray Blue Gray Black White

Het Material Design-palet bevat 19 kleurfamilies, van Rood, Roze en Paars tot Grijs en Blauwgrijs, elk met een verloop van tint 50 (bleek) tot 900 (bijna zwart), plus optionele accenttinten A100–A700. Deze kiezer toont elke kleurstaal in een raster en laat je elke waarde kopiëren als HEX, RGB, HSL of Material-tokennaam voor gebruik in Tailwind, CSS-variabelen, iOS UIColor of Android-kleurbronnen.

Zo gebruik je het palet

  1. 1

    Scan het raster

    De families staan verticaal aan de linkerkant; de tinten lopen bovenaan van 50 tot 900.

  2. 2

    Tik op een kleurstaal

    Bekijk HEX, RGB, HSL en de standaard Material-tokennaam (bijvoorbeeld Indigo 500).

  3. 3

    Kopieer het gewenste formaat

    Met één klik wordt de exacte tekenreeks gekopieerd: `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Controleer het contrast

    Het paneel toont de WCAG-contrastverhouding tegen wit en zwart om toegankelijke tekstkleuren te kiezen.

De tintenladder

Tint Gebruik
50 Hover-achtergronden, bleke oppervlakken
100 Chip-achtergronden, vullingen met weinig nadruk
200 Uitgeschakelde toestanden, secundaire oppervlakken
300 Randen, scheidingslijnen
400 Secundaire tekst op lichte achtergronden
500 Standaard-/primaire kleur, de basis
600 Interactieve toestanden (hover, ingedrukt)
700 Koppen, sterke nadruk
800 Donkere tekst op lichte achtergronden
900 Element met het hoogste contrast (bijna zwart)
A100 Licht accent
A200 Lichter accent dan standaard
A400 Accent (vaak het “heldere” merkaccent)
A700 Diep accent

Families in het Material-palet

Rood, Roze, Paars, Donkerpaars, Indigo, Blauw, Lichtblauw, Cyaan, Blauwgroen, Groen, Lichtgroen, Limoen, Geel, Amber, Oranje, Donkeroranje, Bruin, Grijs, Blauwgrijs.

Bruin, Grijs en Blauwgrijs hebben geen accenttinten, dit zijn de neutrale families.

Een primaire kleur kiezen

De specificatie stelt 500 voor als primaire kleur, 700 voor de donkere variant (gebruikt in de statusbalk op Android) en een A200- of A400-accent voor secundaire acties. Dit is een conventie, geen regel, het moderne Material 3 (dynamische kleur) leidt paletten af van één enkele basiskleur in plaats van uit vaste verlopen te kiezen.

Toegankelijkheidscontrole

  • Bodytekst: contrastverhouding ≥ 4,5:1 ten opzichte van de achtergrond (WCAG AA).
  • Grote tekst (18 pt+ vet of 24 pt+ normaal): ≥ 3:1.
  • UI-componenten en grafische objecten: ≥ 3:1.

Het palet is standaard niet contrastveilig. Geel 500 op wit zakt zwaar voor de WCAG-test. Controleer altijd de verhouding voordat je een combinatie uitbrengt, de kiezer toont dit direct.

Ondersteunde formaten

  • HEX: #3F51B5 (Indigo 500).
  • RGB: rgb(63 81 181) (moderne syntaxis) of rgb(63, 81, 181) (verouderd).
  • HSL: hsl(231 48% 48%).
  • Material-token: Indigo 500, handig voor ontwerpdocumenten en Figma.
  • Tailwind: indigo-500, plaats direct in een class-attribuut als jouw Tailwind-thema de Material-schaal gebruikt.
  • Android-kleur-XML: <color name="indigo_500">#FF3F51B5</color>, ARGB-formaat.
  • iOS UIColor: UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Veelgestelde vragen

Deze tool toont het vaste Material Design-palet dat Google in 2014 publiceerde en later op de Material Design 2-site documenteerde. De tool maakt geen Material 3-toonpaletten vanuit een bronkleur. Gebruik hem voor de klassieke genummerde tinten en accentkleuren.

Bruin, Grijs en Blauwgrijs zijn neutraal en doen niet mee aan accentkleurcombinaties. De specificatie laat A100–A700 voor deze kleuren eenvoudigweg weg.

Het standaardpalet van Tailwind is geïnspireerd op Material, maar niet identiek. Wil je exacte Material-kleuren, breid dan theme.extend.colors uit met de Material-waarden en verwijs ernaar als material-indigo-500 in je klassenamen.

De conventie zegt van wel, maar niets weerhoudt je ervan om 700 of een accent als primaire kleur te gebruiken. De 500-conventie draait om een betrouwbare basistint met 8 stappen in beide richtingen voor variatie.

Gerelateerde tools

PNG naar SVG vectoriseren

Trek PNG-rasterafbeeldingen in de browser over als SVG-paden. Ideaal voor logo’s, iconen en lijntekeningen. Regel drempelwaarde, aantal kleuren en afvlakking.

WebP naar PNG

Converteer WebP-afbeeldingen naar PNG met behoud van transparantie en pixelnauwkeurige kwaliteit voor bewerken, afdrukken en oudere ontwerptools.

GIF-maker

Zet een reeks afbeeldingen om in een geanimeerde GIF. Stel beeldsnelheid, kwaliteit en afmetingen in voor het exporteren.

Foto-editor

Browsergebaseerde foto-editor met bijsnijden, draaien, helderheid, contrast, verzadiging, filters, tekstoverlay en export naar JPG, PNG of WebP.

QR-codegenerator

Maak in uw browser een QR-code van tekst of een URL en download deze als PNG.

Barcodegenerator

Maak in de browser een 1D-barcode in Code 128, EAN, UPC, ITF-14 en andere ondersteunde formaten en download deze als SVG of PNG.