skills.rest
Shaarav4795
Shaarav4795COMMUNITY
Explore all skills by this author →
GitHub

color-palette

Generate an 11-shade color scale and Tailwind v4 CSS template from a brand hex.

Updated Mar 25, 2026
Search Tags:#contrast#tailwind#brand#design-system#palette#color-palette
One-click install
npx skills add https://github.com/Shaarav4795/ScholarFlow --skill color-palette-shaarav4795
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/Shaarav4795/ScholarFlow/tree/main/.agents/skills/color-palette
Command: npx skills add https://github.com/Shaarav4795/ScholarFlow --skill color-palette-shaarav4795

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Designers need a scalable, accessible color system generated from a single brand hex to ensure visual consistency and accessibility across products.

Core Features & Use Cases

  • Generates an 11-shade color scale (50-950) from a single hex
  • Produces semantic tokens and dark-mode variants
  • Outputs a Tailwind v4 CSS template ready to paste into projects
  • Includes WCAG contrast checks and guidance for adjustments Use the color-palette skill when starting a design system, building brand themes, or auditing color accessibility.

Quick Start

Provide a brand hex value (e.g., #0D9488) to instantly generate a complete, accessible color system with CSS output.

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 code?▼

To generate an accessible color palette from a single brand hex, provide the hex value to instantly produce an 11-shade scale (50-950), semantic tokens, and dark-mode variants with built-in WCAG contrast guidance.

Can I create a Tailwind v4 CSS theme from one brand color?▼

Yes, you can create a Tailwind v4 CSS theme from one brand color by inputting a single hex value, which outputs a ready-to-paste CSS template containing semantic tokens and an 11-shade scale.

What is the best way to build a design system color scale that meets WCAG contrast standards?▼

Building a design system color scale that meets WCAG contrast standards is best achieved by generating an 11-shade scale from a single hex, complete with semantic tokens and contrast guidance for light and dark modes.

Does this color system generator provide dark mode variants for semantic tokens?▼

Yes, this color system generator provides dark mode variants for semantic tokens alongside an 11-shade color scale, ensuring visual consistency and accessibility across light and dark product themes.

How do I audit brand color accessibility for a design system?▼

You audit brand color accessibility by inputting your brand hex to generate a complete color system, which includes WCAG contrast checks and specific guidance for adjusting shades to meet accessibility standards.

Related Skills

Explore More Design & Creative Skills→
brendadeeznuts1111brendadeeznuts1111

color-palette

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

Community
Intermediate
dylantarredylantarre
38

color-scale

Generate 11-step OKLCH color scales from a base hex color.

Community
Basic
svengrazianisvengraziani
2

color-palettes

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

Community
Basic
aleeM42aleeM42

color-palette

Generate accessible color palettes from a brand hex code with Tailwind v4 CSS output.

Community
Intermediate