Génération d'une palette de couleurs Création d'une palette complète à partir d'un seul hexadécimal

Vous avez une couleur de marque en hexadécimal. Elle peut provenir d'un logo, d'une charte graphique ou d'une couleur que vous aimez. Vous avez maintenant besoin d'une palette complète — des tons, des teintes, des couleurs complémentaires, des tokens sémantiques, des variantes en mode sombre. Ce guide vous montre exactement comment construire cela, de manière programmable et correcte.

La théorie des couleurs qui compte vraiment

La plupart des théories des couleurs que vous rencontrerez en école de design ne se traduisent pas directement dans le travail d'interface. Voici ce qui est pertinent :

Pour la plupart des bibliothèques d'interfaces, vous utiliserez votre couleur de marque comme principale, une voisine analogique comme secondaire, et une teinte complémentaire ou divisée pour les accents et les états interactifs.

Pourquoi HSL est supérieur au hexadécimal pour le travail de palette

Les formats hexadécimal et RGB codent les couleurs comme des canaux de matériel — pas comme les humains les perçoivent. HSL (Teinte, Saturation, Lumière) correspond à la perception humaine :

• Teinte — la couleur elle-même (0–360°, où 0 = rouge, 120 = vert, 240 = bleu)
• Saturation — la vivacité par rapport au gris (0% = gris, 100% = couleur pleine)
• Lumière — la lumière ou l'obscurité (0% = noir, 100% = blanc)

Cela importe parce que pour générer un ton de votre couleur de marque, vous ne la mélangez pas avec du blanc — vous augmentez la luminosité en HSL. La teinte reste exactement la même. Cela n'est pas garanti lorsqu'on mélange des valeurs hexadécimales de manière mathématique.

Générer les tons et les teintes de la manière correcte

La méthode erronée est courante : interpoler le hexadécimal vers #ffffff pour les tons, vers #000000 pour les teintes. Cela introduit des décalages de teinte et des artefacts de désaturation — votre « bleu clair » devient un bleu grisâtre.

La méthode correcte : parser votre hexadécimal en HSL, puis varier uniquement la luminosité :

/**
 * Generate a 10-step shade scale from a base HSL color.
 * Returns shades from 50 (lightest) to 950 (darkest), like Tailwind.
 * @param {number} h - Hue (0–360)
 * @param {number} s - Saturation (0–100)
 * @param {number} l - Base lightness (0–100)
 * @returns {Object} - Scale object: { 50, 100, 200, ..., 900, 950 }
 */
function generateShadeScale(h, s, l) {
  // Lightness stops mapped to Tailwind-style scale keys
  const stops = [
    [50,  95],
    [100, 90],
    [200, 80],
    [300, 70],
    [400, 60],
    [500, l],   // 500 = your base color
    [600, 40],
    [700, 30],
    [800, 20],
    [900, 12],
    [950, 7],
  ];

  const scale = {};
  for (const [key, lightness] of stops) {
    scale[key] = `hsl(${h}, ${s}%, ${lightness}%)`;
  }
  return scale;
}

// Example: brand color #3b82f6 (Tailwind blue-500)
// HSL ≈ hsl(217, 91%, 60%)
const palette = generateShadeScale(217, 91, 60);
// palette[50]  → "hsl(217, 91%, 95%)" — near-white blue tint
// palette[500] → "hsl(217, 91%, 60%)" — brand color
// palette[900] → "hsl(217, 91%, 12%)" — near-black blue shade

L'insight clé : la teinte et la saturation restent constantes à travers l'échelle. Seule la luminosité change. Cela produit une échelle visuellement cohérente qui semble appartenir à la même famille de couleurs à chaque poids.

Besoin de générer cela à partir d'un hexadécimal ? Utilisez le gratuit Extracteur de palette de couleurs pour extraire les valeurs HSL de toute couleur instantanément.

L'échelle de conception 50–950

Tailwind a popularisé l'échelle à 11 étapes (50, 100–900, 950). Elle est aujourd'hui une norme de facto dans les systèmes de conception car elle s'adapte parfaitement aux cas d'usage :

• 50–100 : Arrière-plans de page, états de survol sur des surfaces claires
• 200–300 : Bordures, diviseurs subtils, états désactivés
• 400–500 : Éléments interactifs — boutons, liens, anneaux de focus
• 600–700 : États de survol/actifs pour les éléments interactifs
• 800–900 : Texte sur des arrière-plans clairs
• 950: Presque noir pour des titres à haute contraste

