Teintes, ombres et tons : trois opérations différentes

Commencez par des définitions opérationnelles

CSS définit les couleurs, les espaces d’interpolation et les algorithmes de mélange, mais n’accorde aucun rôle particulier aux mots teinte, ombre ou ton. Les outils de design et les équipes peuvent employer ces termes différemment. Color Atlas les traite donc comme un vocabulaire de projet et publie avec le résultat le point d’arrivée, l’espace, la pondération et la règle d’arrondi exacts. Cette limite empêche un terme familier de masquer un calcul incompatible.

• Teinte : mélanger la couleur de base vers le blanc opaque #FFFFFF.
• Ombre : mélanger la couleur de base vers le noir opaque #000000.
• Ton : mélanger la couleur de base vers un neutre explicitement nommé ; ce guide utilise #808080.
• Quantité de mélange : pourcentage apporté par le point blanc, noir ou gris, et non quantité de base conservée.
• Résultat : valeur HEX sRGB opaque à six chiffres après arrondi de chaque canal à l’entier le plus proche.

Une couleur de base, trois gammes reproductibles

Utilisez Aurora Indigo #4F46E5, dont les canaux sRGB encodés valent 79, 70 et 229. Pour chaque canal, calculez résultat = round(base × (1 − p) + cible × p), où p est la part du point d’arrivée entre 0 et 1. À 20%, le canal rouge d’une teinte vaut round(79 × 0.8 + 255 × 0.2) = 114 ; la teinte complète est #726BEA. La même formule avec le noir ou #808080 produit les deux autres lignes.

Ces valeurs décrivent une interpolation de canaux dans le sRGB encodé ; elles ne prétendent modéliser ni la peinture, ni la lumière réfléchie, ni la perception humaine. Ce périmètre limité est utile : un importateur de base de données, un script de build et un navigateur peuvent comparer les mêmes canaux entiers sans deviner ce que signifiait « 20% plus clair ».

Exprimez le même contrat avec color-mix()

CSS Color 5 définit color-mix() comme une fonction qui mélange les couleurs fournies dans un espace d’interpolation choisi et selon des quantités précises. Indiquez l’espace même si la valeur par défaut actuelle est Oklab : le tableau précédent décrit volontairement un calcul par canaux sRGB, donc le CSS correspondant emploie in srgb. Avec deux couleurs opaques dont les pourcentages totalisent 100%, le premier pourcentage est la part de la base et le second celle de la cible.

:root {
  --aurora-indigo: #4F46E5;
  --aurora-tint-20: #726BEA;
  --aurora-shade-40: #2F2A89;
  --aurora-tone-40: #635DBD;
}

