Formats de couleur et espaces colorimétriques
Les couleurs à l'écran sont représentées dans plusieurs formats selon le contexte. Le format HEX (#RRGGBB ou la notation abrégée #RGB) est utilisé partout en CSS et HTML. RGB et RGBA (rouge, vert, bleu, alpha) utilisent des valeurs entières de 0 à 255 par canal, ou des valeurs fractionnaires de 0,0 à 1,0 dans certaines API. HSL (teinte, saturation, luminosité) et HSV/HSB (teinte, saturation, valeur/luminosité) décrivent les couleurs dans des termes plus proches de la perception humaine — la teinte tourne sur une roue de 360 degrés, tandis que la saturation et la luminosité utilisent des pourcentages.
CMYK (cyan, magenta, jaune, noir) est le modèle colorimétrique soustractif utilisé en impression. Contrairement au RGB qui ajoute de la lumière, le CMYK soustrait la lumière du papier blanc. La conversion d'une couleur RGB en CMYK donne une approximation adaptée aux maquettes de design ; une reproduction précise pour l'impression nécessite un profil colorimétrique et un logiciel compatible ICC. Ce convertisseur gère toutes ces traductions de formats en temps réel.
Le canal alpha (A dans RGBA et HSLA) contrôle l'opacité de 0 (entièrement transparent) à 1 (entièrement opaque). CSS prend également en charge la fonction moderne `color()` et la syntaxe CSS Color Level 4 avec des valeurs séparées par des espaces et un alpha optionnel, mais HEX, RGB et HSL restent les formats les plus utilisés pour le développement web et le design UI.
Utilisations pratiques en design web et UI
Les systèmes de design et les propriétés personnalisées CSS reposent sur des valeurs de couleur cohérentes dans tous les formats. Quand un designer fournit une couleur de marque en HEX, un développeur peut avoir besoin de la valeur HSL équivalente pour générer programmatiquement des teintes plus claires et plus sombres avec `calc()` en CSS. Ce convertisseur rend cette traduction instantanée.
Les standards d'accessibilité (WCAG 2.1) exigent un rapport de contraste minimum de 4,5:1 pour le texte normal et de 3:1 pour le grand texte. Le rapport de contraste est calculé à partir de la luminance relative de deux couleurs, qui dépend des valeurs RGB. Comprendre la représentation RGB d'une couleur est donc essentiel pour vérifier la conformité à l'accessibilité. De nombreux développeurs utilisent HSL pour faire varier systématiquement la luminosité tout en conservant une teinte et une saturation fixes, assurant un comportement de contraste prévisible sur toute une gamme de couleurs.
Les préprocesseurs CSS (Sass, Less) exposent des fonctions de manipulation de couleurs comme `lighten()`, `darken()`, `saturate()` et `mix()`, qui opèrent toutes en interne sur HSL ou RGB. Tailwind CSS et d'autres frameworks utilitaires définissent des palettes de couleurs sous forme de nuances numérotées (50–950) générées en ajustant la luminosité HSL. Connaître vos valeurs HSL de départ vous permet de placer les couleurs avec précision dans ces gammes.
Fondamentaux de la théorie des couleurs
La roue des teintes divise le spectre visible en un cercle de 360 degrés : 0° et 360° sont le rouge, 120° est le vert, 240° est le bleu. Les couleurs complémentaires sont à 180° l'une de l'autre (rouge/cyan, bleu/orange, jaune/violet). Les schémas de couleurs triadiques utilisent trois teintes à 120° d'écart. Les schémas analogues regroupent des teintes dans un arc de 30 à 60°. Comprendre les relations entre les teintes vous aide à construire des palettes harmonieuses.
La saturation mesure la pureté de la couleur. Une saturation de 100 % correspond à la nuance la plus vive d'une teinte ; 0 % produit du gris quelle que soit la teinte. La luminosité en HSL va de 0 % (noir) à 100 % (blanc), avec 50 % donnant la teinte pure. La valeur en HSV est la luminosité maximale : 0 % est le noir, 100 % est la version la plus lumineuse possible de la teinte à saturation maximale.
Les couleurs CSS nommées (comme `tomato`, `steelblue`, `rebeccapurple`) correspondent toutes à des valeurs HEX/RGB spécifiques. Ce convertisseur accepte les couleurs nommées et toute expression de couleur CSS valide, les résolvant dans tous les formats numériques. Utilisez les boutons de copie à côté de chaque format pour coller les valeurs directement dans votre éditeur de code, votre outil de design ou votre fichier CSS.