Convertisseur de couleurs : HEX, RGB, HSL, HSV, CMJN
Saisissez une couleur dans le format de votre choix, par exemple #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%) ou cmyk(76%, 47%, 0%, 4%). Le convertisseur de couleur HEX et RGB reconnaît le format et affiche la même couleur dans toutes les autres notations.
Source : CSS Color 4, § 5.2, W3C – CSS Color Module Level 4: RGB hex notation. Mise à jour : .
Comment le calcul est fait
Comment calcule le convertisseur
Tous les formats décrivent la même couleur dans l’espace colorimétrique sRGB, la norme des écrans et du web. La base est toujours la valeur RGB à trois canaux de 0 à 255 :
Convertir une couleur en 3 étapes
- Saisissez une couleur dans n’importe quel format, par ex. #3B82F6 ou rgb(59, 130, 246).
- Le convertisseur reconnaît le format automatiquement.
- Lisez et copiez HEX, RGB, HSL, HSV et CMJN.
Exemple : #3B82F6 → 3B = 59, 82 = 130, F6 = 246, soit rgb(59, 130, 246). En CMJN : N = 1 − 246/255 ≈ 4 %, C = (1 − 59/255 − 0,035) / 0,965 ≈ 76 %.
- HEX écrit les trois canaux en nombres hexadécimaux à deux chiffres : 59 → 3B, 130 → 82, 246 → F6, soit
#3B82F6. La forme courte #RGB double chaque chiffre (#FA0 = #FFAA00) ; un 4e ou 8e chiffre indique l’opacité. - HSL (teinte, saturation, luminosité) et HWB (teinte, part de blanc, part de noir) sont calculés selon les formules du CSS Color Module Level 4.
- HSV (ou HSB) utilise la même teinte que HSL ; V est le plus grand des trois canaux, S = (max − min) ÷ max.
- CMJN (CMYK en anglais) est calculé avec la formule simple K = 1 − max(R, G, B), C = (1 − R − K) ÷ (1 − K), etc.
Exemple #3B82F6 : R = 59/255 = 0,231, G = 0,510, B = 0,965. Plus grande valeur 0,965, plus petite 0,231. Luminosité L = (0,965 + 0,231) ÷ 2 = 59,8 %, saturation S = (0,965 − 0,231) ÷ (1 − |2 × 0,598 − 1|) = 91,2 %, teinte H = 217,2°. Résultat : hsl(217.2, 91.2%, 59.8%).
Pourquoi le CMJN n’est qu’une approximation
Les encres ne se comportent pas comme la lumière : la valeur CMJN qui restitue le mieux une couleur d’écran dépend du papier, du procédé d’impression et de la charge d’encre. Ces caractéristiques figurent dans un profil colorimétrique ICC. La formule utilisée ici ne connaît aucun profil : pour le bleu pur, elle donne par exemple « cmyk(100%, 100%, 0%, 0%) », qui paraît nettement plus violet à l’impression. Pour vos imprimés, utilisez donc les valeurs de l’imprimeur ou convertissez dans votre logiciel de mise en page avec son profil.
Arrondis
RGB et HEX sont des nombres entiers et donc exacts. HSL, HSV et HWB sont affichés avec une décimale, CMJN en pourcentages entiers. Les valeurs utilisent le point comme séparateur décimal et se collent directement dans du CSS.
Autres outils couleur : le générateur de palette, le vérificateur de contraste et la pipette couleur.
Questions fréquentes
Comment convertir HEX en RGB ?
Chaque paire de chiffres est un canal en hexadécimal : #3B82F6 → 3B = 3 × 16 + 11 = 59, 82 = 8 × 16 + 2 = 130, F6 = 15 × 16 + 6 = 246. Résultat : rgb(59, 130, 246).
Puis-je utiliser les valeurs CMJN pour l’impression ?
Seulement comme repère approximatif. La conversion se fait sans profil colorimétrique ICC. C’est le profil de votre imprimeur qui fait foi : demandez-lui les valeurs CMJN adaptées ou convertissez dans votre logiciel de mise en page avec le profil d’impression.
Quelle est la différence entre HSL et HSV ?
Les deux utilisent la même teinte. En HSL, une luminosité de 100 % donne toujours du blanc et 50 % la couleur pure ; en HSV, une valeur de 100 % correspond au niveau le plus clair de la couleur, et l’on obtient le blanc avec une saturation de 0 %. Les logiciels graphiques appellent souvent HSV « HSB ».
Quelles notations sont reconnues ?
HEX à 3, 4, 6 ou 8 chiffres (avec ou sans #), rgb()/rgba() y compris en pourcentage, hsl()/hsla() avec deg, turn, rad ou grad, hsv()/hsb(), hwb(), cmyk() en pourcentages ainsi que trois nombres seuls lus en RGB. Les syntaxes avec virgules et avec espaces (CSS Color 4) fonctionnent toutes les deux.
Comment convertir RGB en HEX ?
Convertissez chaque valeur de 0 à 255 en nombre hexadécimal à deux chiffres et mettez-les bout à bout : 59 → 3B, 130 → 82, 246 → F6 donne #3B82F6.
Sources et références juridiques
- CSS Color 4, § 5.2: W3C – CSS Color Module Level 4: RGB hex notation
- CSS Color 4, § 7: W3C – CSS Color Module Level 4: HSL colors
- CSS Color 4, § 8: W3C – CSS Color Module Level 4: HWB colors
Dernière mise à jour : · Principes éditoriaux
Outils similaires
- Générateur de palette de couleursCréez des couleurs assorties depuis une couleur de base : complémentaire, analogue, triadique, carré, complémentaire adjacent ou monochrome, en HEX, RGB et HSL.
- Vérificateur de contraste des couleurs selon les WCAG 2.2Vérifiez le contraste entre couleur de texte et couleur de fond : ratio WCAG 2.2, niveaux AA/AAA pour texte normal, grand texte et composants d’interface.
- Pipette : trouver la couleur d’une imageLisez le code couleur d’une image : chargez une photo, cliquez sur un point, copiez HEX, RGB et HSL, plus les couleurs dominantes. Sans envoi, tout reste local.
- Calcul de l’IMC selon l’OMSCalcul IMC : indice de masse corporelle à partir de la taille et du poids, classe OMS sur une échelle colorée, poids normal pour votre taille et BMI Prime.
- Bruit blanc et sons de pluieBruit blanc, rose et brun, et sons de pluie avec tonnerre en boucle dans le navigateur : mixables librement, avec minuteur et fondu doux.
- Calcul du split à l’avironCalcul split aviron : convertissez un split aux 500 m en watts, des watts en split, les temps sur 2000 m, 5000 m et marathon, ou le split selon la distance.
- Quelle taille fera mon enfant ?Quelle taille fera mon enfant ? Estimez la taille cible génétique d’après celle des parents (formule de Tanner), avec la fourchette. Repère, pas un diagnostic.
- Calcul du poids d’un chevalCalcul du poids d’un cheval sans balance : périmètre thoracique et longueur du corps dans la formule de Carroll et Huntington, résultat en kg et lb. Gratuit.
- Générateur de couleur aléatoireGénérez une couleur aléatoire ou une palette : totalement aléatoire, pastel, vive, sombre, camaïeu ou harmonie. Avec HEX, RGB, HSL et couleur de texte lisible.