Algorithmic Colour Palette

Härleder hover/active/tint/grey/semantic-tokens från en varumärkeshex via fasta HSL-formler.

av dembrandt · dembrandt/dembrandt-skills

Testad · Fungerar ★ 9.6/10

Algorithmic Colour Palette — Härleder hover/active/tint/grey/semantic-tokens från en varumärkeshex via fasta HSL-formler.

Vad den gör

Utökar en eller två varumärkesfärger till ett komplett UI-färgsystem med explicita HSL-justeringsformler: mörkare/ljusare interaktiva tillstånd, varumärkesnyans-avmättade gråtoner istället för generiska neutrala, och semantiska statusfärger anpassade till varumärkets mättnad och ljushet. Utlöses vid byggande eller utökning av ett färgsystem, val av hover/active-nyanser, eller generering av tokens för CSS/Tailwind/design-system-filer.

Testrapport

Körde den faktiska HSL-matematiken på varumärkesfärgen #2D6A4F (H153/S40/L30) på riktigt: skicklighetens utdata producerade gråtoner som är synbart grönfärgade (#161d1a, #45544d, #f4f5f5) och semantiska färger låsta till varumärkets egen 40% mättnad, jämfört med den ovägledda baslinjens standard Tailwind-gråtoner och standard röd/gul/grön som inte delar någon nyans- eller intensitetsrelation med varumärket alls.

Testad: 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

Kommandon och exempelprompter

/algorithmic-color-paletteHärleder hover/active/tint/grey/semantic-tokens från en varumärkeshex via fasta HSL-formler.

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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 hela rapporten →