From nickcrew-claude-ctx-plugin
Creates, evaluates, and documents accessible color palettes for brands, products, and design systems with WCAG contrast checks and semantic color tokens.
npx claudepluginhub nickcrew/claude-cortexThis skill uses the workspace's default tool permissions.
This skill helps you create purposeful, accessible, and cohesive color palettes for digital products and brands. Color is one of the highest-leverage design decisions you can make—it communicates brand personality, guides user attention, conveys meaning, and determines whether your product is usable by people with visual impairments. This skill covers brand palette creation, semantic color syst...
Builds accessible color systems with palettes, semantic mappings, tonal scales, and contrast checks for UI components in digital products.
Generates accessible color palettes from brand hex: 11-shade scales (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS, WCAG contrast checks. For design systems and themes.
Handles color operations for developers: spaces (OKLCH/OKLAB/HSL), accessibility contrast (WCAG/APCA), palettes, CSS functions, design tokens, dark mode, CVD simulation.
Share bugs, ideas, or general feedback.
This skill helps you create purposeful, accessible, and cohesive color palettes for digital products and brands. Color is one of the highest-leverage design decisions you can make—it communicates brand personality, guides user attention, conveys meaning, and determines whether your product is usable by people with visual impairments. This skill covers brand palette creation, semantic color systems (primary, secondary, neutral, semantic), accessibility validation against WCAG standards, and design token documentation. The output is a structured, ready-to-use color system, not a mood board.
| Task | Approach |
|---|---|
| Brand palette | Start with 1 primary hue, add 1–2 accent hues, build neutrals |
| Accessibility | Text on background must meet 4.5:1 (AA) or 7:1 (AAA) contrast ratio |
| Semantic colors | Map roles: primary, secondary, success (#22c55e range), warning (#f59e0b range), danger (#ef4444 range) |
| Neutral scale | Generate 9–11 shades (50–950) from near-white to near-black |
| Dark mode | Don't invert; remap semantic roles to dark-optimized values |
| Data viz | Use categorical (distinct hues) or sequential (single hue, varying lightness) palettes |
| Token naming | Use semantic names: color.brand.primary, color.feedback.error, not hex values |
| Tints and shades | Generate 9 steps per color; 500 = base, 100 = lightest, 900 = darkest |
Gather brand context before choosing any color. Identify: industry, audience, competitors, brand personality keywords (e.g., "trustworthy, modern, approachable"), any existing brand colors that must be retained, and primary use case (web app, marketing site, mobile app). Color choices must serve the brand, not just look nice in isolation.
Choose the primary hue strategically. One hue anchors the entire system. Consider industry conventions (blue for trust/tech, green for health/finance, orange for energy/creativity), then differentiate. Generate a full 9-step scale for the primary hue (50, 100, 200, 300, 400, 500, 600, 700, 800, 900). The 500 step is typically the base brand color; 600–700 are used for hover and interactive states.
Add secondary and accent colors with intention. Secondary colors extend the palette for components, illustrations, and charts. Use color theory to select harmonious relationships: analogous (adjacent hues), complementary (opposite hues), or triadic (three evenly spaced hues). Limit to 1–2 secondary hues to avoid visual noise.
Build the neutral scale. Neutrals carry the most visual weight in a digital product (backgrounds, text, borders, dividers). Generate 9–11 steps from near-white to near-black. Slightly warm or cool the neutrals to complement your primary hue — pure gray often feels sterile.
Define semantic color roles. Map functional meaning to colors: primary (brand actions), secondary (alternative actions), success (completion, positive), warning (caution, needs attention), danger/error (destructive actions, failures), info (neutral information). Each semantic role needs a background, text, and border value at minimum.
Validate all combinations against WCAG accessibility standards. Every color combination used for text must meet WCAG 2.1 AA (4.5:1 contrast ratio for normal text, 3:1 for large text ≥18pt or 14pt bold). UI components and focus indicators must meet 3:1 against adjacent colors. Document the passing and failing combinations explicitly.
Plan for dark mode if required. Dark mode is not an inversion of the light palette. Remap your semantic tokens to dark-optimized values: reduce saturation on large surfaces, use lighter neutrals for text, and ensure the same contrast ratios hold. Background levels in dark mode typically use 900, 800, 700 steps rather than white.
Document as design tokens. Name every color using semantic, role-based names rather than descriptive names. color.brand.primary.500 is better than blue-medium. Provide hex, RGB, and HSL values. Group tokens by category: brand, semantic/feedback, neutral, data visualization.
Input: "Create a color palette for a fintech budgeting app called 'Vault'. Brand personality: trustworthy, calm, modern. Target users: millennials managing personal finances. Must be accessible."
Output:
Vault needs to signal financial trustworthiness (blue family) while feeling modern and approachable rather than cold and corporate. Primary: a confident teal-blue. Neutrals: cool-gray with a slight blue cast. Accents: a muted green for positive financial states, a warm amber for warnings.
| Token | Hex | Use |
|---|---|---|
brand.primary.50 | #eff6ff | Light backgrounds, hover states |
brand.primary.100 | #dbeafe | Tinted surface backgrounds |
brand.primary.200 | #bfdbfe | Borders, dividers on tinted surfaces |
brand.primary.400 | #60a5fa | Icons, secondary interactive |
brand.primary.500 | #2563eb | Base brand color |
brand.primary.600 | #1d4ed8 | Button hover, active states |
brand.primary.700 | #1e40af | Pressed states, emphasis |
brand.primary.900 | #1e3a8a | Dark text on light backgrounds |
| Role | Hex | Contrast on white | Use |
|---|---|---|---|
| Success | #16a34a | 5.1:1 ✅ AA | Positive balance, completed goals |
| Warning | #d97706 | 4.6:1 ✅ AA | Upcoming bills, low balance |
| Danger | #dc2626 | 5.8:1 ✅ AA | Overspent, failed transaction |
| Info | #0284c7 | 4.7:1 ✅ AA | Tips, informational messages |
| Token | Hex | Use |
|---|---|---|
neutral.50 | #f8fafc | App background |
neutral.100 | #f1f5f9 | Card backgrounds |
neutral.200 | #e2e8f0 | Borders, dividers |
neutral.400 | #94a3b8 | Placeholder text, icons |
neutral.600 | #475569 | Secondary body text |
neutral.800 | #1e293b | Primary body text — 16.7:1 on white ✅ AAA |
neutral.900 | #0f172a | Headings, high-emphasis text |
| Combination | Contrast | WCAG |
|---|---|---|
neutral.800 on neutral.50 | 16.7:1 | ✅ AAA |
brand.primary.500 on white | 5.1:1 | ✅ AA |
brand.primary.600 on white | 6.4:1 | ✅ AA |
White on brand.primary.500 | 5.1:1 | ✅ AA (large text) |
neutral.400 on white | 2.5:1 | ❌ Fail — use only for decorative, non-essential elements |
Input: "Audit this color palette for accessibility. Primary: #7c3aed (purple), Secondary: #f472b6 (pink), Text: #6b7280 (gray), Background: #ffffff (white), Error: #ef4444 (red). Fix any failures."
Output:
| Combination | Contrast | Result | Fix Required? |
|---|---|---|---|
Text #6b7280 on white | 4.1:1 | ❌ Fails AA (needs 4.5:1) | Yes |
Primary #7c3aed on white | 5.9:1 | ✅ AA Pass | No |
White on Primary #7c3aed | 5.9:1 | ✅ AA Pass | No |
Secondary #f472b6 on white | 2.5:1 | ❌ Fails AA | Yes |
White on Error #ef4444 | 4.1:1 | ❌ Fails AA | Yes |
Error #ef4444 on white | 4.1:1 | ❌ Fails AA | Yes |
Body text: Change #6b7280 → #4b5563
Secondary (pink): #f472b6 is too light for text use. Reserve for decorative elements only. For text or interactive use, use #be185d (5.0:1 ✅ AA) instead.
Error color: Change #ef4444 → #dc2626
#dc2626: 5.8:1 ✅ AA#dc2626 on white: 5.8:1 ✅ AA| Role | Old | New | Status |
|---|---|---|---|
| Primary | #7c3aed | #7c3aed | ✅ No change |
| Secondary (interactive) | #f472b6 | #be185d | 🔄 Updated |
| Body text | #6b7280 | #4b5563 | 🔄 Updated |
| Error | #ef4444 | #dc2626 | 🔄 Updated |
color.brand.primary.200