HEX, RGB et HSL : choisir un format de couleur web

Chaque couleur de ces notations est la même couleur sRGB sous d'autres habits. HEX est du RGB écrit en base seize : #4F46E5 donne les canaux rouge, vert et bleu en deux chiffres hexadécimaux chacun. rgb(79, 70, 229) énonce les mêmes trois canaux en décimal, et hsl() décrit le même pixel comme une position sur une roue chromatique.

HEX et rgb() peuvent représenter exactement les mêmes canaux sRGB sur huit bits. hsl() peut décrire cette couleur aussi, mais arrondir la teinte, la saturation ou la luminosité peut modifier l'aller-retour.

• HEXHEX est compact et stable pour le copier-coller entre outils de design et code, c'est pourquoi palettes et guides de style sont généralement publiés en hex.
• RGBRGB se lit comme trois intensités de canal de 0 à 255 et correspond à la façon dont écrans et formats d'image stockent réellement les pixels.
• HSLHSL se lit comme teinte, saturation et luminosité — plus proche de la façon dont on décrit une couleur, et bien plus facile à ajuster par intention.

La transparence se greffe sur chaque notation. rgb() et hsl() prennent un quatrième argument — rgba(79, 70, 229, 0.5) — et HEX a gagné une forme à huit chiffres, #4F46E580, où la dernière paire est l'alpha de 00 à FF.

• 0–1 ou 00–FFEn notation fonctionnelle, alpha va de 0 à 1 ; en hexadécimal à huit chiffres, de 00 à FF. L'octet 80 vaut 128/255, soit environ 0,502 : proche de 0,5, mais pas exactement égal.
• Tester sur les surfacesUn calque translucide est composé avec son arrière-plan selon son alpha : testez-le sur chaque surface où il doit apparaître.
• Jetons liésQuand un design system livre une version pleine et une version translucide de la même teinte, un seul hex à huit chiffres les garde visiblement liées.

Modifier directement les canaux RGB, c'est de l'arithmétique ; modifier l'intention est plus facile en HSL. Une teinte claire est la même teinte avec plus de luminosité, une teinte sombre la même avec moins, et une variante atténuée la même teinte avec la saturation baissée — trois mouvements à un seul curseur au lieu de trois canaux qui dérivent ensemble.

Color Shades Generator mélange une couleur hex vers le noir et le blanc pour produire de trois à vingt étapes pondérées. Elles ne sont pas perceptuellement uniformes : vérifiez chaque teinte dans son contexte réel.

• Teintes claires et sombresTeintes claires et sombres : gardez teinte et saturation, balayez la luminosité du presque blanc au presque noir, et vous obtenez une rampe utilisable pour fonds, états et textes.
• États de saturationLes variantes atténuées et vives viennent du seul curseur de saturation, ce qui permet aux états hover et désactivé de rester dans la même famille.
• Rotation de teinteLa rotation de teinte produit des couleurs liées : les voisines analogues se tiennent à une trentaine de degrés, les complémentaires à cent quatre-vingts.

Les harmonies de couleur sont de la géométrie sur la roue chromatique : les paires complémentaires se font face, les ensembles triadiques divisent la roue en tiers, les groupes analogues se regroupent. HSL rend le calcul visible — changez un nombre et tout le schéma bouge.

Color Harmony Builder applique exactement ce modèle. À partir d'un hex de départ à six chiffres, il génère des palettes de cinq couleurs dans six schémas classiques — analogue, complémentaire, complémentaire divisée, triadique, tétradique et monochrome — et vérifie le contraste de chaque échantillon contre du texte noir et blanc aux ratios WCAG 3, 4,5 ou 7.

Le résultat s'exporte en propriétés personnalisées CSS et en JSON. Pour reproduire les cinq couleurs, partagez la couleur de départ et le schéma ; ajoutez le seuil de contraste si les mêmes verdicts de réussite ou d'échec importent.

Le CSS moderne a fusionné les anciennes formes fonctionnelles : des canaux séparés par des espaces avec une barre oblique optionnelle pour l'alpha — rgb(79 70 229 / 0.5) — remplacent le rgba() plein de virgules. La spécification de niveau 4 ajoute aussi des notations comme hwb(), lab() et oklch() pour des gamuts plus larges et des rampes perceptuellement régulières.

Color Mixer accepte les couleurs hex prises en charge, propose une interpolation tenant compte de l'alpha ou une composition source-over, puis affiche le résultat en hex et RGBA. Choisissez l'opération et sa pondération avant de comparer deux couleurs.

Le champ accepte du texte hexadécimal, pas n'importe quelle expression de couleur CSS. Convertissez d'abord une valeur rgb() ou hsl() dans un format hex pris en charge.

• Nouvelle syntaxeLes canaux séparés par des espaces avec alpha après barre oblique sont valides dans tous les navigateurs actuels ; les formes à virgules restent prises en charge comme alias historiques.
• Pourquoi OKLCHoklch() corrige un vrai défaut de HSL : des pas de luminosité égaux en HSL ne paraissent pas également lumineux selon les teintes, alors qu'OKLCH garde une luminosité perçue constante.
• Adopter délibérémentAdoptez les nouvelles notations là où elles résolvent un problème — rampes cohérentes, écrans à large gamut — et gardez hex ou rgb() là où l'outillage et les habitudes fonctionnent déjà.

Les palettes partent souvent d'une capture, d'un logo ou d'une photo. Le prélèvement d'un pixel décodé dans le navigateur donne une mesure utile, mais peut différer des valeurs encodées dans le fichier source.

Image Color Picker ouvre un PNG, JPEG ou WebP et indique la valeur RGBA prélevée par Canvas dans le pixel décodé. Elle peut refléter le décodage et la conversion colorimétrique ; ne la supposez pas identique aux octets de la source.

Tout s'exécute localement : l'image est décodée dans votre navigateur et jamais téléversée, ce qui compte quand le visuel est un design non publié. Reportez la valeur prélevée dans les outils de nuances ou d'harmonies, et toute la chaîne du visuel à la palette reste sur votre appareil.