🎨 Convertisseur de couleurs HEX RGB HSL

Convertisseur de couleurs HEX RGB HSL en ligne gratuit

Notre outil Convertisseur de couleurs HEX RGB HSL est entièrement gratuit et fonctionne directement dans votre navigateur. Convertissez vos couleurs entre HEX, RGB et HSL en temps réel avec aperçu visuel instantané. Aucune inscription nécessaire, aucune donnée envoyée à un serveur.

Comment utiliser cet outil ?

Il suffit de remplir les champs ci-dessus et le résultat s'affiche instantanément. Notre convertisseur de couleurs hex rgb hsl prend en charge HEX, RGB, HSL, couleur, design. L'outil est optimisé pour mobile et desktop.

Pourquoi utiliser SmartGap Tools ?

SmartGap Tools propose plus de 30 outils gratuits en ligne. Découvrez aussi : Générateur de favicon, Générateur QR Code. Tous nos outils sont rapides, gratuits et respectueux de votre vie privée.

Comment fonctionnent les modèles de couleurs ?

Les couleurs numériques reposent sur des modèles mathématiques qui permettent de représenter n'importe quelle teinte visible à l'écran. Comprendre ces modèles est essentiel pour le web design, le graphisme et le développement front-end.

Le modèle RGB (Rouge, Vert, Bleu)

Le RGB est un modèle de couleur additif : on part du noir (absence de lumière) et on ajoute de la lumière rouge, verte et bleue pour créer toutes les couleurs. Chaque canal va de 0 à 255, ce qui donne 256 × 256 × 256 = 16,7 millions de couleurs possibles.

• Rouge pur : rgb(255, 0, 0) — le canal rouge au maximum, les autres à zéro
• Blanc : rgb(255, 255, 255) — les trois canaux au maximum
• Gris moyen : rgb(128, 128, 128) — les trois canaux à la même valeur intermédiaire

Le format HEX (hexadécimal)

Le HEX est simplement une notation compacte du RGB en base 16. Chaque paire de caractères représente un canal :

• #FF0000 = rouge (FF=255 en rouge, 00=0 en vert, 00=0 en bleu)
• #00FF00 = vert
• #0066CC = bleu web classique

Astuce : les couleurs avec des paires doublées peuvent s'écrire en raccourci : #FF6600 devient #F60.

Le modèle HSL (Teinte, Saturation, Luminosité)

Le HSL est plus intuitif pour les designers car il correspond à notre perception visuelle :

• H (Hue / Teinte) : un angle de 0° à 360° sur le cercle chromatique. 0° = rouge, 120° = vert, 240° = bleu.
• S (Saturation) : de 0% (gris) à 100% (couleur pure et vive).
• L (Lightness / Luminosité) : de 0% (noir) à 100% (blanc). 50% donne la couleur pure.

Accessibilité et contraste (WCAG)

Les directives WCAG 2.1 exigent un rapport de contraste minimal entre le texte et l'arrière-plan :

• Niveau AA : ratio de 4.5:1 pour le texte normal, 3:1 pour le texte large (18px+)
• Niveau AAA : ratio de 7:1 pour le texte normal, 4.5:1 pour le texte large

Par exemple, du texte gris clair #999999 sur fond blanc #FFFFFF a un ratio de seulement 2.85:1 — insuffisant pour le niveau AA. Utilisez au minimum #767676 (ratio 4.54:1) pour respecter les normes.

La psychologie des couleurs en marketing

Les couleurs influencent les émotions et les décisions d'achat : le bleu inspire confiance (utilisé par Facebook, PayPal, Samsung), le rouge crée l'urgence (soldes, CTA), le vert évoque la nature et la santé, et le jaune/orange attire l'attention et stimule l'optimisme.