1
Saisissez un format
HEX, RGB, HSL, HSV ou CMYK
2
Voyez les 5 formats
Tout se met à jour en temps réel
3
Copiez et utilisez
Cliquez sur Copier pour CSS, design, impression
5 formats — HEX, RGB, HSL, HSV, CMYK — modifiez-en un, tous se mettent à jour en direct
HEX, RGB, HSL, HSV ou CMYK
Tout se met à jour en temps réel
Cliquez sur Copier pour CSS, design, impression
| Format | Exemple | Utilisé dans |
|---|---|---|
| HEX | #3B82F6 | CSS, HTML, design web — le format couleur universel du web |
| RGB | rgb(59, 130, 246) | Écrans, affichages, design numérique — couleur additive (lumière) |
| HSL | hsl(217, 91%, 60%) | CSS, systèmes de design — manipulation intuitive des couleurs par la teinte |
| HSV | hsv(217, 76%, 96%) | Sélecteurs de couleur, édition d'images (GIMP, Photoshop) — modèle artistique |
| CMYK | cmyk(76, 47, 0, 4) | Impression, édition — couleur soustractive (encre sur papier) |
Le RGB est une couleur additive : on part du noir (sans lumière) et on ajoute de la lumière rouge, verte et bleue pour créer des couleurs. À pleine intensité, R+V+B = blanc. Les écrans, téléphones et projecteurs utilisent tous le RGB. Le CMYK est une couleur soustractive : on part d'un papier blanc et on soustrait la lumière en superposant des encres cyan, magenta, jaune et noire. En théorie, C+M+J devrait produire du noir, mais donne en réalité un brun boueux — d'où l'encre K (Noir/Key) séparée. Le RGB a une gamme plus étendue : de nombreuses couleurs vives d'écran (verts fluo, bleus électriques) ne peuvent pas être reproduites avec des encres CMYK. Lorsque vous concevez pour l'écran et l'impression, vérifiez toujours l'aperçu CMYK pour éviter des décalages de couleur décevants à l'impression.
Le HSL (Teinte, Saturation, Luminosité) est le modèle de couleur natif du CSS. Les couleurs pures et vives se situent à L=50%. L=0% donne le noir ; L=100% donne le blanc. Cela rend le HSL parfait pour générer des teintes (ajouter du blanc : augmenter L), des nuances (ajouter du noir : diminuer L) et des tons (réduire S). Le HSV (Teinte, Saturation, Valeur) est le modèle artistique, utilisé par les sélecteurs de couleur de Photoshop et GIMP. Les couleurs pures se situent à V=100%. V=0% donne le noir. La saturation du HSV se comporte davantage comme un mélange de peinture — ajouter du blanc réduit la saturation en HSV mais modifie seulement la luminosité en HSL. Aucun n'est « correct » — ce sont des outils différents pour des tâches différentes.
Saisissez votre code HEX (ex. : #3B82F6) dans le champ HEX. Le RGB se met à jour instantanément : rgb(59, 130, 246). Chaque paire de chiffres hex = un canal : 3B=59 (R), 82=130 (V), F6=246 (B).
Saisissez des valeurs RGB — le HSL se met à jour automatiquement. Le HSL est plus intuitif : Teinte (0-360°) = position sur la roue, Saturation (0-100%) = intensité, Luminosité (0-100%) = clarté. Les couleurs pures sont à L=50%.
RGB = lumière additive (écran). CMYK = encre soustractive (impression). Le RGB a une gamme de couleurs plus large — les couleurs vives d'écran ne peuvent pas être reproduites exactement à l'impression. Ce convertisseur montre l'équivalent CMYK théorique, mais le résultat imprimé dépend de l'imprimante/papier/profils d'encre.
Les deux utilisent la Teinte et la Saturation mais diffèrent par la luminosité : la Luminosité HSL va de noir→couleur pure→blanc (pure à 50%). La Valeur HSV va de noir→couleur pure (pure à 100%). Le HSV est utilisé dans les sélecteurs de couleur (GIMP/Photoshop) ; le HSL est meilleur pour générer des teintes et des nuances en CSS.
Cliquez sur l'aperçu de couleur pour ouvrir le sélecteur de couleur natif de votre navigateur. Sélectionnez n'importe quelle couleur visuellement et les 5 formats se mettent à jour instantanément. Vous pouvez également cliquer sur « Couleur aléatoire » pour explorer des combinaisons de couleurs.