Studio de couleurs : générateur de palettes et test de contraste

Créez une palette de couleurs pour un site web, une application ou un système de design. Partez d’une couleur de marque ou de l’une des 48 palettes, explorez six harmonies sur le cercle interactif et vérifiez la lisibilité du texte. Convertissez les codes couleur, générez des nuances et des dégradés CSS, puis exportez ou partagez votre combinaison.

Dans cette page : Palette d’interface · Théorie des couleurs · Contraste · Conversions · Nuances et dégradés · Exemple CSS · Partage · Questions.

Construire une palette d’interface à partir d’une couleur

Une palette devient utile quand chaque couleur remplit un rôle. Pour un formulaire, un tableau de bord ou une page de présentation, commencez par un fond de page, une surface de panneau, un texte lisible, une action principale et un accent secondaire. Ces rôles ne nécessitent pas cinq teintes différentes.

1. Saisissez votre couleur de marque. Sélectionnez une couleur et collez sa valeur HEX, RGB, HSL, Oklab ou OKLCH. Choisissez une harmonie pour explorer des associations.
2. Conservez les couleurs nécessaires. Verrouillez la couleur de marque avant d’en modifier une autre. Le verrou protège des changements automatiques ; une modification directe reste possible.
3. Créez une hiérarchie avec la luminosité. Utilisez Nuances pour un panneau pâle, un titre foncé ou un bouton plus soutenu. Cliquez sur une nuance pour copier son code HEX sans changer la palette. Pour l’appliquer, collez-la dans l’éditeur de couleur ; les autres couleurs non verrouillées suivront l’harmonie.
4. Testez les couleurs qui se côtoieront. Dans Contraste, vérifiez le texte sur la page, le texte du bouton sur son fond, ainsi que les bordures ou icônes utiles sur leur environnement. La réussite d’une paire ne vaut pas pour les autres.
5. Exportez et essayez le composant réel. Copiez les propriétés personnalisées CSS, le SCSS ou le JSON. Testez les longs libellés, les messages d’erreur et le focus clavier, au-delà d’une simple rangée de couleurs. Le générateur de Lorem Ipsum permet de remplir une maquette avec des textes de longueurs réalistes.

Pour un thème clair, essayez un fond pâle peu saturé et une action principale plus soutenue. Pour un thème sombre, choisissez d’abord la surface, puis revérifiez le texte et les accents sur ce fond : inverser une palette claire ne garantit pas des paires lisibles. Conservez les deux thèmes dans des liens de partage distincts.

Théorie des couleurs : choisir une harmonie adaptée

La teinte correspond à la position sur le cercle. La saturation règle l’intensité colorée en HSL. La luminosité rapproche la couleur du noir ou du blanc. L’opacité, aussi appelée alpha, détermine la part du fond visible à travers la couleur. Changer la teinte ne colore pas un gris : augmentez aussi sa saturation.

Cet outil utilise un cercle HSL : le rouge est à 0°, le vert à 120° et le bleu à 240°. Il décrit des couleurs d’écran, pas un mélange de peintures. Des teintes HSL régulièrement espacées ne semblent pas nécessairement aussi lumineuses. La spécification CSS Color 4 (en anglais)  définit ces coordonnées.

Les cinq emplacements ne représentent pas nécessairement cinq teintes distinctes. Modifier une couleur en fait la référence de l’harmonie : ses partenaires non verrouillés adoptent la relation de teinte, la saturation et l’opacité, avec les écarts de luminosité du schéma. Les partenaires verrouillés gardent leurs valeurs. Une palette de départ ou importée conserve ses couleurs exactes jusqu’à une modification ou un changement d’harmonie.

