Qu'est-ce que Créateur de Schémas de Couleurs ?

Le Créateur de Schémas de Couleurs génère des palettes complètes à partir d'une seule couleur de base en appliquant les règles de la théorie des couleurs. Choisissez des schémas monochromatiques, complémentaires, complémentaire divisé, double divisé, triadiques, tétradiques ou analogues. Copiez un lien de partage, exportez en variables CSS ou configuration Tailwind, ou copiez les codes hexadécimaux.

Choisissez n'importe quel hex de base et le générateur applique les rotations classiques de la roue chromatique : 180 degrés pour le complémentaire, 150 et 210 degrés pour les deux flancs du complémentaire divisé, 120 pour le triadique, 90 pour le tétradique, et de petits pas de part et d'autre pour l'analogue. Les ombres et les teintes conservent la même teinte et déplacent seulement la luminosité en HSL par paliers fixes, donc vous obtenez une rampe nette de cinq pas pour chacun. Chaque échantillon se copie en HEX, rgb(), hsl() ou oklch() ; le panneau de contraste évalue chaque couleur face au blanc et au noir pour WCAG AA et AAA, et l'aperçu vision redessine toute la palette à travers des filtres protanopie, deutéranopie ou tritanopie en un clic. Copiez un lien de partage pour mettre une palette en favori ou la transmettre à un collègue sans compte.

Comment utiliser

1. Choisissez une couleur de base à l'aide du sélecteur de couleur ou saisissez un code hexadécimal.
2. Sélectionnez un type de schéma (monochromatique, complémentaire, complémentaire divisé, double divisé, triadique, analogue, tétradique) pour générer la palette.
3. Copiez les codes hexadécimaux individuels, exportez la palette complète en variables CSS ou téléchargez-la en tant qu'image échantillon.

Quand l'utiliser

• Transformer une seule couleur hex de marque en palette complète pour un site ou un thème d'app.
• Vérifier que la couleur du logo a un complémentaire propre avant d'imprimer du merchandising.
• Générer des variables CSS sans ouvrir Figma ni un autre outil de design.

Résultat

Un développeur web choisit le bleu primaire de sa marque, génère un schéma triadique produisant des tons orange et vert complémentaires, puis exporte la palette en propriétés CSS personnalisées pour son système de design.

FAQ

Quelle est la différence entre schéma triadique et tétradique ?

Le triadique utilise trois couleurs espacées de 120 degrés sur le cercle, ce qui forme un trio équilibré. Le tétradique utilise quatre couleurs en rectangle (deux paires complémentaires), avec plus de variété mais un équilibre visuel plus difficile.

Quand utiliser les ombres et quand utiliser les teintes ?

Les ombres (versions plus sombres) conviennent aux textes, bordures et états hover sur interfaces claires. Les teintes (versions plus claires) servent aux arrière-plans, états désactivés et highlights discrets. La plupart des design systems ont besoin des deux rampes.

Le générateur tient-il compte du contraste d'accessibilité ?

Oui — le panneau de contraste sous la palette affiche le ratio WCAG de chaque couleur face au blanc et au noir, avec des badges réussi ou échec pour AA et AAA. Le seuil de 4.5:1 pour le texte courant couvre la plupart des cas d'interface ; basculez l'aperçu vision sur protanopie, deutéranopie ou tritanopie pour voir aussi comment la palette se lit pour les personnes ayant une déficience de vision des couleurs.

Pourquoi un schéma analogue paraît-il plus calme qu'un complémentaire ?

Les couleurs analogues sont voisines sur le cercle et partagent une même famille, ce qui crée peu de tension visuelle. Les complémentaires sont opposées, le contraste est maximal et plus énergique, mais fatigant sur de grandes surfaces.

Peut-on exporter vers la config Tailwind ou seulement vers des variables CSS ?

Les deux. Les variables CSS se collent directement sous :root dans la feuille de style. Le format Tailwind enveloppe les valeurs hex dans un objet theme.extend.colors à coller dans tailwind.config.js.

Outils similaires