01

Définir le sens de « nom le plus proche »

CSS Color Module Level 4 définit une table de couleurs nommées dont les mots-clés correspondent à des valeurs sRGB précises. Un outil peut considérer ces entrées comme points candidats, mais la spécification n’affirme pas que toute autre couleur possède l’un de ces noms. La question est étroite : quel candidat a la plus petite distance numérique selon cette implémentation ? Le résultat ne détermine ni un nom culturel, ni une norme de peinture, ni un jeton de marque, ni le terme choisi par chaque observateur.

  • Précisez que les candidats proviennent de la table CSS et non d’un dictionnaire illimité de couleurs.
  • Présentez le mot-clé avec sa valeur de référence exacte afin de permettre une vérification indépendante.
  • Qualifiez le résultat de proche ou approximatif sans prétendre que l’entrée porte littéralement ce nom.
02

Construire une table canonique de candidats

Chargez chaque mot et son triplet sRGB exact depuis une source versionnée au lieu de recopier les valeurs par plusieurs générateurs. Normalisez la casse pour la recherche tout en conservant l’orthographe canonique en sortie. Plusieurs mots CSS sont des alias aux coordonnées identiques : aqua et cyan, fuchsia et magenta, ainsi que les variantes gray et grey comme darkgray et darkgrey. Aucun calcul de distance ne peut les séparer. Regroupez-les ou choisissez un représentant par une règle stable explicite, jamais par l’ordre des lignes.

  • Stockez les canaux entiers rouge, vert et bleu de 0 à 255 puis dérivez les autres espaces de ces valeurs.
  • Rattachez les alias à une même coordonnée afin qu’une correspondance exacte indique tous les mots équivalents.
  • Excluez le mot spécial transparent d’une recherche opaque ou traitez alpha dans un mode distinct documenté.
03

Normaliser l’entrée avant la comparaison

Analysez l’entrée comme une couleur, validez ses plages puis convertissez-la dans la même représentation que les candidats. Un HEX à six chiffres correspond directement à des octets sRGB encodés, mais CSS accepte de nombreuses syntaxes et espaces. Convertir Display P3 ou Lab vers sRGB peut sortir du gamut : l’outil doit annoncer s’il écrête, mappe ou refuse. Alpha ajoute une dépendance, car une couleur translucide n’a aucun résultat visible unique avant sa composition sur un arrière-plan connu.

  • Refusez les entrées mal formées plutôt que de réparer silencieusement chiffres ambigus, canaux absents ou syntaxe inconnue.
  • Pour un catalogue sRGB, documentez la règle de gamut et affichez la valeur normalisée réellement comparée.
  • Si alpha est inférieur à un, exigez un fond et une méthode de composition ou rendez la comparaison indisponible.
04

Choisir délibérément une métrique

La distance droite entre nombres rouge, vert et bleu encodés est simple et déterministe, mais les canaux sRGB sont non linéaires et des pas numériques égaux ne représentent pas des pas perceptifs égaux. La conversion vers CIE Lab permet Delta E 76, distance euclidienne dans Lab. Delta E 2000 ajoute des corrections aux non-uniformités connues de clarté, chroma et hue. OKLab constitue un autre repère perceptif, et CSS Color 4 documente une Delta E OK euclidienne simple. Ces formules peuvent classer différemment les mêmes candidats.

  • Utilisez la distance sRGB encodée seulement si simplicité et compatibilité sont les objectifs déclarés.
  • Appliquez une seule chaîne de conversion et une version de métrique à tous les candidats sans mélanger les espaces.
  • Publiez le nom de la métrique, car un nombre de distance isolé n’a ni formule ni échelle.
05

Calculer et départager de manière reproductible

Après conversion, calculez la distance choisie vers chaque candidat, conservez le minimum et appliquez une politique de départage documentée. Les flottants exigent de la prudence : reconnaissez les alias exacts par leur coordonnée source commune et ne déclarez pas égales des distances voisines avec une tolérance arbitrairement large. Gardez la précision pendant les conversions et n’arrondissez que l’affichage. Un ordre secondaire stable par mot canonique garantit le même représentant malgré un autre plan de requête ou ordre d’insertion.

  • Renvoyez une distance nulle pour une coordonnée exacte et indiquez son groupe d’alias éventuel.
  • Comparez les distances en pleine précision avec uniquement une tolérance étroite justifiée numériquement.
  • Triez les égalités par clé fixe et testez l’indépendance envers langue, collation et ordre d’insertion.
06

Expliquer le résultat sans le surestimer

Une réponse utile contient l’entrée normalisée, le mot CSS gagnant, sa valeur sRGB ou HEX exacte, la métrique et la distance mesurée. Elle peut montrer plusieurs voisins, car un seul gagnant masque parfois un classement serré. Ne transformez pas la distance en pourcentage de similarité non étayé. Les seuils comme « indiscernable » dépendent de la métrique, des conditions d’observation, de l’écran, des couleurs voisines, de l’observateur et de la tâche ; une recherche de catalogue n’a pas mesuré tous ces facteurs.

  • Affichez assez de détails numériques pour reproduire la comparaison et arrondissez de façon cohérente.
  • Proposez quelques candidats proches tout en gardant un résultat déterministe pour les URL et API.
  • Séparez mot CSS proche, noms éditoriaux, traductions, décisions d’accessibilité et recommandations de palette.
07

Vérifier l’implémentation avec des tests fixes

Les tests doivent protéger séparément données candidates, conversions, métrique et départage. Chaque couleur nommée doit se retrouver elle-même à distance nulle. Les paires d’alias doivent partager leurs coordonnées. Vérifiez des conversions de référence avec une tolérance annoncée ; les limites telles que noir, blanc, canaux extrêmes, casse HEX variable et couleurs hors gamut doivent suivre la politique. Figez quelques classements afin qu’une dépendance ou une formule modifiée ne réécrive pas silencieusement les pages indexées.

  • Validez exhaustivité et unicité par mot canonique en autorisant uniquement les alias de coordonnées enregistrés.
  • Testez syntaxe invalide, alpha, gamut, correspondances exactes, classements serrés et départage déterministe.
  • Versionnez l’algorithme et recalculez volontairement après modification du jeu, des conversions ou de la métrique.
S

Sources primaires

Les affirmations factuelles de cet article sont vérifiées dans ces spécifications publiées.

  1. W3C CSS Color Module Level 4 — couleurs nommées
  2. W3C CSS Color Module Level 4 — exemples de conversion des couleurs
  3. W3C CSS Color Module Level 4 — Delta E 2000
  4. W3C CSS Color Module Level 4 — Delta E OK