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

Volgende: kies een tint

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

LEGO-mozaïek maken

Maak van je foto een mozaïekplan van 16 × 16, 32 × 32 of 48 × 48 vakjes. Bekijk benaderde kleuren, tel 1×1-plaatjes en download een genummerd bouwschema.

Muziekpapier met notenbalken maken

Maak leeg muziekpapier met notenbalken van vijf lijnen. Kies het aantal balken, de lijnafstand, het papierformaat, de marges en eventueel een G- of F-markering. Download als pdf of SVG.

Contactblad maken

Rangschik foto’s op afdrukbare A4- of Letter-contactbladen met bijschriften en voorvertoning en download JPEG-pagina’s of een pdf.

Ruitjespapier-generator

Maak online afdrukbaar ruitjespapier: kies een ruit- of stippenraster, stel de afstand in mm in, kies A4 of Letter en een eigen lijnkleur, en print of download een strak SVG-bestand.

Gelinieerd papier generator

Maak gratis afdrukbaar gelinieerd papier. Kies college-, brede of smalle liniëring, stel de regelafstand in mm, het papierformaat en een kantlijn in, en druk af of download de SVG.

Instagram-grid-splitter

Verdeel een brede afbeelding in een 3×3 Instagram-grid, of in een willekeurig aantal rijen. De tegels zijn genummerd, zodat je ze eenvoudig in omgekeerde volgorde kunt uploaden.

Tool beschikbaar in andere talen