skills.rest
dennislee928
dennislee928COMMUNITY
Explore all skills by this author →
WebsiteGitHub

color-palette

Generate accessible 11-shade color palettes with WCAG contrast checks.

54|Updated Nov 19, 2025
Search Tags:#accessibility#design system#color palette#tailwind#brand colors#dark mode
One-click install
npx skills add https://github.com/dennislee928/Ethic-Latex --skill color-palette-dennislee928
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/dennislee928/Ethic-Latex/tree/main/.claude/skills/color-palette
Command: npx skills add https://github.com/dennislee928/Ethic-Latex --skill color-palette-dennislee928

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of complete, accessible color palettes from a single brand hex color, eliminating the guesswork and time spent on manual color generation and accessibility checks.

Core Features & Use Cases

  • Shade Generation: Creates an 11-shade scale (50-950) from a base hex color.
  • Semantic Tokens: Maps shades to design tokens like background, foreground, primary, muted, etc.
  • Dark Mode Variants: Generates complementary dark mode colors.
  • WCAG Contrast Checking: Verifies accessibility ratios for text and UI elements.
  • Use Case: Quickly set up a design system's color theme for a new project by providing just the brand's primary hex code.

Quick Start

Generate a complete color palette and CSS variables for the brand hex color #0D9488.

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 from a single brand hex color?▼

Generating an accessible color palette from a brand hex color involves creating an 11-shade scale (50-950) using HSL color space interpolation, mapping them to semantic tokens, and verifying text and UI element contrast against WCAG standards.

How do I create semantic design tokens for dark mode from a base color?▼

Creating semantic design tokens for dark mode from a base color involves mapping an 11-shade generated color scale to tokens like background, foreground, and muted, while generating complementary dark mode variants to ensure theme consistency.

Can I output Tailwind v4 CSS variables for my design system color palette?▼

Yes, you can output Tailwind v4 CSS variables for your design system color palette by utilizing the @theme syntax to generate CSS variables directly from the 11-shade scale and semantic tokens derived from your brand hex color.

What is the best way to ensure my brand colors meet WCAG contrast requirements?▼

The best way to ensure brand colors meet WCAG contrast requirements is to perform automated contrast ratio checks on text and UI elements after generating an 11-shade scale and semantic tokens from your base hex color.

Does this color generation method support both light and dark mode theme setup?▼

Yes, the color generation method supports both light and dark mode theme setup by generating complementary dark mode color variants alongside light mode semantic tokens, mapped directly from an 11-shade scale based on your brand hex.

Related Skills

Explore More Design & Creative Skills→
evolv3aievolv3ai
3

color-palette

Generate 11-shade color palettes with WCAG contrast checks and Tailwind v4 @theme syntax.

Community
Intermediate
dz07dz07

Colors

Generate WCAG-compliant color palettes with semantic tokens and contrast calculations.

Community
Intermediate
brendadeeznuts1111brendadeeznuts1111

color-palette

Generate 11-shade color palettes from a brand hex color with WCAG contrast checks.

Community
Intermediate
andronicsandronics
1

color-tools

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

Community
Intermediate