Convertisseur de Couleur
Choisissez une couleur ou collez un code et visualisez-la graphiquement en Hex, RGB, RGBf, HSL et HSV. Fonctionne hors ligne.
Instructions
Cet outil simple affiche une couleur donnée graphiquement et dans différentes notations. Vous pouvez choisir une couleur visuellement ou saisir un code que vous possédez déjà, pour la visualiser ou la convertir vers un autre standard de codage couleur.
Zone d'aperçu — affiche la couleur actuelle.
Barre de luminosité — déplacez vers la gauche ou la droite pour régler la clarté ou l'obscurité de la couleur.
Barre de teinte — déplacez vers la gauche ou la droite pour changer la tonalité de base (rouge, vert, bleu, etc.).
Zone saturation/valeur (SV) — cliquez ou glissez à l'intérieur : gauche–droite = plus ou moins de saturation, haut–bas = plus clair ou plus foncé.
Échantillons — exemples rapides : variations de votre couleur, arc-en-ciel, gris et sélections récentes. Cliquez sur l'un d'eux pour le sélectionner.
Couleur Aléatoire — choisit une nouvelle couleur au hasard.
Valeurs — cinq champs : Hex, RGB, RGBf, HSL, HSV. Saisissez une valeur dans n'importe quel champ pour mettre à jour tous les autres. Utilisez Copier pour copier le code.
Mini guide des formats de couleur
Concis mais pédagogique
HEX
Quoi : Triplet en base 16 : #RRGGBB (ou abrégé #RGB → chiffres doublés).
Comment : Chaque paire encode un canal (0–255) en hexadécimal.
Pourquoi : Compact, universel sur la plateforme web, facile à coller dans du CSS.
Usage : Couleurs HTML/CSS, livraison de maquettes, chartes graphiques, partage rapide.
Astuce : #FF0000 rouge, #00FF00 vert, #0000FF bleu, #00FF7F vert printemps.
Correspondance
#RRGGBB →
RR =
rouge (0–255),
GG =
vert (0–255),
BB =
bleu (0–255)
RGB (0–255)
Quoi : Canaux entiers (R, G, B) chacun de 0 à 255. Exemple : rgb(255, 128, 0).
Comment : Représente l'intensité lumineuse par canal (généralement 8 bits par canal).
Pourquoi : Correspond aux fichiers image et aux tampons graphiques.
Usage : Traitement d'images, CSS rgb(), pixels du canvas.
Modèle mental (minimaliste)
origine = (0, 0, 0) noir
axe R →,
axe G ↑,
axe B ⟂
orange vif ≈
(255, 165, 0)
gris clair ≈
(200, 200, 200)
RGBf (0–1)
Quoi : RGB sous forme de flottants normalisés : (1.0, 0.5, 0.0).
Comment : 255 → 1.0, 0 → 0.0.
Pourquoi : Privilégié dans les shaders et le calcul de couleurs.
Usage : GLSL/HLSL, WebGL, pipelines GPU.
Conversion rapide
0–255 → 0–1 : diviser par 255 (128 → 0.502)
0–1 → 0–255 : round(x*255) (0.5 → 128)
HSL (Teinte, Saturation, Luminosité)
Quoi : Sépare la teinte (type de couleur) de la luminosité et de la saturation.
Comment : Teinte : 0–360° autour de la roue ; Saturation : 0% gris → 100% vif ; Luminosité : 0% noir → 50% moyen → 100% blanc.
Pourquoi : Idéal pour créer des palettes, des variantes de couleur accessibles.
Usage : Thématisation d'interfaces, logiciels de design.
Roue de teinte
HSV (Teinte, Saturation, Valeur)
Quoi : Comme HSL, mais Valeur = canal maximal (luminosité).
Comment : Teinte : 0–360°, S : 0–100%, V : 0–100%.
Pourquoi : Correspond aux sélecteurs des logiciels de peinture (roue de teinte + contrôle S/V).
Usage : Peinture numérique, éditeurs photo, interfaces de sélection de couleur.
Quand privilégier lequel ?
- Hex : prêt pour le web, codes courts.
- RGB : captures d'écran, données image 8 bits.
- RGBf : programmation, shaders, calculs.
- HSL : palettes de design, variantes contrôlées.
- HSV : outils de peinture, sélecteurs intuitifs.
Exemples de référence croisée
La même couleur écrite de cinq façons (vert printemps) :
- Hex : #00FF7F
- RGB : rgb(0, 255, 127)
- RGBf : 0.000, 1.000, 0.498
- HSL : 150°, 100%, 50%
- HSV : 150°, 100%, 100%
Note : CSS et la plupart des images utilisent sRGB (encodage gamma) ; effectuez les calculs d'éclairage en espace linéaire et reconvertissez en sRGB pour l'affichage.