@supports (color: color-mix(in srgb, black, white)) {
  :root {
    --aurora-tint-20: color-mix(in srgb, var(--aurora-indigo) 80%, white 20%);
    --aurora-shade-40: color-mix(in srgb, var(--aurora-indigo) 60%, black 40%);
    --aurora-tone-40: color-mix(in srgb, var(--aurora-indigo) 60%, #808080 40%);
  }
}

• Écrivez les deux pourcentages lorsque le jeton sert de documentation, même si CSS pourrait en déduire un.
• Utilisez des propriétés personnalisées HEX statiques comme repli, puis remplacez-les dans @supports lorsque color-mix() est disponible.
• Ne confondez pas une part cible de 20% avec la conservation de 20% de la base : ces opérations donnent des positions opposées sur la gamme.
• Lorsque alpha intervient, consignez-le explicitement, car l’interpolation utilise des composantes prémultipliées et l’opacité finale peut changer.
• Inspectez la couleur résolue au lieu de supposer que chaque espace d’interpolation se sérialisera avec la même valeur HEX.

L’espace d’interpolation fait partie du résultat

Deux extrémités et un pourcentage ne déterminent pas une couleur mélangée de manière unique tant que l’espace d’interpolation est inconnu. CSS Color 4 explique que les espaces répondent à des objectifs différents. Le sRGB encodé convient à l’interpolation de canaux compatible avec l’existant, mais n’est ni linéaire en lumière ni perceptuellement uniforme. Oklab vise des pas perceptuellement plus réguliers. Oklch peut préserver la chroma et exposer les choix de trajet de teinte. srgb-linear interpole des valeurs linéaires par rapport à l’intensité lumineuse.

• Utilisez in srgb pour reproduire une formule par canaux RGB existante ou une gamme historique stockée.
• Envisagez in oklab lorsque la régularité perceptuelle compte davantage que l’ancienne arithmétique HEX.
• Envisagez in oklch lorsque le contrôle de la luminosité perceptuelle, de la chroma et du trajet de teinte fait partie de la méthode.
• Utilisez in srgb-linear uniquement lorsque l’interpolation linéaire en lumière est le contrat technique recherché.
• Ne comparez jamais les résultats de deux espaces comme si un défaut d’arrondi était la seule cause possible de leur différence.

Modifier la luminosité HSL n’est pas la même opération

HSL représente une couleur sRGB avec des coordonnées de teinte, de saturation et de luminosité. Ajouter vingt points de pourcentage à la luminosité HSL modifie une coordonnée ; cela ne mélange pas la couleur avec vingt pour cent de blanc en sRGB encodé. Les opérations peuvent produire des couleurs visuellement et numériquement différentes. De même, réduire la luminosité HSL n’équivaut pas automatiquement à une ombre sRGB, et réduire la saturation ne revient pas à mélanger avec un gris neutre précis.

• Dites « augmenter la luminosité HSL » lorsque telle est la transformation réelle.
• Dites « mélanger 20% de blanc en sRGB » lorsque vous interpolez les canaux.
• N’appelez pas teinte tout résultat plus pâle s’il provient d’une opacité sur un arrière-plan inconnu.
• N’appelez pas ombre tout résultat plus sombre s’il provient d’un mode de fusion, d’une superposition ou d’un réglage d’exposition.
• Ne considérez pas des pas égaux de luminosité HSL comme des pas égaux de luminosité perçue ; la spécification CSS souligne explicitement les limites perceptuelles de HSL.
• Convertissez et stockez la couleur finale résolue lorsqu’une reproduction exacte entre outils est nécessaire.

La règle de nommage est simple : décrivez l’opération effectuée, pas seulement l’apparence attendue. Une palette peut contenir des variantes de luminosité HSL, des mélanges Oklab, des superpositions et des teintes sRGB, mais ses métadonnées doivent permettre de distinguer ces méthodes.

Chaque étape générée exige un nouveau contrôle de contraste

Une couleur apparentée ne convient pas automatiquement au même rôle de texte ou d’interface que sa base. Le mélange modifie la luminance relative, et le contraste se calcule à partir du premier plan et de l’arrière-plan finalement rendus. Les exemples à 40% montrent clairement la direction. Les rapports ci-dessous sont calculés avec la formule de luminance sRGB non arrondie et affichés avec deux décimales ; pour le texte normal, seule la plus forte des options noire et blanche est recommandée.

Publiez des jetons de palette qu’une autre équipe peut auditer

• Conservez une couleur de base canonique révisée et un identifiant stable.
• Nommez l’opération, la couleur cible, son pourcentage, l’espace d’interpolation et le comportement alpha.
• Générez les valeurs depuis une seule implémentation déterministe et refusez les noms de jetons en double.
• Stockez les canaux exacts ou une précision suffisante avant de formater une valeur HEX destinée aux personnes.
• Calculez le contraste de chaque rôle premier plan/arrière-plan après résolution de la couleur finale.
• Vérifiez séparément les états hover, active, focus, selected et disabled ainsi que les thèmes clair et sombre.
• Consignez la spécification source et la version du générateur afin qu’une future migration puisse expliquer les changements de sortie.
• Présentez du CSS prêt à copier et la méthode de calcul à côté des échantillons plutôt que des grilles de couleurs inexpliquées.

Color Atlas suit cette piste d’audit. PostgreSQL stocke les enregistrements de base et les articles révisés ; la page SSR calcule les couleurs associées depuis la valeur sRGB déclarée et décrit sa méthodologie. Une teinte ou une ombre devient ainsi une donnée de design reproductible, et non une nouvelle page presque identique créée uniquement pour un mot-clé.