Pour modifier une couleur indépendamment, verrouillez d’abord les autres. Pour chercher l’inspiration, utilisez la flèche à côté de Nouvelle palette dans la barre d’outils supérieure pour choisir une ambiance et générer immédiatement une palette : l’ambiance agit sur la génération, pas sur l’apparence d’un composant terminé. Cliquez sur le bouton de génération pour obtenir une autre palette dans la même ambiance. Ouvrez Palettes de départ dans la barre d’outils pour parcourir la fenêtre par type : vives et variées, douces et pastel, nature et végétal, chaudes et terreuses, fraîches et aquatiques, ou neutres et accents. Ouvrez des sections pour comparer leurs combinaisons de cinq couleurs ; plusieurs sections peuvent rester déployées, ou vous pouvez toutes les fermer. Choisir une palette de départ ferme la fenêtre et remplace uniquement les emplacements non verrouillés. Les commandes Annuler, Rétablir et Réinitialiser sont aussi dans la barre d’outils. Ce sont des exemples, pas des thèmes dont l’accessibilité serait certifiée.

L’harmonie sert à explorer des possibilités, puis le résultat se juge en contexte. Un accent complémentaire peut rester illisible sur son fond. Pour les graphiques, ajoutez des libellés, motifs ou formes au lieu de compter uniquement sur la teinte pour distinguer chaque série.

Contraste WCAG : vérifier chaque paire texte et fond

Le contraste exprime la différence de luminance relative entre deux couleurs. Le rapport va de 1:1 pour une luminance identique à 21:1 pour du noir sur du blanc. Le Studio de couleurs calcule les rapports WCAG 2.2 ; il ne réalise pas un audit complet de la page.

Un grand texte mesure au moins 18 pt (24 px CSS), ou 14 pt en gras (environ 18,67 px CSS). Un titre n’est pas automatiquement un grand texte. Le verdict utilise le rapport non arrondi : 4,499:1 n’atteint pas 4,5:1. Les explications du W3C sur le contraste minimal du texte (en anglais)  et le contraste amélioré (en anglais)  détaillent les critères et exceptions.

Le résultat Interface / graphismes vérifie un rapport. Les bordures, icônes ou états concernés dépendent de ce que les personnes doivent identifier ou comprendre ; tous les éléments décoratifs n’ont pas à atteindre 3:1. Consultez le contraste des éléments non textuels (en anglais)  pour cette distinction. La traduction française agréée des WCAG 2.2  présente aussi ces critères ; elle traduit la recommandation de 2023. La version normative anglaise actuelle  reste la référence.

Transparence, dégradés et changements d’état

Le vérificateur compose un fond transparent sur du blanc, puis ajoute le premier plan. Pour un composant translucide placé sur une autre surface, testez la couleur de fond finale après composition. Sinon, le résultat affiché décrit une paire différente de celle de votre page.

Vérifiez séparément les états de survol, de focus, de sélection et d’erreur. Un dégradé ou une photographie nécessite des contrôles à l’endroit le moins favorable derrière le texte, pas seulement aux extrémités. Cliquez sur le contrôle de couleur souligné en pointillés près du champ Texte ou Fond pour choisir dans la palette ou saisir une valeur personnalisée pour ce champ. Le texte suit la couleur sélectionnée quand vous la choisissez ou la modifiez. Les valeurs saisies et suggestions AA restent en place jusqu’à la prochaine sélection ou modification de cette couleur ; changer d’onglet ne les réinitialise pas. Suggérer un texte AA conserve le fond ; Suggérer un fond AA conserve le texte. Chaque action recherche une couleur opaque atteignant 4,5:1 et modifie uniquement son propre champ de contraste, pas la palette. Avec un texte très transparent, aucun fond proposé ne peut parfois atteindre le seuil : augmentez alors l’opacité du texte ou changez sa couleur.

Accompagnez les erreurs de libellés ou d’icônes visibles, et les séries colorées d’un autre indice. Cela suit les recommandations sur l’utilisation de la couleur (en anglais) . Pour un exemple qui couvre aussi le clavier et les messages de statut, consultez Créer un bouton de copie dans le presse-papiers accessible à tous.

Convertir HEX, RGB, HSL et OKLCH

