Convertisseur de couleurs

Convertissez entre HEX, RGB, HSL et HSV instantanément.

Convertisseur de couleurs

Entrez une couleur (HEX)

HEX

#3B82F6

RGB

rgb(59, 130, 246)

HSL

hsl(217, 91%, 60%)

HSV

hsv(217, 76%, 96%)

CSS hsl()

hsl(217deg 91% 60%)

Comment fonctionne cet outil ?

Les couleurs peuvent être exprimées de nombreuses façons différentes en informatique et en design. Selon que vous travaillez en CSS, dans un logiciel de retouche, avec une API ou en impression, le format de couleur attendu change. Notre convertisseur de couleurs gratuit vous permet de passer d'un format à l'autre instantanément.

**Les formats de couleur les plus courants**

**HEX (#RRGGBB)** : Le format hexadécimal est le plus répandu en développement web. Chaque paire de caractères (0-9, A-F) représente l'intensité d'une des trois composantes Rouge, Vert, Bleu sur une échelle de 0 (00) à 255 (FF). Exemple : "#FF5733" est un orange vif. Ce format est utilisé en HTML, CSS et dans la plupart des outils de design.

**RGB (Red, Green, Blue)** : Le même modèle que HEX, mais exprimé en valeurs décimales de 0 à 255. "rgb(255, 87, 51)" est l'équivalent de "#FF5733". Le format RGB est natif en CSS et dans de nombreuses API graphiques. Il existe aussi RGBA qui ajoute un canal alpha (transparence) entre 0 et 1.

**HSL (Hue, Saturation, Lightness)** : Un modèle plus intuitif pour les designers. La teinte (Hue) est un angle de 0° à 360° sur le cercle chromatique (0° = rouge, 120° = vert, 240° = bleu). La saturation (0% = gris, 100% = couleur pure) et la luminosité (0% = noir, 100% = blanc, 50% = couleur normale) sont exprimées en pourcentages. Ce format est très pratique pour créer des palettes de couleurs cohérentes.

**HSV / HSB (Hue, Saturation, Value/Brightness)** : Similaire au HSL, mais utilisé notamment dans Photoshop et Illustrator. La différence avec HSL réside dans le calcul de la composante de luminosité. Les artistes et designers préfèrent souvent ce modèle car il correspond mieux à la façon dont on perçoit les couleurs physiques (comme les peintures).

**Pourquoi convertir des couleurs ?**

Les situations courantes incluent : - Intégrer une charte graphique (souvent définie en HEX) dans du CSS utilisant HSL - Transposer des couleurs d'un logiciel de design (Figma, Sketch) dans le code - Créer des variations de teinte automatiquement en jouant sur les valeurs HSL - Adapter une couleur pour l'impression (RVB → CMJN, géré par des outils spécialisés)

**Accessibilité et contraste**

Notre outil affiche également le niveau de luminosité perçue de la couleur, ce qui aide à vérifier le contraste texte/fond. Les WCAG (Web Content Accessibility Guidelines) recommandent un ratio de contraste minimum de 4,5:1 pour le texte normal — un critère essentiel pour l'accessibilité web.

Questions fréquentes

Quelle est la différence entre HSL et HSV ?

Les deux utilisent Teinte et Saturation, mais diffèrent sur la troisième composante. En HSL, une Luminosité de 50% donne la couleur pure, 0% le noir et 100% le blanc. En HSV, une Valeur de 100% donne la couleur pure, et 0% donne toujours le noir. HSV est utilisé dans Photoshop, HSL en CSS.

Comment lire un code HEX ?

Un code HEX est composé de 6 caractères hexadécimaux (0-9, A-F) précédés de #. Les deux premiers caractères représentent le rouge (00=0, FF=255), les deux suivants le vert, les deux derniers le bleu. #000000 est noir, #FFFFFF est blanc, #FF0000 est rouge pur.

Le format RGBA est-il supporté ?

Oui, vous pouvez saisir une valeur RGBA et notre outil convertira les composantes RGB. Le canal alpha (transparence) est affiché séparément car il n'a pas d'équivalent direct en HEX standard (bien que #RRGGBBAA existe en CSS moderne).

Puis-je utiliser cet outil pour choisir des couleurs accessibles ?

Notre outil affiche la luminosité relative de la couleur, ce qui vous donne une indication sur le contraste. Pour une vérification complète du ratio de contraste WCAG entre deux couleurs, nous recommandons d'utiliser des outils spécialisés comme le WebAIM Contrast Checker.

Mes couleurs sont-elles sauvegardées ?

Non, notre outil ne sauvegarde rien. La conversion est instantanée et locale dans votre navigateur. Pour sauvegarder vos palettes de couleurs, notez les codes ou utilisez un gestionnaire de palettes dédié.