Utiliser le sélecteur de couleur
Utilisez ce sélecteur pour choisir une couleur visuellement, saisir une valeur, prélever une couleur dans une image ou explorer des palettes depuis la roue chromatique. La couleur active est convertie en Hex, RGB, HSL, HSV et OKLCH pour passer facilement vers CSS, les outils de design et le code exporté.
Utiliser le sélecteur Hex
Le sélecteur permet de parcourir le champ de couleur en déplaçant le point, en modifiant les valeurs de canal ou en saisissant un code Hex. Quand la couleur change, les nuanciers, harmonies, variations, aperçus de contraste et panneaux d'export se mettent à jour depuis la même valeur.
Combien existe-t-il de couleurs Hex ?
Une couleur Hex utilise six caractères hexadécimaux au format #RRGGBB. Chaque paire contrôle le rouge, le vert ou le bleu de 00 à FF, soit 16,777,216 couleurs RGB possibles.
Sélecteur de couleur d'image
Le sélecteur d'image peut prélever des couleurs directement dans une image importée. Déplacez un point sur l'image pour capturer une couleur, comparer les valeurs et exporter les couleurs sélectionnées sans quitter la page.
Roue chromatique
La roue chromatique est utile pour travailler par teinte. Faites glisser l'anneau extérieur pour changer la teinte, puis ajustez la zone intérieure pour affiner saturation et luminosité tout en gardant l'interface synchronisée.
Ombres, teintes claires et tons
Les ombres mélangent la couleur avec du noir, les teintes claires avec du blanc, et les tons la rapprochent du gris. Ces variations conviennent aux survols, bordures, arrière-plans, états désactivés et surfaces d'interface.
Harmonies de couleur
Les palettes harmonieuses reposent sur les relations de la roue chromatique. Analogues, complémentaires, complémentaires séparées, triadiques, tétradiques et carrées offrent des points de départ pour marques, accents d'interface, données et illustrations.
Espaces colorimétriques
RGB décrit les couleurs d'écran avec la lumière rouge, verte et bleue. HSL sépare teinte, saturation et luminosité pour ajuster plus naturellement. HSV est fréquent dans les sélecteurs visuels et OKLCH vise une perception plus régulière pour les palettes CSS modernes.
Codes Hex
Les codes Hex sont compacts, faciles à copier et largement pris en charge par les navigateurs et les outils de design. Comme Hex et RGB décrivent les mêmes canaux, la conversion ne change pas l'apparence de la couleur.
Exporter les codes couleur
Les panneaux d'export regroupent la palette visible en formats Tailwind, Figma, variables CSS, fonctions préfixées et listes de code. Cliquez une nuance pour copier une couleur, ou exportez lorsque vous avez besoin du groupe complet.
WCAG et accessibilité
Une combinaison lisible dépend du contraste. Le vérificateur compare la couleur choisie sur fonds clair et sombre pour vous aider à choisir textes, bordures et surfaces avec l'accessibilité en tête.
Simulateur de daltonisme
Le simulateur prévisualise les changements possibles de la couleur pour des troubles courants de la vision des couleurs. Il aide à éviter les palettes qui reposent uniquement sur la teinte et encourage contraste, libellés et repères secondaires.
Thèmes clairs et sombres
Ombres, teintes claires, tons et harmonies peuvent servir de base aux thèmes clairs et sombres. Partez d'une couleur, vérifiez ses variations, puis exportez les valeurs adaptées aux fonds, premiers plans, boutons et états d'accent.
Utiliser la roue chromatique
La roue chromatique est une manière visuelle de comprendre les relations entre couleurs. Elle place les teintes sur un cercle, ce qui facilite le choix d'une couleur de base, la comparaison des couleurs proches et la création de palettes équilibrées.
Qu'est-ce qu'une roue chromatique ?
Une roue chromatique place le rouge, l'orange, le jaune, le vert, le bleu et le violet autour d'un spectre circulaire. Les couleurs proches paraissent souvent liées et douces, tandis que les couleurs opposées créent plus de contraste et d'énergie.
Comment utiliser cette roue
Faites glisser sur la roue pour choisir une teinte, puis ajustez la couleur dans le sélecteur afin d'affiner saturation et luminosité. La couleur active met à jour Hex, RGB, HSL, HSV, OKLCH, la palette supérieure, les harmonies et les exports.
Couleurs primaires
Les couleurs primaires sont les points de départ de nombreux systèmes. Dans la théorie artistique traditionnelle, ce sont rouge, jaune et bleu. Sur écran, RGB utilise la lumière rouge, verte et bleue pour créer les couleurs des sites, apps et outils numériques.
Couleurs secondaires
Les couleurs secondaires sont créées en mélangeant deux primaires. Dans une roue traditionnelle, orange, vert et violet se trouvent entre les primaires et relient palettes chaudes, froides et neutres.
Couleurs tertiaires
Les couleurs tertiaires se situent entre primaires et secondaires : jaune-orange, rouge-orange, rouge-violet, bleu-violet, bleu-vert et jaune-vert. Elles donnent plus de nuance qu'une roue basique à six couleurs.
Couleurs chaudes et froides
Les couleurs chaudes comme rouge, orange et jaune paraissent souvent actives et lumineuses. Les couleurs froides comme bleu, vert et violet semblent plus calmes et spacieuses. Une palette forte utilise souvent une température comme base et l'autre comme accent.
Couleurs complémentaires
Les couleurs complémentaires sont opposées sur la roue. Elles créent un contraste élevé et conviennent aux boutons, surlignages, badges et éléments qui doivent ressortir.
Couleurs analogues
Les palettes analogues utilisent des couleurs voisines sur la roue. Comme les teintes sont proches, le résultat paraît souvent doux, naturel et plus facile à contrôler sur fonds, cartes, graphiques et illustrations.
Couleurs triadiques
Les palettes triadiques utilisent trois teintes régulièrement espacées. Elles peuvent créer un ensemble vif mais équilibré lorsqu'une couleur domine et que les deux autres restent des accents.
Couleurs complémentaires séparées
Une palette complémentaire séparée part d'une couleur de base puis utilise les deux couleurs autour de son complément direct. Elle garde un contraste fort, mais avec une plage plus souple.
Couleurs tétradiques et carrées
Les palettes tétradiques et carrées utilisent quatre couleurs autour de la roue. Elles sont utiles avec plusieurs accents, mais fonctionnent mieux lorsqu'une couleur domine et que les autres sont équilibrées par des teintes claires ou sombres.
Ombres, teintes claires et tons
Après avoir choisi une relation de teinte, utilisez ombres, teintes claires et tons pour rendre la palette pratique. Les teintes claires peuvent devenir des fonds, les ombres du texte ou des bordures, et les tons des états secondaires.
Construire une palette
Commencez par la couleur principale, choisissez une harmonie, puis testez le résultat sur de vrais besoins d'interface. Une palette complète inclut souvent une couleur primaire, des accents, des surfaces neutres, du texte lisible et des états contrastés.
Exporter les couleurs de la roue
Lorsque la palette convient, exportez les couleurs en variables CSS, valeurs Tailwind, objets compatibles Figma, fonctions préfixées ou listes de code. Toute nuance visible peut aussi être copiée directement.
Accessibilité et contraste
L'harmonie des couleurs ne garantit pas la lisibilité. Vérifiez le contraste des textes et contrôles importants, évitez de dépendre uniquement de la couleur et utilisez le simulateur pour anticiper les différences de vision.