skills.rest
hulusi-tunc
hulusi-tuncCOMMUNITY
Explore all skills by this author →
GitHub

color-system

Generate accessible color palettes with contrast ratios and dark-mode mappings.

3|Updated Mar 28, 2026
Search Tags:#theming#accessibility#contrast#design-system#color-palette#color-system
One-click install
npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill color-system-hulusi-tunc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-system
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/ui-design--color-system
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill color-system-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build accessible, scalable color systems quickly to ensure consistent branding and UI contrast across products.

Core Features & Use Cases

  • Generate comprehensive brand, neutral, semantic, and extended palettes with tonal scales.
  • Provide accessibility- compliant contrast guidance and dark-mode mappings.
  • Offer usage guidelines and examples for components, tokens, and design systems.

Quick Start

Generate a complete color system for a brand's UI, including primary, neutral, semantic palettes, and accessibility mappings.

Frequently Asked Questions about color-system

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

FAQPage Schema
How do I build an accessible color system for digital products?▼

To build an accessible color system, generate comprehensive brand, neutral, semantic, and extended palettes with tonal scales, ensuring contrast compliance for text and UI components in both light and dark modes.

What is the best way to ensure contrast compliance for UI components?▼

Ensuring contrast compliance involves applying AA and AAA contrast ratios to your color palettes, generating accessible tint and shade scales, and following usage guidance for UI components.

Can I generate dark mode mappings for my brand color palette?▼

Yes, you can generate dark mode mappings for your brand color palette by creating comprehensive tonal scales that conform to accessibility requirements across both light and dark modes.

How do I create semantic and extended color palettes with tint and shade scales?▼

Create semantic and extended color palettes by generating comprehensive tonal scales that provide accessible color variations, ensuring consistent branding and contrast across your digital products.

Does the color system provide usage guidelines for design tokens?▼

Yes, the color system provides usage guidelines and examples for components, tokens, and design systems to ensure consistent branding and accessible UI contrast across products.

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
andronicsandronics
1

color-tools

Generate accessible color palettes and validate WCAG contrast for UI designs.

Community
Intermediate
svengrazianisvengraziani
2

ui-design-principles

Guide CSS/HTML styling with visual hierarchy, spacing, typography, and depth principles.

Community
Intermediate
ChoreShoreChoreShore

color-contrast

Validate WCAG 2.1 color contrast ratios and suggest compliant alternatives.

Official
Intermediate