Plusieurs notations peuvent décrire la même couleur. Choisissez un format selon la façon dont vous souhaitez la modifier ou l’utiliser ; convertir une valeur n’améliore pas son contraste.

Ces exemples illustrent les syntaxes acceptées ; ce ne sont pas tous des conversions exactes d’une même couleur. Un alpha de 0 est transparent, un alpha de 1 est opaque. En HEX, 80 vaut 128/255, soit environ 50,2 %, et non exactement 50 %.

L’éditeur accepte HEX sur 3, 4, 6 ou 8 chiffres. Les canaux RGB acceptent 0–255 ou des pourcentages ; la saturation et la luminosité HSL exigent des pourcentages. L’alpha accepte 0–1 ou 0–100 %. La luminosité OKLCH accepte 0–1 ou un pourcentage ; la chroma accepte 0–1, avec 100 % représentant 0,4. La teinte accepte degrés, radians, tours ou grades. Oklab utilise la même plage de luminosité ; ses axes a/b acceptent -0,4 à 0,4, ou des pourcentages où 100 % représente 0,4. Utilisez le point décimal, même sur la page française.

Les noms de couleurs, variables CSS, calc(), couleurs relatives, none et color(display-p3 ...) ne sont pas acceptés. Collez une valeur numérique résolue. La saisie est limitée à 128 caractères ; les canaux hors limites sont rejetés plutôt que corrigés silencieusement. HSV et CMYK sont des formats de sortie, pas des syntaxes d’entrée.

Les luminosités HSL et OKLCH sont différentes

La luminosité HSL facilite les réglages, mais ne mesure pas la luminosité perçue. Deux pourcentages HSL identiques ne donnent pas forcément la même apparence ni le même contraste. OKLCH associe la luminosité perceptuelle d’Oklab à des coordonnées polaires de chroma et de teinte. Ses angles de teinte ne sont pas interchangeables avec ceux de HSL. L’explication d’Oklab par Björn Ottosson (en anglais)  présente le modèle ; la référence OKLCH de MDN  décrit la syntaxe CSS, y compris des fonctions que cet outil n’analyse pas.

Le Studio de couleurs travaille en sRGB. Une couleur OKLCH hors de ce gamut est ramenée dans l’espace disponible en réduisant la chroma à luminosité et teinte constantes. Le résultat peut être moins vif ; ce n’est pas l’algorithme complet de conversion de gamut du navigateur. Les exports HEX arrondissent les canaux sur 8 bits. HSV et la sortie CMYK approximative, sans profil, omettent l’alpha. L’impression professionnelle nécessite une chaîne de gestion des couleurs avec un profil adapté à l’imprimante, aux encres et au papier.

Générer des gammes de nuances et des dégradés CSS

Nuances crée 11 niveaux de luminosité OKLCH nommés de 50 à 950. Ces étiquettes ne sont ni des pourcentages ni des scores de contraste, et ne reproduisent pas la palette d’un framework CSS précis. La chroma diminue si nécessaire pour garder chaque nuance dans sRGB ; l’opacité est conservée. La couleur d’origine ne se retrouve pas forcément au niveau 500, ni ailleurs dans la gamme générée.

Essayez un niveau clair pour un panneau teinté et un niveau foncé pour son texte, puis vérifiez cette paire dans Contraste. Le contrôle de couleur souligné en pointillés près du titre Nuances ouvre une palette. Choisissez une des cinq couleurs ou saisissez une couleur personnalisée uniquement pour cette gamme ; la palette reste inchangée. Cliquer sur une nuance copie son code HEX ; copier une nuance ou une gamme entière ne modifie ni la palette ni l’historique. L’espacement en luminosité ne garantit jamais un contraste suffisant entre deux niveaux voisins.

