About Color Formats
Understanding Digital Color Models
Digital colors are represented using mathematical models that define how colors are created and displayed on screens and in print. The four most common formats are HEX, RGB, HSL, and CMYK. Each has its own use case and advantages depending on whether you are working with web design, graphic design, or print media.
HEX Color Format
HEX is the most widely used color format in web development. It represents colors as a six-digit hexadecimal number preceded by a hash symbol. The first two digits represent red, the middle two represent green, and the last two represent blue. Each pair ranges from 00 to FF, giving 256 possible values per channel and over 16.7 million possible colors total. For example, pure red is #FF0000 and white is #FFFFFF.
RGB Color Model
The RGB model represents colors as combinations of red, green, and blue light. Each channel ranges from 0 to 255. This additive color model is used by screens and displays. When all three channels are at maximum, the result is white. When all are at zero, the result is black. RGB values like rgb(255, 128, 0) are commonly used in CSS and design software.
HSL Color Model
HSL stands for Hue, Saturation, and Lightness. Hue is measured in degrees from 0 to 360 around the color wheel, where 0 is red, 120 is green, and 240 is blue. Saturation is a percentage from 0 to 100 representing color intensity. Lightness is a percentage from 0 which is black to 100 which is white, with 50 being the pure color. HSL is intuitive for designers because adjusting lightness or saturation is more natural than adjusting RGB channels independently.
CMYK for Print
CMYK is a subtractive color model used in printing. It stands for Cyan, Magenta, Yellow, and Key which is black. Each value is a percentage from 0 to 100. Unlike RGB which adds light, CMYK subtracts light from a white background. Converting between RGB and CMYK is not always exact because the RGB color space is larger than what can be reproduced in print, a concept known as the gamut.
Les modèles de couleur
Les principaux modèles : RGB (additif, écrans : Rouge+Vert+Bleul = Blanc, 16,7 millions de couleurs en 24 bits), CMJN (soustractif, impression : Cyan+Magenta+Jaune+Noir), HSL (Teinte/Saturation/Luminosité, intuitif pour les designers), HSV (Teinte/Saturation/Valeur), HEX (#RRVVBB, notation web). Conversions : HEX #FF5733 = RGB (255,87,51) = HSL (11°,100%,60%). Le LAB (CIELAB) est perceptuellement uniforme et utilisé en industrie pour le contrôle qualité des couleurs des produits manufacturés.
L'histoire de la couleur numérique
La première norme couleur : CIE 1931 (espace chromatique xyz). Le RGB standardisé en 1953 (NTSC, télévision couleur). Le CMJN pour l'imprimerie offset dans les années 1950. Le HEX avec HTML en 1993 (216 couleurs websafe). Le sRGB en 1996 (standard mondialement adopté). Le Display P3 en 2016 (gamut élargi, écrans Apple/TV). Le Rec. 2020 (HDR, ultra HD). Chaque avancée élargit le gamut de couleurs représentables et rapproche le numérique de la perception humaine réelle.
Couleur et accessibilité web
L'accessibilité (WCAG 2.1) exige : contraste minimum 4,5:1 pour le texte normal, 3:1 pour le texte grand (≥18pt). Le ratio de contraste = (L1+0,05)/(L2+0,05) où L = luminance relative. Outils : WebAIM Contrast Checker, Chrome DevTools (inspect element → color contrast). Le daltonisme (8% hommes, 0,5% femmes) : ne pas transmettre d'information uniquement par la couleur (ajouter icônes, motifs, labels). Les palettes accessibles combinent couleurs contrastées et indicateurs non chromatiques pour une conception universellement inclusive.
La perception des couleurs
L'œil humain distingue environ 10 millions de couleurs grâce à 3 types de cônes (S, M, L pour bleu, vert, rouge). L'écran sRGB ne reproduit que 35% des couleurs visibles (gamut limité). Le P3 couvre 45%. Le Rec.2020 couvre 75% (futur standard HDR). Les couleurs impossibles (hors gamut) comme le « stygian blue » ou le « hyperbolic orange » ne peuvent pas être affichées mais peuvent être imaginées. La psychologie des couleurs : rouge = urgence/passion, bleu = confiance/calme, vert = nature/santé, jaune = optimisme/attention, noir = luxe/élégance dans la communication visuelle.
Les couleurs et le web
Les formats web : HEX (#RRGGBB, 16,7M couleurs), RGB (0-255,0-255,0-255), RGBA (avec transparence 0-1), HSL (teinte 0-360°, saturation 0-100%, luminosité 0-100%). CSS4 ajoute : LAB(), LCH(), OKLAB(), OKLCH() pour des espaces perceptuellement uniformes. Les couleurs nommées CSS : 148 noms standard (red, blue, cornflowerblue...). La fonction color-mix() (CSS 2023) mélange deux couleurs dans n'importe quel espace. Le format 8-digit HEX (#RRGGBBAA) ajoute la transparence alpha pour les superpositions semi-transparentes.