Derives a full UI palette from one or two brand colors: state variants, brand-tinted greys and semantic colors as roles.
$ npx skills add https://craftwork.design/skills/algorithmic-color-palette -a claude-code -y
Installs into .claude/skills/algorithmic-color-palette. Add -g for every project.
SKILL.md
Algorithmic Colour Palette
A brand palette of 2–3 colours is not enough for a UI. You need shades for states (hover, active, disabled), neutrals for backgrounds and borders, and semantic colours for status. Deriving these algorithmically from the brand colours produces a palette that feels coherent — everything is visually related to the brand rather than pulled from a generic grey or a stock colour library.
Don't guess the seed colours — extract them (dembrandt engine, optional). If the brand already exists on the web, pull its real palette off the live site instead of eyeballing a hex: get_color_palette (or the extract-design skill) returns the actual computed brand and neutral colours from the DOM, which you then expand with the methods below. See extract-design for setup.
Deriving Interactive State Colours
From each brand colour, generate at minimum three variants: base, darker (hover/active), lighter (tint/background).
Generic greys (#666, #999, #eee) feel disconnected from the brand. Desaturating the brand hue produces greys that are subtly tinted — warm, cool, or neutral depending on the brand — and feel like they belong to the same palette.
Optical Comfort: Avoiding Pure Black on White
Pure black #000000 on pure white #FFFFFF causes halation and eye strain. Use a near-black such as #222222 (grey-900) for text and an off-white such as #EEEEEE (grey-50) for backgrounds; the softened pair still passes WCAG AA/AAA and reads as less harsh.
Publish Roles, Not Only Swatches
Named chips with hex values are not a system until each colour has a role: surface, surface tint, text, link, accent, decoration. Name the humble roles too, the off-white behind cards, stripes and hairlines. A role left unnamed is filled by a framework default, which is how an off-brand neutral ends up painting most of the pixels. Two teams inventing the same missing tint with different values means a role is missing, not a colour.
--color-grey-900: hsl(224, 12%, 10%); /* #16171f — slightly blue-black */
--color-grey-500: hsl(224, 8%, 50%); /* #7b7e8a — cool grey */
--color-grey-200: hsl(224, 5%, 82%); /* #cfd0d5 — cool light border */
--color-grey-50: hsl(224, 3%, 96%); /* #f4f4f6 — near-white with a hint of blue */
Compare to generic #f5f5f5 (no hue) — the brand-tinted version is subtly different but feels intentional.
Semantic Colour Derivation
Status colours (error, warning, success, info) should feel harmonious with the brand. To achieve cohesion, align their Saturation and Lightness to create a consistent "visual weight" across the status set.
Method: Aligned visual weight
Pick the Hues: Use standard semantic hues (0 for Error, 38 for Warning, 142 for Success).
Align S & L: Use the saturation and lightness of your Brand Primary as a starting point.
Adjust for Perceived Brightness: Hues like Yellow/Orange (Warning) feel brighter than Blue/Red. Reduce the lightness of Warning by 5–10% compared to Success or Error to ensure they feel equally "heavy" on the page.
Semantic
Hue (H)
Saturation (S)
Lightness (L)
Error
0–10
Match Primary
Match Primary
Warning
35–45
Match Primary
Primary L - 10%
Success
140–160
Match Primary
Match Primary
Info
210–230
Match Primary
Match Primary
The "Vibrancy" Rule: If the brand is muted (low saturation), the semantic colours should also be slightly muted. If the brand is neon/vibrant, the semantics should follow suit. Cohesion comes from shared intensity.
Functional and Interactive Colours
Standard UI elements require dedicated functional tokens beyond basic brand and semantic colours.
Focus States
Focus indicators are critical for accessibility. Use a high-visibility colour that works on all backgrounds.
Default: Brand Primary (if contrast is high enough).
Fallback: A dedicated high-contrast blue hsl(215, 95%, 50%).
Token:--color-focus.
Selection and Highlights
Text selection and list item highlights should be subtle and non-distracting.
Method: Use the primary hue with very high lightness (90%+) and moderate saturation.
Token:--color-selection.
Overlays and Modals
Backdrops for modals or drawers need a neutral, semi-transparent colour.
Method: Use your grey-900 hue with an alpha channel.
Token:--color-overlay: hsla(H, 12%, 10%, 0.5);
Skeleton and Loading
Loading states should be neutral and recessive.
Method: Use grey-200 as the base and grey-100 as the shimmer highlight.
Token:--color-skeleton.
Disabled States
Disabled elements must communicate unreachability.
Method: Use grey-500 for text and grey-200 for backgrounds/borders.
Rule: Avoid using brand tints for disabled backgrounds to prevent "pseudo-active" confusion.
Brand-Tinted Shadows
Premium UIs avoid pure black shadows. Use a very dark, desaturated brand hue.
Method:hsla(H, 15%, 5%, alpha) where H is the brand hue.
Token:--color-shadow-base.
Links
Base: Brand Primary or a dedicated high-visibility blue.
Visited: Shift primary hue toward purple (+20) and reduce saturation.
Token:--color-link, --color-link-visited.
Input and Validation
Method: Use semantic base colours for borders and text in error/success states.
