🎨 Convertir des couleurs HEX en RGB et HSL
Vous travaillez sur un site web et vous avez un code couleur en HEX mais vous avez besoin du RGB ? Ou vous voulez ajuster la luminosité d'une couleur en HSL ? Ce guide vous explique tout sur les formats de couleurs et comment les convertir facilement.
Les 3 formats de couleurs expliqués
HEX (Hexadécimal)
Le format le plus utilisé en web design. C'est un code de 6 caractères précédé d'un #.
- Format : #RRGGBB (ex : #FF5733)
- Chaque paire représente une composante : Rouge, Vert, Bleu
- Valeurs : de 00 (minimum) à FF (maximum)
- Exemple : #000000 = noir, #FFFFFF = blanc, #FF0000 = rouge pur
Quand l'utiliser : dans le CSS, les éditeurs graphiques, les chartes graphiques. C'est le format standard pour le web.
RGB (Rouge, Vert, Bleu)
Le format natif des écrans. Chaque pixel est un mélange de rouge, vert et bleu.
- Format : rgb(R, G, B) (ex : rgb(255, 87, 51))
- Valeurs : de 0 à 255 pour chaque composante
- Variante : RGBA ajoute un canal alpha (transparence) de 0 à 1
- Exemple : rgba(255, 87, 51, 0.5) = orange semi-transparent
Quand l'utiliser : quand vous avez besoin de transparence (RGBA), en JavaScript pour manipuler les couleurs, dans les animations CSS.
HSL (Teinte, Saturation, Luminosité)
Le format le plus intuitif pour les humains. Il décrit la couleur comme on la perçoit.
- Format : hsl(H, S%, L%) (ex : hsl(14, 100%, 60%))
- H (Teinte) : angle sur la roue chromatique (0-360°). 0=rouge, 120=vert, 240=bleu
- S (Saturation) : intensité de la couleur (0%=gris, 100%=vif)
- L (Luminosité) : clarté (0%=noir, 50%=normal, 100%=blanc)
Quand l'utiliser : pour créer des palettes harmonieuses, ajuster la luminosité ou la saturation sans changer la teinte, pour les thèmes clair/sombre.
🎨 Convertir une couleur maintenant →
Comment convertir entre les formats
La conversion manuelle est possible mais fastidieuse. Voici les principes :
HEX → RGB
Convertissez chaque paire hexadécimale en décimal :
#FF5733 → FF=255, 57=87, 33=51 → rgb(255, 87, 51)
RGB → HEX
Convertissez chaque valeur décimale en hexadécimal :
rgb(255, 87, 51) → 255=FF, 87=57, 51=33 → #FF5733
RGB → HSL
Cette conversion implique des formules mathématiques complexes. C'est là que notre outil devient indispensable — il fait le calcul instantanément.
En pratique, utilisez simplement notre convertisseur de couleurs : entrez une valeur dans n'importe quel format et obtenez les autres automatiquement.
Théorie des couleurs pour débutants
La roue chromatique
La roue chromatique organise les couleurs en cercle. Elle est essentielle pour créer des combinaisons harmonieuses :
- Couleurs complémentaires — opposées sur la roue (ex : bleu et orange). Fort contraste, très dynamique.
- Couleurs analogues — voisines sur la roue (ex : bleu, bleu-vert, vert). Harmonieux et apaisant.
- Triade — 3 couleurs équidistantes (ex : rouge, jaune, bleu). Équilibré et vivant.
Créer une palette avec HSL
Le format HSL est idéal pour créer des palettes cohérentes :
- Même teinte, luminosités différentes — créez des variantes claires/foncées d'une couleur
- Même saturation et luminosité, teintes différentes — couleurs qui "vont ensemble"
- Thème sombre — gardez la teinte, réduisez la luminosité à 15-25%
- Thème clair — gardez la teinte, augmentez la luminosité à 90-95%
Astuces web design
- Limitez-vous à 3-4 couleurs — une couleur principale, une secondaire, une d'accent, et des neutres
- Contraste texte/fond — ratio minimum de 4.5:1 pour l'accessibilité (WCAG AA)
- Utilisez les variables CSS — définissez vos couleurs en HSL pour faciliter les ajustements
- Testez en niveaux de gris — votre design doit fonctionner même sans couleur
- Pensez aux daltoniens — 8% des hommes sont daltoniens. Ne transmettez pas l'information uniquement par la couleur.
Couleurs populaires et leurs codes
- Bleu Facebook — #1877F2 / rgb(24, 119, 242)
- Rouge YouTube — #FF0000 / rgb(255, 0, 0)
- Vert WhatsApp — #25D366 / rgb(37, 211, 102)
- Violet Instagram — #833AB4 / rgb(131, 58, 180)
- Bleu LinkedIn — #0A66C2 / rgb(10, 102, 194)
🎨 Convertisseur de couleurs gratuit →
FAQ
Quelle est la différence entre HEX et RGB ?
Aucune en termes de couleur affichée — c'est juste deux façons d'écrire la même chose. HEX utilise la base 16 (0-F), RGB utilise la base 10 (0-255). #FF0000 et rgb(255, 0, 0) produisent exactement le même rouge.
Pourquoi utiliser HSL plutôt que HEX ?
HSL est plus intuitif pour les ajustements. Besoin d'une version plus claire ? Augmentez la luminosité. Besoin d'une version plus terne ? Réduisez la saturation. En HEX, ces ajustements nécessitent de modifier les 3 composantes simultanément.
Comment ajouter de la transparence à une couleur ?
Utilisez RGBA ou HSLA. Ajoutez un 4ème paramètre entre 0 (invisible) et 1 (opaque). Exemple : rgba(255, 0, 0, 0.5) = rouge à 50% de transparence. En HEX, ajoutez 2 caractères : #FF000080 (80 en hex = 50% d'opacité).
Quel format utiliser pour le CSS ?
Les trois fonctionnent en CSS. HEX est le plus courant et le plus compact. Utilisez RGB/RGBA quand vous avez besoin de transparence. Utilisez HSL quand vous créez un système de design avec des variables CSS (facilite les thèmes).
Convertissez vos couleurs maintenant
Entrez un code HEX, RGB ou HSL et obtenez instantanément la conversion dans tous les formats :
