Pourquoi les formats de couleur sont importants
La couleur paraît simple en surface : vous la voyez, vous la choisissez, vous l’utilisez. Mais le travail de conception professionnel se heurte constamment à un problème frustrant : la même couleur a des représentations différentes selon l'endroit où vous l'utilisez, et le choix du mauvais format rend votre flux de travail plus difficile qu'il ne devrait l'être.
HEX : le standard du Web
Codes de couleur hexadécimaux comme#667eeasont le format le plus courant dans le développement Web. Ils codent les valeurs rouge, verte et bleue (0 à 255) sous forme de nombres hexadécimaux à deux chiffres concaténés en une chaîne de six caractères. Le format est compact, facilement copiable et universellement pris en charge dans les outils CSS, HTML et de conception.
Lorsque les trois paires sont des chiffres identiques, le code peut être raccourci :#ffffffdevient#fff. Ce raccourci fonctionne dans tous les principaux navigateurs et préprocesseurs.
RVB : transparence et contrôle programmatique
RVB (et sa variante RGBA) devient le format préféré lorsque vous avez besoin de transparence ou lorsque vous calculez les couleurs par programme.rgba(102, 126, 234, 0,5)donne à votre couleur une opacité de 50 % — impossible à exprimer directement en HEX (bien que HEX prenne en charge une forme à 8 caractères comme#667eea80que peu de développeurs connaissent).
HSL : l'arme secrète du constructeur de palettes
HSL (Teinte, Saturation, Légèreté) est le pluslisible par l'hommeformat couleur. La teinte est un angle (0 à 360°) sur la roue chromatique. La saturation correspond à la vivacité de la couleur. La légèreté est la façon dont il est clair ou sombre.
Cela rend la création de palettes très simple. Pour créer 10 nuances de la même teinte pour un système de conception :
- Gardez H et S identiques
- Réglez L sur : 10, 20, 30, 40, 50, 60, 70, 80, 90, 95.
- Vous disposez désormais d’une échelle de couleurs complète en 10 étapes
Accessibilité : taux de contraste
Les normes d'accessibilité WCAG 2.1 AA exigent un rapport de contraste de 4,5 : 1 entre le texte et son arrière-plan pour le texte de taille normale, et de 3 : 1 pour le texte de grande taille. Avant de finaliser une combinaison de couleurs dans votre interface utilisateur, testez le rapport de contraste. Les taux de contraste défaillants sont l’une des violations d’accessibilité les plus courantes dans la conception Web.
| Standard | Texte normal | Grand texte (18pt+) |
|---|---|---|
| WCAG-AA | 4.5:1 | 3:1 |
| WCAG AAA | 7:1 | 4.5:1 |
Pourquoi les couleurs sont-elles différentes à l’impression et à l’écran ?
Les écrans utilisent le modèle RVB (lumière additive). Les imprimantes utilisent CMJN (encre soustractive). La même couleur HEX peut paraître sensiblement différente une fois imprimée. Pour un travail de couleur d'impression précis, convertissez en CMJN dans un outil professionnel comme Adobe Illustrator ou InDesign.
Que fait réellement l’outil Pipette ?
La pipette utilise l'API EyeDropper de votre navigateur pour échantillonner les couleurs des pixels depuis n'importe où sur votre écran, pas seulement dans la fenêtre du navigateur. Il lit les valeurs RVB exactes de n’importe quel pixel et les convertit instantanément dans les trois formats.