> convertir | aperçu | choisir <
// Convertissez entre les formats de couleur HEX, RGB, HSL, HSV et CMJN
Aperçu des couleurs
L'aperçu en direct se met à jour instantanément lorsque vous tapez ou choisissez des couleurs.
Saisie dans tout format
Entrez une couleur dans n'importe quel format et tous les autres formats se mettent à jour automatiquement.
5 formats de couleur
Convertissez entre HEX, RGB, HSL, HSV/HSB et CMJN. Copiez n'importe quel format en un clic.
// À PROPOS DES FORMATS DE COULEUR
Modèles de couleur:
Les couleurs peuvent être représentées par différents modèles : RGB additif (rouge, vert, bleu) pour les écrans, CMJN soustractif (cyan, magenta, jaune, noir) pour l'impression, notation HEX comme représentation RGB compacte, et HSL/HSV pour la teinte, la saturation et la luminosité/valeur.
Exemple:
#FF5733 → rgb(255, 87, 51) → hsl(11, 100%, 60%)
Cas d'utilisation courants:
- >Développement web : couleurs CSS en HEX, RGB ou HSL
- >Design d'impression : conversion RGB vers CMJN
- >Design UI : HSL pour des ajustements intuitifs
- >Chartes graphiques : couleurs cohérentes entre formats
- >Accessibilité : vérification des ratios de contraste
>> questions fréquemment posées
Q : Quelle est la différence entre HEX et RGB ?
R : HEX et RGB représentent le même modèle de couleur (rouge, vert, bleu) mais en notations différentes. HEX utilise l'hexadécimal (#FF5733) tandis que RGB utilise des valeurs décimales (rgb(255, 87, 51)).
Q : Qu'est-ce que HSL et pourquoi l'utiliser ?
R : HSL signifie Teinte, Saturation, Luminosité. C'est un modèle de couleur plus intuitif pour les humains. Le CSS prend en charge nativement la notation hsl().
Q : Quand utiliser CMJN ?
R : Le CMJN (Cyan, Magenta, Jaune, Noir) est le modèle de couleur utilisé pour l'impression. Notez que toutes les couleurs RGB ne peuvent pas être reproduites en CMJN.
Q : Quels formats de couleur CSS sont pris en charge ?
R : Les navigateurs modernes prennent en charge HEX, RGB, HSL, les couleurs nommées et les formats plus récents comme hwb(), lab(), lch(), oklch().
Q : Comment les formats de couleur affectent-ils l'accessibilité ?
R : Le format ne modifie pas directement l'accessibilité, mais comprendre les valeurs aide à calculer les ratios de contraste. Le WCAG 2.1 exige un ratio minimum de 4,5:1 pour le texte normal.
// Couleurs courantes en HEX, RGB et HSL
| HEX | RGB | HSL |
|---|---|---|
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
// Notations de couleur CSS et conversion
color: #ff8000; color: #f80; /* shorthand for #ff8800 */ color: #ff800080; /* 8 digits: last two = alpha */ color: rgb(255 128 0); color: rgb(255 128 0 / 50%); color: hsl(30 100% 50%); #FF8000 -> FF=255 80=128 00=0 -> rgb(255, 128, 0)
>> Autres questions
Q : Comment convertir du HEX en RGB à la main ?
R : Séparez le code en paires et convertissez chaque paire de l’hexadécimal au décimal : #FF8000 → FF = 255, 80 = 128, 00 = 0, soit rgb(255, 128, 0).
Q : Que signifient la forme abrégée (#F80) et le HEX à 8 chiffres ?
R : #F80 est l’abréviation de #FF8800 (chaque chiffre est doublé). Avec 8 chiffres (#RRGGBBAA), les deux derniers sont le canal alpha, c’est-à-dire l’opacité.
Q : Pourquoi les couleurs diffèrent-elles entre l’impression et l’écran ?
R : Les écrans mélangent la lumière de façon additive (RVB) et couvrent un gamut plus large ; l’impression mélange des encres de façon soustractive (CMJN). Les verts, bleus et néons vifs sont souvent imprimables seulement approximativement – vérifiez avec une épreuve.