Algorithmic Colour Palette

Udleder hover/active/tint/grey/semantic tokens fra en brand hex via faste HSL-formler.

Af dembrandt · dembrandt/dembrandt-skills

Testet · Virker ★ 9.6/10

Hvad det gør

Udvider en eller to brandfarver til et fuldt UI-farvesystem ved hjælp af eksplicitte HSL-justeringsformler: mørkere/lysere interaktive tilstande, gråtoner med brand-hue-desaturering i stedet for generiske neutrale, og semantiske statusfarver justeret til brandets egen mætning og lysstyrke. Triggers ved opbygning eller udvidelse af et farvesystem, valg af hover/active nuancer, eller generering af tokens til CSS/Tailwind/design-system filer.

Testrapport

Kørte den faktiske HSL-matematik på brandfarve #2D6A4F (H153/S40/L30) i virkeligheden: skill-output producerede gråtoner, der er synligt grøn-tonede (#161d1a, #45544d, #f4f5f5) og semantiske farver låst til brandets egen 40% mætning, i modsætning til den uguidede baseline's standard Tailwind gråtoner og standard rød/gul/grøn, der ikke deler nogen hue- eller intensitetsforhold med brandet overhovedet.

Testet: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/dembrandt/dembrandt-skills
cd dembrandt-skills
mkdir -p ~/.claude/skills
cp -r skills/algorithmic-color-palette ~/.claude/skills/algorithmic-color-palette

Kommandoer og eksempelprompter

/algorithmic-color-paletteUdleder hover/active/tint/grey/semantic tokens fra en brand hex via faste HSL-formler.

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

Generate a full color palette from our brand hex #2D6A4F
I need hover and active state colors for our primary button
Create brand-tinted grey tokens for our Tailwind config

Læs hele rapporten →