🎨 Convertisseur de couleurs
Collez une couleur dans n’importe quel format – #3B82F6, rgb(), hsl() ou un nom anglais comme teal – et obtenez tous les autres formats, ses scores de contraste et une palette de teintes et de nuances.
Réponse rapide : #3B82F6 correspond à rgb(59, 130, 246), hsl(217, 91 %, 60 %) et cmyk(76 %, 47 %, 0 %, 4 %) ; son rapport de contraste est de 3,68:1 sur blanc (AA pour le grand texte uniquement) et de 5,71:1 sur noir (AA).
Pas encore noté · Mis à jour le · Gratuit · Sans inscription
Données : Convertisseur de couleurs
Résultat
Couleur
#3B82F6
rgb(59, 130, 246)
| HEX | #3B82F6 |
| RGB | rgb(59, 130, 246) |
| HSL | hsl(217, 91%, 60%) |
| HSV / HSB | hsv(217, 76%, 96%) |
| CMYK | cmyk(76%, 47%, 0%, 4%) |
- Contraste avec le blanc
- 3,68:1 · AA pour le grand texte uniquement
- Contraste avec le noir
- 5,71:1 · AA
- Meilleure couleur de texte
- Noir
Teintes claires (mélangées à du blanc)
| Teinte | Couleur | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #4F8FF7 | rgb(79, 143, 247) | hsl(217, 91%, 64%) |
| 20 % | #629BF8 | rgb(98, 155, 248) | hsl(217, 91%, 68%) |
| 30 % | #76A8F9 | rgb(118, 168, 249) | hsl(217, 92%, 72%) |
| 40 % | #89B4FA | rgb(137, 180, 250) | hsl(217, 92%, 76%) |
| 50 % | #9DC1FB | rgb(157, 193, 251) | hsl(217, 92%, 80%) |
| 60 % | #B1CDFB | rgb(177, 205, 251) | hsl(217, 90%, 84%) |
| 70 % | #C4DAFC | rgb(196, 218, 252) | hsl(216, 90%, 88%) |
| 80 % | #D8E6FD | rgb(216, 230, 253) | hsl(217, 90%, 92%) |
| 90 % | #EBF3FE | rgb(235, 243, 254) | hsl(215, 90%, 96%) |
Nuances sombres (mélangées à du noir)
| Nuance | Couleur | RGB | HSL |
|---|---|---|---|
| Base | #3B82F6 | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
| 10 % | #3575DD | rgb(53, 117, 221) | hsl(217, 71%, 54%) |
| 20 % | #2F68C5 | rgb(47, 104, 197) | hsl(217, 61%, 48%) |
| 30 % | #295BAC | rgb(41, 91, 172) | hsl(217, 62%, 42%) |
| 40 % | #234E94 | rgb(35, 78, 148) | hsl(217, 62%, 36%) |
| 50 % | #1E417B | rgb(30, 65, 123) | hsl(217, 61%, 30%) |
| 60 % | #183462 | rgb(24, 52, 98) | hsl(217, 61%, 24%) |
| 70 % | #12274A | rgb(18, 39, 74) | hsl(218, 61%, 18%) |
| 80 % | #0C1A31 | rgb(12, 26, 49) | hsl(217, 61%, 12%) |
| 90 % | #060D19 | rgb(6, 13, 25) | hsl(218, 61%, 6%) |
Exigences de contraste des WCAG
| Niveau | Texte normal | Grand texte (18 pt et plus, ou 14 pt en gras) | Sur blanc | Sur noir |
|---|---|---|---|---|
| AA | 4,5:1 | 3:1 | Grand texte seulement | Conforme |
| AAA | 7:1 | 4,5:1 | Non conforme | Grand texte seulement |
Comment utiliser le convertisseur de couleurs
Collez une couleur dans un format courant : #3B82F6, #38F, rgb(59, 130, 246), hsl(217, 91%, 60%), hsv(217, 76%, 96%), cmyk(76%, 47%, 0%, 4%) ou un nom de couleur anglais simple comme teal. Vous obtenez tous les autres formats, un aperçu, les scores de contraste et une palette de teintes et de nuances.
Formules de conversion
HEX → RVB : chaque paire de chiffres hexadécimaux est un canal, de 00 à FF = de 0 à 255
CMJN : K = 1 − max(R′, G′, B′) · C = (1 − R′ − K) ÷ (1 − K), de même pour M et Y (R′ = R ÷ 255)
TSL : L = (max + min) ÷ 2 · S = (max − min) ÷ (1 − |2L − 1|) · H selon le canal dominant
Contraste = (L1 + 0,05) ÷ (L2 + 0,05), avec la luminance relative définie par les WCAG
Exemple chiffré
#3B82F6 se décompose en 3B, 82 et F6 = rgb(59, 130, 246). Le bleu est le canal le plus élevé (0,965), donc K = 3,5 % et C = (1 − 0,231 − 0,035) ÷ 0,965 = 76 %, ce qui donne cmyk(76%, 47%, 0%, 4%). En TSL, c’est hsl(217, 91%, 60%). Sa luminance relative est de 0,236 : le contraste est donc de 3,68:1 face au blanc et de 5,71:1 face au noir. Pour un petit texte, utilisez du noir par-dessus.
Couleurs courantes
| Couleur | HEX | RVB | TSL |
|---|---|---|---|
| Rouge | #FF0000 | 255, 0, 0 | 0°, 100 %, 50 % |
| Vert | #008000 | 0, 128, 0 | 120°, 100 %, 25 % |
| Bleu | #0000FF | 0, 0, 255 | 240°, 100 %, 50 % |
| Orange | #FFA500 | 255, 165, 0 | 39°, 100 %, 50 % |
| Bleu sarcelle | #008080 | 0, 128, 128 | 180°, 100 %, 25 % |
| Gris | #808080 | 128, 128, 128 | 0°, 0 %, 50 % |
Conseils
- Les valeurs CMJN affichées ici sont une conversion simple, indépendante du périphérique ; pour une impression professionnelle, convertissez avec le profil ICC de votre imprimeur.
- Vérifiez le contraste de chaque couple texte/fond de votre maquette, pas seulement celui de la couleur de marque.
Questions fréquentes
Comment convertir une couleur HEX en RVB ?
Séparez les six chiffres hexadécimaux en trois paires et convertissez chacune de la base 16 en décimal. #3B82F6 → 3B = 59, 82 = 130, F6 = 246, soit rgb(59, 130, 246).
Quelle différence entre RVB et CMJN ?
Le RVB mélange de la lumière rouge, verte et bleue pour les écrans ; le CMJN mélange des encres cyan, magenta, jaune et noire pour l’impression. Les couleurs d’écran très vives ou saturées ne sont pas toujours reproductibles à l’impression.
Quelle différence entre TSL (HSL) et HSV ?
Les deux décrivent la teinte par un angle (0–360°) et la saturation. La luminosité du TSL va du noir au blanc en passant par la couleur pure, tandis que la valeur du HSV (aussi appelée luminosité, HSB) va du noir à la couleur pure.
Quel rapport de contraste faut-il pour un texte accessible ?
Le niveau AA des WCAG 2 exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt, ou 14 pt en gras). Le niveau AAA exige 7:1 et 4,5:1.
Que sont les teintes et les nuances d’une couleur ?
Une teinte claire est la couleur mélangée à du blanc, ce qui l’éclaircit ; une nuance sombre est la couleur mélangée à du noir, ce qui l’assombrit. C’est un moyen rapide de construire une palette cohérente à partir d’une seule couleur de marque.
Notez cet outil
Seule la note moyenne est affichée. Les signalements d’erreur arrivent directement dans notre boîte de réception pour que nous puissions les vérifier et les corriger. Consultez notre Méthodologie et notre politique de confidentialité.