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

Ready to run

npx skills add https://github.com/Shaarav4795/ScholarFlow --skill color-palette-shaarav4795

💬 Prompt for ChatGPT / Claude Chat▼

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.