Material-paletgenerator
Maak tonale paletten volgens Material Design 3 uit één kleur, zoals Material You dat doet: primair, secundair, tertiair, neutraal, neutrale variant en fout, elk in 13 tonen van 0 tot 100. Gebouwd op material-color-utilities, de eigen code van Google. Kopieer alles als CSS-variabelen. Gratis en online.
Zo maak je een Material 3-kleurenpalet
- 1Typ je "Bronkleur" of kies hem met de kleurkiezer
- 2Bekijk de zes tonale paletten van elk 13 tonen
- 3Kopieer één toon, of klik op "Alles kopiëren als CSS-variabelen"
- 78 tonen als HEX, klaar om te plakken als CSS-variabelen
Wat je krijgt
- De eigen code van Google.material-color-utilities, de bibliotheek achter Material You en Material 3
- Zes paletten, 13 tonen.De tonen 0, 10 tot 90, 95, 99 en 100 voor elk van de zes basiskleuren
- Elke kleurnotatie.Typ #hex, rgb(), hsl(), oklch() of een CSS-naam, of gebruik de kleurkiezer
Wat je kunt doen
- Van één bronkleur de zes tonale paletten van Material Design 3 maken: Primair, Secundair, Tertiair, Neutraal, Neutrale variant en Fout
- De tonen 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99 en 100 van elk palet zien, met HEX-code en kopieerknop
- Alle 78 tonen kopiëren als CSS-variabelen met namen zoals de tokens van Material, bijvoorbeeld --md-ref-palette-primary40
- De bronkleur typen als #hex, rgb(), hsl(), lab(), oklch() of CSS-kleurnaam, of kiezen met de kleurkiezer
Goed om te weten
- De toon is de lichtheid: 0 is zwart, 100 is wit. De paletten worden berekend in HCT, de kleurruimte van Google
- Het primaire palet houdt je tint, maar krijgt een verzadiging van minstens 48. Een grijzige bronkleur wordt daar dus kleurrijker
- Secundair houdt de tint met weinig verzadiging, tertiair draait de tint 60 graden, en het foutpalet is voor elke bronkleur hetzelfde rood
- De tool maakt de tonale paletten, geen volledig thema met rollen zoals onPrimary of surface
Vragen
Wat is een tonaal palet in Material Design 3?
Eén kleur in een reeks lichtheidsstappen, van toon 0 (zwart) tot toon 100 (wit). Material 3 bouwt zijn kleurrollen uit tonen van zes van zulke paletten.
Gebruikt de tool het officiële kleuralgoritme van Material?
Ja. De paletten komen uit material-color-utilities van Google, de code die Material You gebruikt, hier in je browser. Je bronkleur wordt nergens heen gestuurd.
Hoe gebruik ik het palet in CSS?
Klik op "Alles kopiëren als CSS-variabelen" en plak het :root-blok in je stylesheet. Daarna gebruik je een toon bijvoorbeeld met var(--md-ref-palette-primary40).
Waarom is mijn primaire palet kleurrijker dan mijn kleur?
Material 3 geeft het primaire palet een verzadiging van minstens 48. Een zachte of grijzige bronkleur wordt daar krachtiger, terwijl de tint gelijk blijft.
Meer tools in Web en code
Deze pagina bestaat niet. Zoek hieronder of sleep een bestand hierheen om de tool te vinden die je nodig hebt.
Eén site voor elke bestandsklus. Wat is de jouwe?
Stop met hoppen tussen convertersites. Kies uit 410+ tools, of een recipe die er meerdere achter elkaar zet.
- Bestanden blijven op je apparaat
- Geen watermerk
- Werkt offline
Sleep een bestand hierheen
Een geplakt bestand werkt ook.
of zoek een tool
Open een app
Van ‘ugh, dit bestand’ naar klaar, in drie stappen.
- Sleep het erin, of kies een taak
Geen bestand? Zoek wat je nodig hebt. Bestanden worden op je eigen apparaat verwerkt, niet geüpload voor verwerking.
- Kies wat je wilt
Kleiner, een ander formaat, ondertekend, samengevoegd. Eén klik, zonder eerst instellingen te bestuderen.
- Maak er een recept van
Elke week dezelfde drie stappen? Zet ze één keer achter elkaar en voer de volgende keer hetzelfde recept uit.
Eén goedgekeurde gereedschapskist voor het hele team.
Op kantoor, op de bouwplaats of bij een bureau: teams werken de hele dag met vertrouwelijke bestanden. ToolRecipe geeft iedereen dezelfde tools en dezelfde recepten, en de bestanden worden verwerkt op ieders eigen computer.
- Bestanden worden verwerkt op het apparaat van de medewerker
- Bedrijfsrecepten die iedereen op dezelfde manier uitvoert
- Eén plek in plaats van tien converteersites