Color palette

Skill onfire7777/universal-ai-skills-library/skills/color-palette

Router-first AI skill system for Codex, Claude, Cursor, Hermes, Paperclip, OpenCode, and local AI stacks: search, preflight-route, and load 1,812 skills on demand without duplicating the corpus.

Install

npx -y skills add onfire7777/universal-ai-skills-library --skill color-palette

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, and Tailwind v4 CSS output. Includes WCAG contrast checking. Use when setting up design systems, creating Tailwind themes, building brand colours from a hex value, or checking colour accessibility.

The file declares its own license as Unspecified. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

3.4 KB, as published. Nobody here has run it

Colour Palette Generator

Generate a complete, accessible colour system from a single brand hex. Produces Tailwind v4 CSS ready to paste into your project.

Workflow

Step 1: Get the Brand Hex

Ask for the primary brand colour. A single hex like #0D9488 is enough.

Step 2: Generate 11-Shade Scale

Convert hex to HSL, then generate shades by varying lightness while keeping hue constant:

Shade	Lightness	Use Case
50	97%	Subtle backgrounds
100	94%	Hover states
200	87%	Borders, dividers
300	75%	Disabled states
400	62%	Placeholder text
500	48%	Brand colour
600	40%	Primary actions
700	33%	Hover on primary
800	27%	Active states
900	20%	Text on light bg
950	10%	Darkest accents

See references/shade-generation.md for the conversion formula.

Step 3: Map Semantic Tokens

Light mode:

--background: white;
--foreground: primary-950;
--card: white;
--card-foreground: primary-900;
--primary: primary-600;
--primary-foreground: white;
--muted: primary-50;
--muted-foreground: primary-600;
--border: primary-200;

Dark mode — invert lightness while preserving relationships:

--background: primary-950;
--foreground: primary-50;
--card: primary-900;
--card-foreground: primary-50;
--primary: primary-500;
--primary-foreground: white;
--muted: primary-800;
--muted-foreground: primary-400;
--border: primary-800;

Step 4: Check Contrast

WCAG minimum ratios:

Text (AA): 4.5:1 normal, 3:1 large (18px+)
UI Elements: 3:1

Quick check: primary-600 on white and white on primary-600. See references/contrast-checking.md for formula.

Step 5: Output Tailwind v4 CSS

@theme {
  --color-primary-50: #F0FDFA;
  --color-primary-100: #CCFBF1;
  --color-primary-500: #14B8A6;
  --color-primary-950: #042F2E;

  --color-background: #FFFFFF;
  --color-foreground: var(--color-primary-950);
  --color-primary: var(--color-primary-600);
  --color-primary-foreground: #FFFFFF;
}

.dark {
  --color-background: var(--color-primary-950);
  --color-foreground: var(--color-primary-50);
  --color-primary: var(--color-primary-500);
}

Copy assets/tailwind-colors.css as a starting template.

Common Adjustments

Too vibrant at light shades: Reduce saturation by 10-20%
Poor contrast on primary: Use shade 700+ for text
Dark mode too dark: Use shade 900 instead of 950 for backgrounds
Brand colour too light/dark: Adjust to shade 500-600 range

Reference Files

File	Purpose
`references/shade-generation.md`	Hex to HSL conversion, lightness values
`references/semantic-mapping.md`	Token mapping for light/dark modes
`references/dark-mode-palette.md`	Inversion patterns
`references/contrast-checking.md`	WCAG formulas, quick check table
`assets/tailwind-colors.css`	Complete CSS output template