Softonic

Sélecteur de couleurs Material Design

Étape 1 / 3 Choisissez une famille de couleurs

Palette Material Design fixe de 2014 (Material Design 2). Material 3 utilise plutôt des palettes tonales générées.

Choisissez une famille de couleurs

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

La palette Material Design définit 19 familles de couleurs, Rouge, Rose, Violet à Gris et Bleu Gris, chacune avec une gamme de teintes de 50 (pâle) à 900 (près du noir), plus des teintes d’accent optionnelles A100–A700. Ce sélecteur présente chaque échantillon dans une grille et vous permet de copier n’importe quelle valeur en HEX, RGB, HSL ou nom de token Material à utiliser dans Tailwind, les variables CSS, UIColor d’iOS ou les ressources de couleur Android.

Comment utiliser la palette

  1. 1

    Scannez la grille

    Les familles sont disposées à gauche ; les teintes s'étendent en haut de 50 à 900.

  2. 2

    Touchez un échantillon

    Voir HEX, RGB, HSL et le nom de token Material canonique (par exemple, Indigo 500).

  3. 3

    Copiez le format dont vous avez besoin

    Un clic copie la chaîne exacte : `#3F51B5`, `rgb(63 81 181)`, `hsl(231 48% 48%)`.

  4. 4

    Vérifiez le contraste

    Le panneau affiche le ratio de contraste WCAG contre le blanc et le noir pour choisir des couleurs de texte accessibles.

L’échelle des teintes

Teinte Utilisation
50 Arrière-plans au survol, surfaces pâles
100 Arrière-plans de puces, remplissages à faible emphase
200 États désactivés, surfaces secondaires
300 Bordures, séparateurs
400 Texte secondaire sur arrière-plans clairs
500 Couleur par défaut / primaire, la référence
600 États interactifs (survol, pressé)
700 En-têtes, forte emphase
800 Texte foncé sur arrière-plans clairs
900 Élément à contraste maximal (près du noir)
A100 Accent clair
A200 Accent plus clair que le par défaut
A400 Accent (souvent le point fort “brillant” de la marque)
A700 Accent profond

Familles dans la palette Material

Rouge, Rose, Violet, Violet profond, Indigo, Bleu, Bleu clair, Cyan, Sarcelle, Vert, Vert clair, Citron vert, Jaune, Ambre, Orange, Orange profond, Marron, Gris, Bleu gris.

Marron, Gris et Bleu gris n’ont pas de teintes d’accent, ce sont les familles neutres.

Choisir un primaire

La spécification suggère 500 comme couleur primaire, 700 pour la variante plus foncée (utilisée dans la barre d’état sur Android), et un accent A200 ou A400 pour les actions secondaires. C’est une convention, pas une règle, le Material 3 moderne (couleur dynamique) dérive des palettes d’une seule couleur de base plutôt que de choisir parmi des rampes fixes.

Point de contrôle d’accessibilité

  • Texte principal : ratio de contraste ≥ 4.5:1 par rapport à son arrière-plan (WCAG AA).
  • Texte large (18 pt+ gras ou 24 pt+ régulier) : ≥ 3:1.
  • Composants UI et objets graphiques : ≥ 3:1.

La palette n’est pas sécurisée en termes de contraste par défaut. Jaune 500 sur blanc échoue gravement au WCAG. Vérifiez toujours le ratio avant de valider une combinaison, le sélecteur l’affiche en ligne.

Formats pris en charge

  • HEX : #3F51B5 (Indigo 500).
  • RGB : rgb(63 81 181) (syntaxe moderne) ou rgb(63, 81, 181) (héritée).
  • HSL : hsl(231 48% 48%).
  • Token Material : Indigo 500, pratique pour les documents de design et Figma.
  • Tailwind : indigo-500, à insérer directement dans un attribut de classe si votre thème Tailwind utilise l’échelle Material.
  • XML de couleur Android : <color name="indigo_500">#FF3F51B5</color>, format ARGB.
  • UIColor iOS : UIColor(red: 0.247, green: 0.318, blue: 0.710, alpha: 1.0).

Questions fréquentes

Cet outil reproduit la palette Material Design fixe publiée par Google en 2014, puis documentée sur le site Material Design 2. Il ne génère pas les palettes tonales de Material 3 à partir d’une couleur source. Utilisez-le pour les nuances numérotées et les couleurs d’accent classiques.

Marron, Gris et Bleu gris sont des neutres et ne participent pas aux associations de couleurs d’accent. La spécification omet simplement A100–A700 pour eux.

La palette par défaut de Tailwind est inspirée par Material mais pas identique. Si vous voulez des couleurs Material exactes, étendez theme.extend.colors avec les valeurs Material et référez-vous à elles comme material-indigo-500 dans vos noms de classes.

La convention dit oui, mais rien ne vous empêche d’utiliser 700 ou un accent comme primaire. La convention 500 concerne le fait d’avoir une teinte de référence fiable avec 8 étapes dans chaque direction pour la variation.

Outils similaires

Créateur de tier list

Créez une tier list privée avec textes et images locales, personnalisez les niveaux, classez au clavier ou par glisser-déposer et exportez.

Compresser GIF

Réduisez la taille d'un GIF animé dans le navigateur en diminuant les dimensions, en conservant moins d'images et en ajustant la qualité d'encodage. Prévisualisez la boucle avant le téléchargement.

Générateur de graffitis

Créez un texte façon graffiti avec des effets tag, bulle, bloc, pochoir, néon et wildstyle. Réglez les couleurs et exportez-le en PNG ou SVG.

Générateur de codes-barres

Créez dans le navigateur un code-barres 1D en Code 128, EAN, UPC, ITF-14 ou autre format pris en charge, puis téléchargez-le en SVG ou PNG.

Éditeur de photos

Éditeur de photos dans le navigateur avec recadrage, rotation, luminosité, contraste, saturation, filtres, texte superposé et export en JPG, PNG ou WebP.

Créateur de papier à en-tête

Créez un papier à en-tête réutilisable avec vos coordonnées, couleurs et logo ou initiales. Prévisualisez en A4 ou US Letter, puis imprimez, enregistrez en PDF depuis le navigateur ou téléchargez un PNG.