skills.rest
gnurio
gnurioCOMMUNITY
Explore all skills by this author →
Website𝕏@nurijanianGitHub

build-color-palette

Generate greys, primary, and accent color palettes with role assignments and contrast validation.

240|11|Updated Apr 26, 2026
Search Tags:#accessibility#design system#color palette#contrast#ui design#semantic colors#hex shades
One-click install
npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill build-color-palette
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: build-color-palette
Source: https://github.com/gnurio/refactoring-ui-plugin/tree/main/skills/03-build-color-palette
Command: npx skills add https://github.com/gnurio/refactoring-ui-plugin --skill build-color-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of inconsistent, under-scoped UI color systems that force designers to improvise shades, break accessibility contrast, and fail to support real interface states.

Core Features & Use Cases

  • Systematic palette generation: Produces a comprehensive set of shades including 8-10 greys, 5-10 primary shades, and 5-10 shades per accent family.
  • Role-based mapping: Assigns each shade to specific UI roles (backgrounds, borders, text, hover/active states, and semantic meaning).
  • Accessibility and usability guardrails: Evaluates that text contrast meets WCAG AA targets and recommends fixes for common palette failures (too few greys, missing semantic colors, inconsistent opacity usage).

Quick Start

Use the skill to generate a full palette by providing your brand colors and the UI’s intended mood.

Frequently Asked Questions about build-color-palette

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

FAQPage Schema
How do I build a color palette that meets accessibility contrast standards for UI design?▼

To build an accessible color palette, generate 8-10 greys, 5-10 primary shades, and 5-10 accent shades, then validate text and interactive state contrast against WCAG AA targets to ensure usable UI design.

What is the best way to assign semantic colors and hex shades for a design system?▼

Assigning semantic colors involves mapping specific hex shades to UI roles like backgrounds, borders, hover states, and categorical accents, ensuring your design system supports real interface states systematically.

How many primary shades and grey colors do I need for a systematic UI color palette?▼

A systematic UI color palette requires 8-10 greys, 5-10 primary shades, and 5-10 shades per accent family, providing enough variation to cover backgrounds, text, borders, and interactive states.

Do I need explicit hex values to generate a full UI color palette?▼

Yes, generating a full UI color palette requires explicit hex values for your greys, primary shades, and accents to accurately calculate contrast ratios and assign specific roles within interface designs.

Can I use this color palette generation approach for form-heavy apps and dashboards?▼

Yes, this color palette generation approach applies directly to interface design scenarios like form-heavy apps, dashboards, and marketing pages that require comprehensive semantic colors and categorical accents for stateful components.

Why does my design system color palette fail accessibility contrast checks?▼

Your color palette may fail accessibility contrast checks due to too few greys, missing semantic colors, inconsistent opacity usage, or insufficient shade progressions that do not meet WCAG AA text contrast targets.

Related Skills

Explore More Design & Creative Skills→
resultanyildiziresultanyildizi
4

dominant-color

Extract dominant color and palette from images using ColorThief, outputting hex, rgb, or JSON.

Community
Intermediate
ngochuy13ngochuy13

color-palette

Generate accessible brand and UI color palettes with WCAG contrast ratios.

Community
Advanced
ArogyaReddyArogyaReddy

visual-design-foundations

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

Community
Advanced
vivalalovavivalalova

brand-color-extractor

Extracts official brand colors and generates an accessible VS Code theme color map.

Community
Advanced