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 reconnaît le format et affiche la même couleur dans toutes les autres notations.
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 :
- 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.
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.
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 :
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 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.
- Calculer l’âge de son chat en âge humainQuel âge a mon chat en années humaines ? Conversion selon le tableau AAFP-AAHA, chatons en mois compris, avec le stade de vie des lignes directrices 2021.
- Calculer l’âge de son chien en âge humainQuel âge a votre chien en années humaines ? Formule 16·ln(âge)+31 (Wang et al. 2020) et tableau de l’AVMA selon la taille, avec l’âge senior du chien.
- Calculer son besoin en eau par jourCombien d’eau boire par jour ? Apport en boissons et en eau totale selon l’âge, le sexe, la grossesse et l’allaitement, selon l’EFSA et la DGE.