Lorsque vous générez cette échelle pour votre couleur de marque, vous obtenez automatiquement toutes les teintes nécessaires pour chaque état de composant — sans avoir à faire de décisions de couleur par composant.

Du hexadécimal de marque à une palette complète fonctionnelle

Voici le workflow pratique lorsque vous avez un seul hexadécimal de marque :

1. Parser en HSL. Convertir #1d4ed8 → hsl(221, 74%, 48%)
2. Générer l'échelle principale. Exécuter la fonction de teinte décrite ci-dessus pour l'échelle complète à 11 étapes.
3. Dérivée secondaire. Rotation de la teinte ±30° pour une seconde voisine analogique : hsl(251, 74%, 48%) (bleu-violet).
4. Dérivée accent. Rotation de la teinte de 180° pour un complémentaire : hsl(41, 74%, 48%) (ambre).
5. Générer les échelles pour les trois. Même fonction de teinte, entrées différentes de teinte.

Vous pouvez visualiser le résultat complet — y compris les types de harmonisation — avant d'écrire une ligne de code. Générateur de palettes de couleurs Avant d'écrire une ligne de code.

Tokens de couleurs sémantiques

Les valeurs brutes de l'échelle sont pour vos primitives de palette. Les tokens sémantiques sont ce que vos composants utilisent réellement :

const tokens = {
  // Map scale values to semantic names
  'color-primary':         palette[500],  // brand color
  'color-primary-hover':   palette[600],
  'color-primary-subtle':  palette[50],
  'color-text':            palette[900],
  'color-text-muted':      palette[600],
  'color-border':          palette[200],
  'color-bg':              palette[50],

  // Status colors — separate scales per semantic group
  'color-success':         'hsl(142, 71%, 45%)',
  'color-warning':         'hsl(38, 92%, 50%)',
  'color-danger':          'hsl(0, 84%, 60%)',
};

Cette séparation est ce qui rend le mode sombre faisable. Vos composants font référence à color-text, et non pas palette[900]. En mode sombre, vous remappez simplement le token — pas chaque composant.

Mode sombre : inversion de l'échelle

Une bonne palette HSL s'inverse presque automatiquement. La règle : échanger les extrémités claires et sombres de l'échelle, puis ajuster les milieux légèrement pour un équilibre perçu.

// Light mode
const lightTokens = {
  'color-bg':    palette[50],   // near-white background
  'color-text':  palette[900],  // near-black text
  'color-border': palette[200],
};

// Dark mode — same scale, inverted stops
const darkTokens = {
  'color-bg':    palette[950],  // near-black background
  'color-text':  palette[50],   // near-white text
  'color-border': palette[800],
};

Puisque la teinte et la saturation restent constantes à travers l'échelle, votre identité de marque survit à l'inversion. Une teinte bleue en mode clair se lit comme une teinte bleue en mode sombre — juste plus brillante contre la surface sombre. C'est le bénéfice cumulatif de construire votre palette en HSL dès le départ.

Assemblage de tout cela

À partir d'un seul hexadécimal, vous pouvez maintenant générer une palette complète, nommée sémantiquement et prête au mode sombre, en moins de 50 lignes de JavaScript. Les étapes clés :

1. Parser hex → HSL
2. Générer une échelle à 11 étapes de luminosité, en gardant la teinte et la saturation constantes
3. Dérivée des teintes secondaires et des accents par rotation
4. Mapper les valeurs primitives à des tokens sémantiques
5. Remap les tokens pour le mode sombre

Pour un prototypage rapide sans écrire de code vous-même, le Générateur de palettes de couleurs et Extracteur de palette de couleurs gère visuellement — exportez le résultat en variables CSS ou un fichier JSON de tokens et insérez-le directement dans votre système de conception.

Vous aimerez peut-être aussi

Vérification du schéma JSON : Capture des violations du contrat d'API avant leur livraison

En savoir plus "

Publié le 11 mai 2026

Vérification de la signature PDF : Ce que les développeurs doivent savoir

En savoir plus "

Publié le 10 mai 2026

Markdown vs HTML : Quand utiliser chacun pour les documents, les README et les API

En savoir plus "

Publié le 9 mai 2026

Paramètres UTM : Comment suivre les campagnes de marketing sans deviner

En savoir plus "

Publié le 8 mai 2026