skills.rest
svengraziani
svengrazianiCOMMUNITY
Explore all skills by this author →
Website𝕏@graziani_svenGitHub

color-palettes

Generate 12 balanced color palettes with hex and HSL values for UI design systems.

2|Updated Feb 5, 2026
Search Tags:#design#ui#accessibility#css#tailwind#colors
One-click install
npx skills add https://github.com/svengraziani/ui-design --skill color-palettes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palettes
Source: https://github.com/svengraziani/ui-design/tree/main/.claude/skills/color-palettes
Command: npx skills add https://github.com/svengraziani/ui-design --skill color-palettes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill eliminates the guesswork and inconsistency in UI color selection by providing a curated, accessible, and cohesive set of color scales for design systems.

Core Features & Use Cases

  • Cohesive Palettes: Access 12 professionally balanced color palettes including primary, neutral, and supporting shades.
  • Semantic Scaling: Each palette features a 50-900 shade scale, perfect for defining CSS custom properties or Tailwind theme configurations.
  • Use Case: When building a new dashboard, use this skill to instantly generate a consistent color foundation for buttons, text, backgrounds, and semantic error/success states.

Quick Start

Apply the color-palettes skill to generate a primary and neutral color scale for a new dashboard design.

Frequently Asked Questions about color-palettes

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

FAQPage Schema
How do I generate accessible UI color scales for a design system?▼

Accessible UI color scales are generated using a curated library of 12 balanced palettes with exact hex and HSL values, providing 50-900 shade ranges for consistent application across backgrounds, text, and interactive elements.

How do I configure Tailwind theme colors using a 50-900 shade scale?▼

Configuring Tailwind theme colors involves applying standardized 50-900 semantic color scales to define primary, neutral, and supporting shades, ensuring consistent UI color application across web application components.

What is the best way to define primary and neutral colors for a web dashboard?▼

The best way to define dashboard colors is using professionally balanced color palettes that provide exact hex and HSL values, establishing a consistent color foundation for buttons, text, and semantic states.

Can I use these color palettes to define CSS custom properties for component libraries?▼

Yes, you can define CSS custom properties using the provided 50-900 shade scales, which offer exact hex and HSL values for establishing semantic color scales within component libraries.

Does this provide exact hex and HSL values for semantic error and success states?▼

Yes, it provides exact hex and HSL values across 12 balanced palettes, allowing you to instantly define semantic error and success states alongside primary and neutral UI colors.

Related Skills

Explore More Design & Creative Skills→
dembrandtdembrandt
33

algorithmic-color-palette

Generate CSS-ready color tokens and palettes from brand colors using HSL adjustments.

Official
Intermediate
cynthiateeterscynthiateeters

CSS color standards

Enforce HSL color standards and CSS custom properties in :root.

Community
Basic
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced
jholhewresjholhewres
3

color-contrast

Calculate WCAG contrast ratios between foreground and background colors.

Community
Basic