Convertisseur de couleurs HEX, RGB, HSL (gratuit)

Comment utiliser le convertisseur

1. Entrez une couleur dans l’un des trois formats : saisissez un code HEX (ex. FF5733), des valeurs RGB (Rouge, Vert, Bleu de 0 à 255) ou des valeurs HSL (Teinte, Saturation, Luminosité).
2. Les autres formats se mettent à jour automatiquement : modifiez un champ et les deux autres formats se synchronisent instantanément.
3. Visualisez le résultat dans l’aperçu couleur en temps réel.
4. Copiez la valeur souhaitée en cliquant sur le bouton “Copier” à côté de chaque format.
5. Utilisez la palette de couleurs prédéfinies pour charger rapidement une couleur populaire.

Les trois formats de couleur

HEX (hexadécimal)

Le format HEX représente une couleur avec un # suivi de 6 caractères hexadécimaux (0-9, A-F). Les deux premiers caractères définissent le rouge, les deux suivants le vert et les deux derniers le bleu.

color: #FF5733;
background-color: #3498DB;

RGB (Rouge, Vert, Bleu)

Le format RGB définit une couleur par l’intensité de ses trois composantes : Rouge, Vert et Bleu, chacune allant de 0 à 255. La valeur 0 signifie absence de la composante, 255 son intensité maximale.

color: rgb(255, 87, 51);
background-color: rgb(52, 152, 219);

HSL (Teinte, Saturation, Luminosité)

Le format HSL est le plus intuitif pour manipuler les couleurs :

• H (Hue / Teinte) : position sur le cercle chromatique, de 0° à 360° (0° = rouge, 120° = vert, 240° = bleu).
• S (Saturation) : intensité de la couleur, de 0% (gris) à 100% (couleur pure).
• L (Luminosité) : clarté de la couleur, de 0% (noir) à 100% (blanc), 50% étant la couleur normale.

color: hsl(11, 100%, 60%);
background-color: hsl(204, 70%, 53%);

Utilisation en CSS

Les trois formats sont parfaitement valides en CSS moderne. Voici quelques exemples pratiques :

/* Définir une couleur de texte */
h1 { color: #2C3E50; }

/* Fond avec transparence (RGBA) */
.overlay { background: rgba(0, 0, 0, 0.5); }

/* Variantes faciles avec HSL */
.btn-primary { background: hsl(210, 70%, 50%); }
.btn-primary:hover { background: hsl(210, 70%, 40%); } /* Plus sombre */
.btn-primary:active { background: hsl(210, 70%, 35%); } /* Encore plus sombre */

L’avantage du HSL est de pouvoir créer facilement des variantes d’une même couleur en ajustant uniquement la luminosité ou la saturation.

Conseils pour l’accessibilité des couleurs

• Ratio de contraste minimum : le texte normal doit avoir un contraste d’au moins 4.5:1 avec son fond (norme WCAG AA). Le texte de grande taille (18px bold ou 24px) nécessite un ratio de 3:1.
• Ne pas se fier uniquement à la couleur : utilisez aussi des icônes, du texte ou des motifs pour transmettre une information (utile pour les personnes daltoniennes).
• Tester vos combinaisons : après avoir choisi vos couleurs, vérifiez le contraste avec un outil dédié pour garantir la lisibilité.
• Couleurs sombres sur fond clair (ou inversement) : évitez les combinaisons à faible contraste comme du gris clair sur blanc ou du bleu foncé sur noir.