colorPaletteFinder s'appuie sur les principes classiques de la théorie des couleurs combinés aux exigences modernes du design numérique. Nous avons conçu une interface fluide qui vous évite de calculer manuellement les teintes ou de vérifier les ratios de contraste — l'outil fait le gros du travail à votre place.
1. La roue chromatique interactive
Au cœur de colorPaletteFinder se trouve la roue chromatique HSL interactive. Contrairement aux sélecteurs de couleur rectangulaires classiques, notre roue chromatique circulaire correspond directement à la dynamique de la théorie des couleurs.
- Teinte (l'angle) : déplacez le point autour du bord extérieur pour changer de famille de couleurs fondamentale (rouge, bleu, vert, etc.).
- Saturation (distance du centre) : rapprochez le point du centre pour rendre la couleur grisâtre et atténuée, ou éloignez-le vers le bord pour une vivacité maximale.
- Luminosité : ajustée dynamiquement pour garantir que les couleurs d'harmonie générées conservent un poids visuel équilibré.
Déplacez le point de la couleur principale et observez toutes les couleurs d'harmonie dépendantes s'adapter instantanément en temps réel, en conservant leurs relations mathématiques strictes.
2. Choisir une règle d'harmonie
Selon l'esthétique que vous souhaitez obtenir, vous pouvez choisir parmi sept règles d'harmonie des couleurs différentes, mathématiquement éprouvées :
Complémentaire
Des couleurs situées directement à l'opposé l'une de l'autre sur la roue chromatique (à 180° d'écart). Crée un contraste maximal et une énergie à fort impact.
Analogue
Des couleurs voisines sur la roue (séparées de 30°). Cela crée un design serein, confortable et d'aspect naturel.
Triadique
Trois couleurs réparties uniformément autour de la roue (à 120° d'écart). Offre un contraste élevé tout en conservant un meilleur équilibre des couleurs que les combinaisons complémentaires.
Complémentaire divisée
Une couleur de base, plus les deux couleurs adjacentes à sa complémentaire. Offre le fort contraste visuel de la combinaison complémentaire, mais avec moins de tension.
Monochromatique
Des variations de luminosité et de saturation d'une seule teinte. Produit un rendu cohérent, épuré et élégant.
3. Vérification du contraste WCAG
Créer une belle palette n'est que la moitié du travail ; les couleurs doivent aussi être accessibles à tous les utilisateurs. En particulier, le texte doit être lisible sur les couleurs de fond.
colorPaletteFinder intègre un vérificateur de contraste en bas de l'outil. Sélectionnez deux couleurs générées (par exemple un fond et une couleur de texte), et il calcule le ratio de contraste.
- Norme AA : exige un ratio de contraste d'au moins 4.5:1 pour le texte normal, et 3:1 pour le grand texte.
- Norme AAA : la référence absolue en matière d'accessibilité, exigeant un ratio d'au moins 7:1 pour le texte normal.
4. Copie et exportation
Une fois votre palette parfaite générée, son intégration dans votre projet est un jeu d'enfant.
Survolez n'importe quel échantillon de couleur dans la bande de palette pour afficher son code HEX exact. Un clic sur l'échantillon copie instantanément le code HEX à six chiffres dans votre presse-papiers (par exemple #1A2B3C), prêt à être collé directement dans CSS, les configurations Tailwind, Figma ou Adobe Creative Cloud.