Softonic

Générateur de palette monochromatique

Étape 1 / 3 Créer la gamme

Les couleurs et palettes sont générées dans ce navigateur. En mode guidé, le projet reste au maximum 30 minutes dans le stockage de session de cet onglet ; aucune couleur ne passe par nos serveurs ni dans l’URL.

Créer une gamme monochromatique

Saisissez une couleur, puis choisissez la transformation, l’espace d’interpolation et le nombre d’échantillons.

Formats acceptés : #RGB, #RRGGBB, rgb(0–255) et hsl() avec pourcentages. Les canaux alpha ne sont pas acceptés.

Utilisé dans les exports de variables CSS, Tailwind, SCSS et jetons de design.

Choisissez une couleur de base et le générateur construit une palette monochromatique autour : teintes (mélangées progressivement avec du blanc pour un dégradé plus clair), nuances (mélangées progressivement avec du noir pour un dégradé plus sombre) et tons (mélangés avec du gris pour réduire la saturation). Utile pour les systèmes de design qui ont besoin d’un dégradé cohérent à partir d’une couleur de marque, comme l’échelle 50–950 de Tailwind mais ajustable, ou pour choisir des états de survol et actifs sans quitter la palette.

Comment la palette est générée

  1. 1

    Entrez une couleur de base

    Utilisez #RGB, #RRGGBB, des canaux rgb() entiers ou des pourcentages hsl().

  2. 2

    Choisissez le type de palette

    Choisissez une gamme claire et sombre complète, des teintes vers le blanc, des nuances vers le noir ou des tons vers le neutre.

  3. 3

    Choisissez le nombre d'étapes

    5, 9 ou 11 étapes. Neuf reprend les libellés 100–900 courants dans le style Material ; 11 ajoute 50 et 950 pour une échelle de type Tailwind.

  4. 4

    Copier ou exporter

    Copiez HEX, RGB, HSL ou OkLCH, ou exportez CSS, Tailwind, SCSS et JSON du Design Tokens Community Group.

Teintes vs. nuances vs. tons

  • Teinte = couleur de base + blanc. Plus clair, plus pastel. mix(base, #fff, p%) où p est le pourcentage de blanc.
  • Nuance = couleur de base + noir. Plus sombre, plus d’ambiance. mix(base, #000, p%).
  • Ton = couleur de base + gris. Même clarté, saturation plus faible, plus atténué.

Les trois transformations produisent des caractères visuels différents : les teintes semblent aérées et optimistes, les nuances semblent ancrées et sérieuses, les tons semblent discrets et sophistiqués.

Un dégradé de 9 étapes à partir d’une base

Étape Description Utilisation typique
100 Très clair Surfaces, arrière-plans de puces
200 Clair États désactivés
300 Mi-clair Bordures, séparateurs
400 Légèrement atténué Texte secondaire (fond clair)
500 Couleur de base Marque par défaut, votre référence
600 Mi-sombre États de survol sur actions principales
700 Sombre États actifs, en-têtes
800 Très sombre Texte fort sur fond clair
900 Nuance la plus sombre Texte à contraste maximum

Les libellés numériques s’inspirent de conventions courantes de tokens ; les couleurs générées ne sont pas des valeurs officielles de Material ou Tailwind.

Pourquoi le monochromatique fonctionne pour les interfaces

  • Familiarité. Chaque élément semble indéniablement lié.
  • Cohérence. Réutiliser une même teinte rend les liens visuels faciles à reconnaître, mais ne suffit pas à rendre une interface accessible aux personnes daltoniennes.
  • Simplicité. Une seule décision, la couleur de base, guide toute la palette.

Association avec des neutres

Une palette monochromatique a aussi besoin de gris. Modèle commun :

  • Dégradé primaire à partir de votre couleur de marque (9 étapes).
  • Dégradé neutre à partir d’une version désaturée du primaire (9 étapes).
  • Peut-être une couleur d’accent (une seule étape bien choisie pour les alertes et les CTA).

Considérez cette structure comme un point de départ, pas comme une règle. Le nombre de palettes dépend des états, de la visualisation de données, des couleurs sémantiques et des besoins d’accessibilité du produit.

Points de contrôle de contraste

Pour le texte sur un fond, le WCAG exige 4.5:1 pour le texte normal et 3:1 pour le texte large. Les libellés 100, 500 ou 900 n’impliquent aucun rapport de contraste précis ; le résultat dépend de la couleur de base, du type de palette et de l’espace d’interpolation.

Vérifiez toujours les combinaisons spécifiques que vous prévoyez d’utiliser avec un vérificateur de contraste.

Exportation vers votre système de design

Formats de sortie :

  • Propriétés CSS personnalisées : --primary-50: #f0f9ff; --primary-100: ...
  • Configuration Tailwind : objet JS prêt à coller dans tailwind.config.js → theme.extend.colors.
  • Carte SCSS pour les projets Sass.
  • JSON de tokens de design avec la structure $type et $value du Design Tokens Community Group.

Questions fréquentes

Les teintes se rapprochent volontairement du blanc ; une base très saturée peut donc devenir pastel rapidement. Comparez HSL et OkLCH, utilisez moins d’échantillons ou choisissez une base moins saturée.

Vous pouvez choisir HSL ou OkLCH. HSL modifie ses axes de clarté et de saturation ; OkLCH modifie la clarté perceptuelle et le chroma, puis réduit le chroma si nécessaire pour conserver le résultat dans sRGB.

Dans la gamme complète, la couleur de base occupe le token 500 central. La gamme de teintes finit sur la base, celle des nuances y commence et celle des tons y finit. Les libellés ne garantissent pas une clarté précise.

Il n’existe pas d’intégration directe à Figma. Copiez des valeurs individuelles ou utilisez le texte CSS, Tailwind, SCSS ou JSON du Design Tokens Community Group comme point de départ pour votre propre flux de travail.

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.