Un outil CLI qui génère des codes couleur CSS en aidant à définir les niveaux de luminosité et les combinaisons pour le texte, l’arrière-plan et les bordures

En général, les couleurs utilisées sur un site ou dans une application sont définies à l’avance.

Il n’est pas difficile de choisir une palette de couleurs dont la luminosité et la saturation sont identiques, mais dont seule la teinte (Hue) varie.

Mais il existe des cas où la saturation et la teinte restent les mêmes, tout en nécessitant plusieurs niveaux de luminosité, par exemple un texte qui devient progressivement plus pâle (plus clair) ou un arrière-plan qui devient progressivement plus intense (plus sombre).

Dans ce cas, le texte, l’arrière-plan et les bordures doivent chacun être déclarés avec des niveaux de luminosité différents. Si l’on considère que 100 % correspond à la luminosité maximale, une boîte avec une couleur d’arrière-plan à 96 % de luminosité se distingue sur du blanc, mais appliquer cette même luminosité de 96 % à une couleur de texte la rend invisible.

De plus, le texte, l’arrière-plan et les bordures ne sont pas utilisés isolément. Les trois sont combinés. Après avoir déclaré chaque couleur puis essayé les combinaisons, il peut arriver que le texte ne soit pas visible sur l’arrière-plan, ou que l’arrière-plan et le trait ne se distinguent pas. Les ajuster n’est pas simple.

Si l’on introduit 4 niveaux de luminosité pour chacun — texte, arrière-plan et bordure — cela représente pas moins de 64 combinaisons ; et si l’on tient compte du mode sombre, il faut créer deux ensembles de 64 combinaisons.

J’ai donc créé un outil CLI qui permet de configurer les couleurs et les niveaux de luminosité du texte, de l’arrière-plan et des bordures, et de voir toutes les combinaisons d’un coup d’œil.

Il génère du code couleur CSS à partir d’un fichier de configuration au format YAML.

Il fournit une fonction de prévisualisation qui permet de voir d’un coup d’œil tous les niveaux du texte, de l’arrière-plan et des bordures en modes clair/sombre, ainsi que d’essayer leurs combinaisons.

Accessoirement, ce programme a été développé en pair programming avec une IA, à l’aide d’un LLM local. J’indiquais comment le code devait être implémenté, et j’ai laissé à l’IA le travail physique de codage.

L’environnement LLM local est le suivant.

• CPU : Apple M3 Max 64GB
• Modèle principal pour le codage : Qwen3.6-35B-A3B
  • Modèle quantifié réellement utilisé : Qwen3.6-35B-A3B-oQ4e-fp16-mtp
• Moteur principal d’exécution du LLM : oMLX
• Agent de codage : Pi Coding Agent