CLI-Tool zum Erzeugen von CSS-Farbcodes, das bei abgestuften Helligkeiten und Kombinationen von Text-, Hintergrund- und Rahmenfarben hilft

Üblicherweise werden Farben, die auf Websites oder in Apps verwendet werden, vorab definiert.

Es ist nicht schwierig, eine Farbpalette festzulegen, bei der Helligkeit und Sättigung gleich sind und sich nur der Farbton (Hue) unterscheidet.

Es gibt jedoch Fälle, in denen Sättigung und Farbton gleich bleiben, aber mehrere Helligkeitsstufen benötigt werden, etwa bei Text, der zunehmend blasser (heller) wird, oder bei Hintergründen, die zunehmend kräftiger (dunkler) werden.

Dabei müssen Text, Hintergrund und Rahmen jeweils mit unterschiedlichen Helligkeitsstufen deklariert werden. Wenn 100 % der hellste Helligkeitswert ist, fällt eine Box mit einer Hintergrundfarbe von 96 % Helligkeit auf Weiß zwar auf, aber wenn man 96 % Helligkeit auf die Textfarbe anwendet, ist der Text nicht sichtbar.

Außerdem werden Text, Hintergrund und Rahmen nicht jeweils isoliert verwendet. Diese drei werden in Kombination genutzt. Wenn man die einzelnen Farben deklariert und anschließend kombiniert, kann es passieren, dass der Text auf dem Hintergrund nicht sichtbar ist oder Hintergrund und Linie nicht unterscheidbar sind. Das abzustimmen ist nicht einfach.

Wenn man für Text, Hintergrund und Rahmen jeweils 4 Helligkeitsstufen einführt, ergeben sich ganze 64 Kombinationen; berücksichtigt man zusätzlich den Dark Mode, muss man zwei Sätze mit je 64 Kombinationen erstellen.

Deshalb habe ich ein CLI-Tool entwickelt, mit dem man Farben und Helligkeitsstufen für Text, Hintergrund und Rahmen festlegen und alle Kombinationen auf einen Blick sehen kann.

Auf Basis einer Konfigurationsdatei im YAML-Format erzeugt es CSS-Farbcodes.

Es bietet eine Vorschaufunktion, mit der alle Stufen von Text, Hintergrund und Rahmen im Light/Dark Mode auf einen Blick sichtbar sind und sich Kombinationen ausprobieren lassen.

Nebenbei wurde dieses Programm per Pair Programming mit einer lokalen LLM-gestützten AI entwickelt. Ich habe vorgegeben, wie der Code umgesetzt werden soll, und die AI die physische Coding-Arbeit machen lassen.

Die lokale LLM-Umgebung sieht wie folgt aus.

• CPU: Apple M3 Max 64GB
• Haupt-Coding-Modell: Qwen3.6-35B-A3B
  • Tatsächlich verwendetes quantisiertes Modell: Qwen3.6-35B-A3B-oQ4e-fp16-mtp
• Haupt-LLM-Runtime: oMLX
• Coding-Agent: Pi Coding Agent