Algorithmic Colour Palette

Derives hover/active/tint/grey/semantic tokens from one brand hex via fixed HSL formulas.

Tested · Works

Test report

Verdict
Tested · Works
Score
9.6/10
Tested
Jul 14, 2026
Environment
Claude Code 2.x (agent harness)
Upstream re-checked
Aug 10, 2026 · 3810f39

Ran the actual HSL math on brand colour #2D6A4F (H153/S40/L30) for real: skill output produced greys that are visibly green-tinted (#161d1a, #45544d, #f4f5f5) and semantic colours locked to the brand's own 40% saturation, versus the unguided baseline's stock Tailwind greys and default red/amber/green that share no hue or intensity relationship with the brand at all.

Scored on four weighted criteria — install, triggering, output vs. baseline, docs. How scoring works

  • Installs cleanly 5/5
  • Triggers reliably 5/5
  • Output vs. baseline 9/10
  • Docs & honesty 5/5

What Algorithmic Colour Palette does

Expands one or two brand colours into a full UI colour system using explicit HSL-adjustment formulas: darker/lighter interactive states, brand-hue-desaturated greys instead of generic neutrals, and semantic status colours aligned to the brand's saturation and lightness. Triggers when building or extending a colour system, choosing hover/active shades, or generating tokens for CSS/Tailwind/design-system files.

How to install Algorithmic Colour Palette

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

Skills live in ~/.claude/skills/ (global) or .claude/skills/ (per-project). Restart Claude Code after installing.

Commands — how to trigger Algorithmic Colour Palette

  • /algorithmic-color-palette Derives hover/active/tint/grey/semantic tokens from one brand hex via fixed HSL formulas.

It also activates on plain-language prompts like these:

  • 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

Frequently asked questions

Is the Algorithmic Colour Palette skill free?
Yes. The skill itself is free from dembrandt/dembrandt-skills. SkillProof publishes the install command and an independent test verdict at no cost.
Does Algorithmic Colour Palette work with Claude Code?
We tested it with Claude Code 2.x (agent harness) on Jul 14, 2026. Verdict: Tested · Works. Ran the actual HSL math on brand colour #2D6A4F (H153/S40/L30) for real: skill output produced greys that are visibly green-tinted (#161d1a, #45544d, #f4f5f5) and semantic colours locked to the brand's own 40% saturation, versus the unguided baseline's stock Tailwind greys and default red/amber/green that share no hue or intensity relationship with the brand at all.
What is the Algorithmic Colour Palette SkillProof Score?
9.6/10 — installs cleanly 5/5, triggers reliably 5/5, output vs. baseline 9/10, docs & honesty 5/5.
How do I install Algorithmic Colour Palette?
Copy the install command from this page, run it in your terminal, and restart Claude Code. Skills live in ~/.claude/skills/ (global) or .claude/skills/ inside a project.
Can I use Algorithmic Colour Palette with Cursor, Copilot, Gemini CLI, Codex or other AI tools?
The SKILL.md format is native to Claude (Claude Code, Desktop, claude.ai). The instructions inside adapt to other assistants: Cursor rules, GitHub Copilot instructions, Windsurf rules, Custom GPTs, AGENTS.md for OpenAI Codex, and GEMINI.md for Google Gemini CLI — our conversion guides cover each, and the free converter on the tools page does the wrapping for you.