Explorateur de la roue des couleurs
Choisissez la couleur de base
Faites glisser une épingle autour de la roue des couleurs et regardez les marqueurs d’harmonie tourner avec elle, complémentaire à 180°, triadique par intervalles de 120°, voisins analogues, complémentaire divisée, tétradique. Alternez entre HSL (la roue d’ingénierie) et RYB (la roue de l’artiste), comparez là où elles divergent, et copiez la combinaison que vous retenez comme palette.
Comment fonctionne l'explorateur de la roue des couleurs
-
1
Faites glisser l'épingle autour de la roue
L'épingle définit votre couleur de base. La saturation et la luminosité se règlent avec des curseurs distincts.
-
2
Sélectionnez une harmonie
Complémentaire, analogue, triadique, complémentaire divisée, tétradique, monochromatique. Les marqueurs d'harmonie tournent avec la couleur de base.
-
3
Changer de modèle (HSL vs RYB)
La roue HSL est symétrique (rouge opposé au cyan, vert opposé au magenta). La roue RYB est asymétrique (rouge opposé au vert, bleu opposé à l'orange, correspond à l'intuition du mélange de peinture).
-
4
Copiez la palette
Hex, RGB, HSL pour la base et chaque marque d'harmonie. Variables CSS, carte Sass ou CSV simple.
Roue HSL vs roue RYB
Les deux roues arrangent les couleurs en cercle, mais elles ne s’accordent pas sur les couleurs qui sont “opposées”:
| Base | Complément HSL | Complément RYB |
|---|---|---|
| Rouge | Cyan | Vert |
| Orange | Sarcelle | Bleu |
| Jaune | Bleu | Violet |
| Vert | Magenta | Rouge |
| Bleu | Jaune | Orange |
| Violet | Jaune-vert | Jaune |
- HSL (teinte, saturation, luminosité) : une représentation cylindrique du sRGB utilisée en CSS et en création numérique. Ajouter 180° sélectionne la teinte opposée sur cette roue numérique.
- RYB (rouge, jaune, bleu) : une roue conceptuelle traditionnelle de l’enseignement artistique. Cet explorateur remappe les angles de teinte pour approcher cette convention ; il ne prédit pas le résultat du mélange de pigments réels.
Les deux sont valides pour différents objectifs. Utilisez HSL pour le travail à l’écran; utilisez RYB lorsque vous vous souciez de l’intuition des médias peints.
Définitions d’harmonie sur la roue
- Complémentaire: base + 180°. Écart de teinte maximal sur la roue choisie.
- Analogues: base avec des voisines à -30° et +30°. Doux et unifié.
- Triadique: base + 120° + 240°. Vibrance équilibrée.
- Complémentaire divisée: base + 150° + 210°. Riche, sans la tension totale de la complémentaire.
- Tétradique / carré: base + 90° + 180° + 270°. Quatre teintes à espacement égal.
- Monochromatique: même teinte, différente luminosité/saturation.
Température sur la roue
- Moitié chaude: rouges, oranges, jaunes. Traditionnellement des couleurs qui avancent (attirent l’œil vers l’avant).
- Moitié froide: verts, bleus, violets. Traditionnellement des couleurs qui reculent.
- Neutres: couleurs désaturées; appartiennent à l’une ou l’autre moitié selon la teinte.
Utilisations pratiques
- Exploration de palette de marque: faites glisser l’épingle jusqu’à ce que vous trouviez une couleur qui convient, puis vérifiez les marques triadiques ou tétradiques pour des accents de soutien.
- Études artistiques: choisissez une référence photo, trouvez la teinte dominante, regardez les voisins analogues pour un ombrage monochromatique.
- Illustration: choisissez une paire complémentaire pour les ombres, par exemple, pour un objet orange, peignez les ombres en bleu plutôt qu’en orange plus foncé.
- Maquette de design d’intérieur: les roues triadiques correspondent aux palettes d’intérieur classiques (bleu/jaune/rouge dans le traditionnel américain; vert/orange/violet dans le bohémien).
Pourquoi la roue n’est pas parfaitement intuitive
La perception humaine réelle des couleurs est plus complexe que ce que chaque roue suggère. Le système Munsell, LAB et OKLCH tentent tous des arrangements perceptuellement uniformes, et ils ne forment pas un simple cercle, le chroma varie avec la luminosité à chaque teinte. Pour la production concrète d’un système de design, les espaces de couleur perceptuels donnent des résultats plus propres que les roues; pour l’exploration conceptuelle des couleurs, la roue reste la plus claire.
Questions fréquentes
HSL pour le design numérique (CSS, écrans, UI). RYB lorsque vous pensez à la peinture, à l’impression ou à l’art traditionnel et que vous voulez l’intuition harmonieuse conventionnelle de l’école d’art.
Les modèles ordonnent les teintes différemment. HSL utilise l’angle de teinte sRGB : le cyan est donc opposé au rouge. Dans la convention RYB traditionnelle, le vert est opposé au rouge. Ici, RYB est une approximation visuelle, pas une prédiction du mélange de peintures précises.
Pour l’éducation, le croquis d’idées et la communication avec les clients, oui. Pour un travail de palette précis, les professionnels utilisent de plus en plus des espaces perceptuels (LAB, OKLCH) où la luminosité et le chroma sont indépendants de la teinte.
Copiez la palette au format CSS, Sass ou CSV, puis enregistrez-la dans votre espace de travail. L’explorateur ne propose ni bibliothèque de palettes ni stockage lié à un compte. Dans le parcours en quatre étapes, les réglages visibles de la roue figurent dans l’URL et peuvent rester dans l’historique du navigateur.
Outils similaires
Générateur de lettres aléatoires
Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.
Convertisseur Base64 en Hex
Convertissez une chaîne Base64 en ses octets sous-jacents exprimés en hexadécimal. Utile pour inspecter des jetons, des clés, des certificats et des JWT.
Convertisseur binaire en ASCII
Collez du binaire (octets séparés par des espaces ou un long flux de bits) et obtenez le texte ASCII qu'il représente. Gère les encodages de 7 bits et 8 bits.
Convertisseur ASCII en binaire
Convertissez n'importe quelle chaîne ASCII en sa représentation binaire. Chaque caractère devient huit bits, séparés par des espaces, prêts à être collés dans un suivi de protocole ou un devoir.
Convertisseur BBCode en HTML
Convertissez le BBCode (balisage de forum) en HTML propre. Gère les balises de formatage, les listes, les citations, le code, les images, les liens et les tableaux.
Sélecteur de couleur HEX
Choisissez ou saisissez une couleur HEX et obtenez RGB, HSL, CMYK estimé, luminance relative et contraste sur blanc et noir.