Dégradé mélange deux emplacements de la palette ou des couleurs personnalisées avec 2 à 25 points et un angle de 0° à 360°. En CSS, 0° pointe vers le haut et 90° vers la droite. Les interpolations sRGB et Oklab peuvent produire des couleurs intermédiaires différentes ; comparez-les avec vos couleurs de départ. Pour une bannière décorative, un premier essai utile est Oklab avec neuf points à 90°.

Déplacez le cadran d’angle à la souris ou au doigt, ou cliquez sur sa valeur soulignée en pointillés pour saisir un angle précis. L’aperçu conserve le dernier angle appliqué pendant la saisie. Entrée applique la valeur ; Échap annule. Le cadran accepte les flèches (1°), Maj+flèche (10°), Début (0°) et Fin (360°). Réglez le curseur des points et comparez les boutons radio d’interpolation.

L’option Oklab échantillonne le mélange en points sRGB. Le CSS exporté et l’aperçu interpolent entre ces points en sRGB ; davantage de points approchent mieux le trajet Oklab. Avec deux points, seules les extrémités subsistent : le trajet intermédiaire Oklab ne peut donc pas être conservé. Des extrémités transparentes dépendent aussi de la surface sous le dégradé. Vérifiez le texte sur le résultat rendu.

Transformer une palette en rôles CSS réutilisables

L’option Toutes les gammes exporte les cinq gammes de 11 nuances ensemble, soit 55 valeurs. Les gammes individuelles et les exports groupés sont gratuits.

L’onglet Exporter nomme les couleurs --color-1 à --color-5 ; le SCSS utilise $color-1 et le JSON des clés "color-1". Choisissez HEX, RGB, HSL, Oklab ou OKLCH avec Format de couleur CSS dans Dégradé ou Exporter. Ce choix concerne les points du dégradé, les exports de palettes et les gammes entières, et figure dans le code de partage. Cliquer sur une nuance seule copie toujours HEX. La notation est indépendante de l’interpolation : les dégradés autres que HEX précisent in srgb entre les points calculés pour conserver le mélange de l’aperçu. Ces formats modernes nécessitent la prise en charge de leur syntaxe CSS par le navigateur ; HEX reste le choix par défaut. Voir CSS Images 4 (en anglais)  pour la syntaxe d’interpolation explicite.

Associez les emplacements à des rôles dans votre feuille de style pour éviter que les composants dépendent du nom d’une nuance. Cet exemple assemblé manuellement reprend la structure à cinq variables de l’export CSS :

:root {
  --color-1: #F8FAFC;
  --color-2: #FFFFFF;
  --color-3: #1E293B;
  --color-4: #1D4ED8;
  --color-5: #1E40AF;

  --page-bg: var(--color-1);
  --surface: var(--color-2);
  --text: var(--color-3);
  --action: var(--color-4);
  --action-hover: var(--color-5);
  --on-action: var(--color-2);
}

body {
  background: var(--page-bg);
  color: var(--text);
}

.card {
  background: var(--surface);
  color: var(--text);
}

.button-primary {
  background: var(--action);
  color: var(--on-action);
}

.button-primary:hover {
  background: var(--action-hover);
}

Essayez #FFFFFF sur #1D4ED8 dans Contraste : le rapport est d’environ 6,70:1 et atteint le seuil AA pour le texte courant. Recommencez avec le fond de survol et chaque paire réellement utilisée. Cet extrait illustre uniquement les rôles des couleurs ; conservez les styles de focus clavier et les autres comportements du composant. Pour un thème sombre, réaffectez les rôles sémantiques à des couleurs vérifiées séparément au lieu de renommer chaque règle de composant.

Ajuster les teintes sur le cercle

Déplacez un repère numéroté autour du cercle pour modifier sa teinte et actualiser les autres couleurs non verrouillées. Les numéros correspondent à l’ordre de la palette. Les couleurs de même teinte occupent des rayons différents pour rester accessibles ; cette distance au centre ne représente ni saturation ni luminosité.

