⭐ Mes favoris

⭐
Aucun favori pour l'instant.
Cliquez ☆ sur une carte pour l'épingler.

🎨 Convertisseur de couleurs

Convertissez entre HEX, RGB, HSL et CMYK. Explorez les harmonies, vérifiez le contraste WCAG et créez des dégradés.

#00d4ff
Sélecteur de couleur
0
212
255
190
100
50

🎭 Harmonies

♿ Contraste WCAG

Texte sur fond
Texte
Fond sous texte
Texte
Ratio :
Comparer avec :

🌈 Dégradé CSS

Vers :

Outil de couleurs complet pour designers

Convertissez entre HEX, RGB, HSL et CMYK en temps réel. Explorez les harmonies de couleurs (complémentaire, analogue, triadique, tétradique), vérifiez le ratio de contraste WCAG pour l'accessibilité web, et générez des dégradés CSS prêts à copier. Indispensable pour les designers et développeurs.

Convertir une couleur : HEX, RGB, HSL

Comprendre les formats de couleur du web et passer de l'un à l'autre.

1. Les formats de couleur du web

Une même couleur peut s'écrire de plusieurs façons. Les trois formats incontournables sur le web :

  • HEX : #3B82F6 — notation hexadécimale compacte, la plus courante en CSS.
  • RGB : rgb(59, 130, 246) — trois canaux Rouge, Vert, Bleu de 0 à 255.
  • HSL : hsl(217, 91%, 60%) — Teinte, Saturation, Luminosité, plus intuitif pour ajuster une couleur.

2. Pourquoi convertir entre formats

Chaque format a ses forces. Le HEX est compact pour le code. Le RGB facilite la gestion de la transparence (RGBA). Le HSL est idéal pour décliner une palette : on garde la teinte et on fait varier la luminosité pour obtenir des nuances cohérentes. Convertir permet de travailler dans le format le plus adapté à chaque étape.

3. Couleur et accessibilité

Au-delà de l'esthétique, le contraste entre texte et fond est une exigence d'accessibilité (norme WCAG). Un ratio d'au moins 4,5:1 est requis pour du texte normal. Travailler en HSL aide à ajuster la luminosité pour atteindre ce seuil. Pour appliquer vos couleurs à une icône, voyez notre générateur de favicon.

Questions fréquentes

Que signifient les 6 caractères d'un code HEX ?

Ils représentent trois paires hexadécimales : les deux premières pour le rouge, les deux suivantes pour le vert, les deux dernières pour le bleu. #FF0000 est donc rouge pur (rouge au maximum, vert et bleu à zéro).

Qu'est-ce que le canal alpha (RGBA / HEX à 8 chiffres) ?

L'alpha gère la transparence, de 0 (invisible) à 1 (opaque) en RGBA, ou via deux caractères supplémentaires en HEX à 8 chiffres. Utile pour des superpositions et des ombres.

Pourquoi préférer HSL pour créer une palette ?

Parce que HSL sépare la teinte de la luminosité. Pour obtenir des variantes plus claires ou plus foncées d'une couleur, il suffit de modifier la luminosité en gardant la même teinte, ce qui garantit une palette harmonieuse.

La conversion est-elle exacte ?

Oui, les conversions HEX ↔ RGB sont exactes. HSL implique des arrondis, donc un aller-retour peut décaler d'une unité, sans différence visible à l'œil.

Copié !