1000 Outils

Générateur de palette Material Design

Créez une palette Material Design complété en un instant. Entrez une couleur de base et obtenez automatiquement les 10 nuances (de 50 à 900) conformes aux specifications Google Material Design. Chaque couleur est copiable en un clic au format HEX, prête pour vos projets Flutter, Angular Material ou tout framework moderne.

Palette Material Design

CSS Custom Properties

--md-50: #E4F2FE;
--md-100: #BCE0FB;
--md-200: #90CBF9;
--md-300: #64B6F7;
--md-400: #42A6F5;
--md-500: #2196F3;
--md-600: #1D83D3;
--md-700: #1769AA;
--md-800: #125183;
--md-900: #0D395C;

Qu'est-ce que Material Design ?

Material Design est le système de design créé par Google en 2014. Il définit des règles précises pour les couleurs, la typographie, les animations et les composants d'interface. Chaque couleur Material Design se decline en 10 nuances numérotees de 50 (la plus claire) à 900 (la plus foncee), avec la nuance 500 comme couleur de référence. Ce système permet de créer des interfaces coherentes et harmonieuses avec des niveaux de hierarchie visuels clairs.

Comment sont calculees les nuances ?

Notre algorithme analyse votre couleur de base et généré les 10 nuances en ajustant la luminosité et la saturation selon les specifications Material Design. Les teintes claires (50-200) sont obtenues en melangeant la couleur avec du blanc, tandis que les teintes sombres (600-900) sont obtenues en melangeant avec du noir. La saturation est légèrement ajustee pour maintenir la vivacite des couleurs à chaque niveau. Le résultat est une palette équilibrée et professionnelle.

Utiliser votre palette Material Design

La palette générée est directement utilisable dans Angular Material, Flutter, MUI (React), Vuetify et tout framework qui suit les specifications Material Design. Vous pouvez copier les codes HEX individuellement ou exporter toute la palette. Les nuances 50-200 sont ideales pour les arriere-plans, 300-500 pour les éléments interactifs et les boutons, et 600-900 pour le texte et les icones sur fond clair.

Questions fréquentes

Outils similaires