Vous pouvez aussi atteindre un repère avec Tab et utiliser les flèches par pas d’un degré, ou Maj avec une flèche par pas de dix degrés. Début choisit 0 degré et Fin choisit 359 degrés. Échap annule un déplacement en cours et restaure la palette précédente. Un déplacement terminé constitue une seule étape d’annulation. Les curseurs nommés permettent toujours de modifier saturation, luminosité et opacité.

Conserver ou partager une combinaison

Le code dans l’onglet Partager conserve les cinq couleurs avec leur transparence, les verrous, la couleur sélectionnée, l’harmonie et l’ambiance, les saisies de contraste, les réglages du dégradé et les couleurs personnalisées des onglets. Les couleurs gardent leur précision interne complète. Le code fonctionne dans les deux langues ; il ne conserve pas l’onglet ouvert, le format d’export, la sélection d’export groupé ou l’historique des modifications.

Le lien place le code après #colors= dans l’URL. Le fragment est lu localement et n’est pas envoyé dans la requête de page. L’outil ne crée aucun compte, ne téléverse pas de palette et ne l’enregistre pas dans le stockage du navigateur. Toute personne disposant du code peut restaurer ses réglages. Une URL collée est décodée sans charger l’adresse. Un code invalide, endommagé ou non pris en charge laisse votre palette intacte.

Lorsque vous modifiez une palette ouverte par un lien de partage, son fragment suit les réglages valides. Une visite ordinaire n’ajoute pas automatiquement de fragment. Conservez le code ou un lien copié pour retrouver votre combinaison.

Questions fréquentes

Pourquoi les autres couleurs changent-elles quand j’en modifie une ?

L’harmonie sélectionnée relie les couleurs non verrouillées. Verrouillez celles que vous voulez conserver avant de modifier un partenaire. Le verrou protège des modifications indirectes, pas d’un changement volontaire de cette couleur. Annuler restaure toute la palette précédente.

Pourquoi le cercle ne change-t-il pas l’apparence d’un gris, du noir ou du blanc ?

Le cercle modifie uniquement la teinte. Avec une saturation nulle, celle-ci n’a pas d’effet visible ; aux extrêmes de luminosité, la couleur reste noire ou blanche. Réglez la saturation et la luminosité avec les curseurs, puis réessayez le cercle.

Une paire qui réussit le test rend-elle ma palette accessible ?

Seule cette paire atteint le seuil affiché. La taille du texte, les couleurs adjacentes, les états interactifs et les indices autres que la couleur restent à examiner. L’outil ne teste pas automatiquement toutes les paires de la palette et ne simule pas les déficiences de vision des couleurs.

Peut-on enregistrer ou importer un fichier de palette ?

Vous pouvez télécharger du CSS, du SCSS ou du JSON pour votre projet. Restaurez les réglages avec un code de palette ou une URL dans Partager ; le JSON exporté n’est pas un format d’import. Il n’y a pas de bibliothèque de palettes enregistrée automatiquement. Conservez un code ou un lien avant de quitter la page.

Peut-on extraire les couleurs d’une image ou préparer une impression ?

Cet outil modifie des valeurs numériques et des palettes ; il n’extrait pas de palette d’image et ne produit pas de sortie d’impression avec profil ICC. Ses valeurs CMYK sont approximatives. Pour un document destiné à l’impression, utilisez la spécification de marque d’origine et un outil adapté à la gestion des couleurs.

Références et lectures complémentaires

• CSS Color Module Level 4 (en anglais)  : la spécification W3C des notations, espaces et conversions de couleurs.
• MDN : oklch()  : syntaxe, exemples et compatibilité des navigateurs.
• A perceptual color space for image processing (en anglais)  : le modèle Oklab d’origine, ses matrices et ses objectifs.
• WCAG 2.2, traduction française agréée  : les règles d’accessibilité, dans la traduction de la recommandation de 2023. La version normative anglaise actuelle  fait foi. Les explications WAI citées plus haut précisent le contraste du texte, des éléments non textuels et l’utilisation de la couleur.