Générateur de palette de couleurs

Générateur de palette de couleurs et de schémas de couleurs pour développeurs

Utilisez ce générateur de palette de couleurs pour transformer une couleur de base opaque en un ensemble déterministe pour les interfaces, sites web, tableaux de bord et systèmes de design. Le même outil fonctionne comme un générateur de palette de couleurs ou un générateur de schémas de couleurs, avec des indications de couleurs de premier plan copiables et une sortie prête pour les développeurs, au lieu d'un simple tableau d'inspiration purement décoratif.

Comment créer une palette de couleurs

1. Saisissez une couleur de base opaque au format HEX, RGB ou HSL, ou choisissez-en une avec le sélecteur de couleur natif.
2. Choisissez une harmonie et générez une palette de 3, 5, 6, 10 ou 12 couleurs.
3. Examinez les couleurs de texte suggérées et l'aperçu du composant, puis copiez ou téléchargez les valeurs CSS, compatibles avec Tailwind, ou les design tokens.

Harmonie monochrome, analogue, complémentaire, complémentaire adjacente et triadique

L'harmonie des couleurs définit les relations de teinte initiales. L'harmonie monochrome conserve une seule teinte, l'analogue pivote de 30 degrés dans chaque direction, la complémentaire utilise la teinte opposée, la complémentaire adjacente utilise des rotations de 150 et 210 degrés, et la triadique utilise 120 et 240 degrés. Les couleurs neutres peuvent annuler ces rotations car changer la teinte d'une couleur à saturation nulle ne crée pas une valeur HEX différente.

Un seul générateur pour des palettes de 3, 5, 6, 10 et 12 couleurs

Le sélecteur de taille crée une palette compacte de 3 couleurs, des palettes communes de 5 ou 6 couleurs, et des systèmes plus grands de 10 ou 12 couleurs sans générer de pages séparées. Chaque taille est un préfixe stable de la même séquence déterministe de douze couleurs, ainsi, augmenter la taille conserve les couleurs que vous avez déjà examinées.

Teintes et nuances déterministes pour les schémas de couleurs de sites web

Après les ancres d'harmonie, le générateur de teintes et de nuances mélange chaque ancre vers le blanc et le noir par étapes sRGB délimitées. Cela prend en charge les palettes de couleurs pour sites web, les jeux de couleurs web, les thèmes de couleurs pour sites web et les palettes de couleurs pour tableaux de bord, sans prétendre à une échelle perceptuellement uniforme.

Variables CSS, valeurs de palette Tailwind et tokens de design

Copiez les propriétés personnalisées CSS, un objet de couleur compatible avec Tailwind ou des tokens JSON de style DTCG. Chaque exportation inclut la couleur de la palette et sa couleur de texte (noir ou blanc) sélectionnée, rendant le résultat utile en tant que palette de couleurs CSS, générateur de couleurs Tailwind, palette de couleurs Tailwind ou générateur de tokens de design ciblé.

Aperçu d'une palette de couleurs pour site web ou tableau de bord

La scène de composants assigne les couleurs générées à des rôles illustratifs de surface, texte, bordure, action principale, action secondaire et statut. Il s'agit d'un aperçu rapide de l'implémentation pour une palette de couleurs de site web, et non de la preuve que chaque composant réel, état d'interaction, icône, graphique, dégradé ou combinaison de couleurs adjacentes respecte les exigences d'accessibilité.

Conseils sur les couleurs de texte accessibles et limites honnêtes

Pour chaque échantillon opaque, l'outil compare le noir et le blanc et recommande celui qui présente le rapport de contraste de pleine précision le plus élevé. Il affiche le rapport et le résultat WCAG AA pour le texte de taille normale. Ceci est une recommandation pour le premier plan uniquement : le générateur ne teste pas chaque paire de la palette, la signification sémantique, le contraste des éléments non textuels, les états de focus ou la distinguabilité des couleurs. Ce n'est donc pas un vérificateur de palette pour daltoniens. Vérifiez n'importe quelle paire de texte dans le vérificateur de contraste de couleurs, et affinez un échantillon unique dans le sélecteur de couleurs.

Génération de palette privée et sauvegarde explicite

La génération, les aperçus, les calculs de contraste et les exportations se font dans ce navigateur. Rien n'est sauvegardé tant que vous ne choisissez pas Sauvegarder, et un instantané détecté n'est jamais appliqué sans Restaurer. Les couleurs exactes, les palettes, les rapports, les fichiers générés, l'état sauvegardé et les valeurs de requête de partage sont exclus des analyses.

Foire aux questions

Comment créer une palette de couleurs à partir d'une seule couleur ?

Saisissez une couleur de base opaque, sélectionnez une harmonie et une taille, puis générez la palette. Vous pouvez également choisir n'importe quelle nuance du résultat comme nouvelle base et continuer à affiner la palette.

Quelle harmonie de couleurs utiliser ?

La palette monochromatique reste la plus proche d'une seule teinte, l'analogue crée des teintes voisines, la complémentaire crée une paire opposée, la complémentaire adjacente élargit cette paire, et la triadique répartit trois points d'ancrage sur le cercle chromatique. Le meilleur choix dépend des rôles et du contenu dans l'interface réelle.

Les tons clairs et foncés sont-ils perceptuellement uniformes ?

Non. Ce sont des mélanges sRGB déterministes et bornés vers le blanc et le noir. Le générateur ne prétend pas offrir un espacement OKLCH ou une uniformité perceptuelle.

Les couleurs de texte suggérées sont-elles accessibles ?

La suggestion de noir ou de blanc affichée est le choix offrant le plus de contraste pour cette nuance individuelle et inclut son résultat AA pour du texte normal. Vous devez toujours tester la typographie réelle, les états des composants, les bordures, les icônes et les combinaisons rendues.

Cet outil crée-t-il une palette adaptée aux daltoniens ?

Pas à lui seul. Cette version ne simule pas les déficiences de la vision des couleurs ni ne vérifie si chaque couleur de la palette reste distincte. Utilisez la palette générée comme point de départ et vérifiez-la avec des simulations dédiées et des tests sur l'interface réelle.

Ma palette est-elle téléversée ou enregistrée automatiquement ?

Non. La génération reste locale, rien n'est enregistré avant que vous ne choisissiez Enregistrer, et l'état de partage n'apparaît dans un lien qu'après en avoir explicitement copié un.