color-palette

Generate accessible UI color palettes with contrast validation and 50-950 scales.

Updated Jan 11, 2026
One-click install
npx skills add https://github.com/nhatmobile1/claude-skills --skill color-palette
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/nhatmobile1/claude-skills/tree/main/skills/color-palette
Command: npx skills add https://github.com/nhatmobile1/claude-skills --skill color-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Designers and teams struggle to create distinctive, accessible color palettes that avoid generic AI aesthetics. This skill provides domain-specific palettes, color theory guidance, and built-in accessibility checks to ensure readability and inclusivity across light and dark modes.

Core Features & Use Cases

  • Domain-specific palette generation: Tech/SaaS, E-commerce, Healthcare, Finance, Creative, and Food with curated examples.
  • Accessibility validation: WCAG contrast checks and guidance for semantic color usage.
  • Full color system scaffolding: Primary, secondary, accent, neutral, and semantic colors with a scalable 50-950 range.
  • Reference guidance: Color theory, accessibility best practices, and anti-AI pitfall guidance.
  • Use case: Build a complete design system for a new product or refresh an existing brand with a distinctive, usable palette.

Quick Start

Run the color-palette skill to generate a complete color scale from a base color, for example "#264653" for a Tech/SaaS dashboard.

Frequently Asked Questions about color-palette

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate an accessible color palette for a web design system?

To generate an accessible color palette, input a base color like "#264653" to output a full color system with 50-950 scales, semantic naming, and WCAG contrast checks. This ensures readability and inclusivity across light and dark modes.

What is domain-specific color palette generation for UI design?

Domain-specific color palette generation creates curated color systems tailored to industries like Tech/SaaS, E-commerce, Healthcare, Finance, Creative, and Food. It applies color theory guidance to avoid generic AI aesthetics and ensure brand distinctiveness.

How do I validate WCAG contrast for semantic colors in a design system?

Validate WCAG contrast for semantic colors using built-in accessibility checks and reference scripts provided by the palette generation process. This confirms that your semantic color usage meets readability standards for all users.

Can I build a complete design system palette from a single base color?

Yes, you can build a complete design system palette from a single base color. The process scaffolds primary, secondary, accent, neutral, and semantic colors, expanding your initial hex value into a scalable 50-950 range.

What's the best way to avoid generic AI color aesthetics in UI design?

The best way to avoid generic AI color aesthetics is to use domain-specific palette generation with anti-AI pitfall guidance and curated industry examples. This approach ensures distinctive, usable palettes for new products or brand refreshes.