color-palette

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

Updated Jan 29, 2026

Search Tags:#accessibility #design system #color palette #tailwind css #brand colors #dark mode

Ready to run

npx skills add https://github.com/brendadeeznuts1111/tier-1380-omega --skill color-palette-brendadeeznuts1111

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: color-palette
Source: https://github.com/brendadeeznuts1111/tier-1380-omega/tree/main/skills/color-palette
Command: npx skills add https://github.com/brendadeeznuts1111/tier-1380-omega --skill color-palette-brendadeeznuts1111

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill automates the creation of complete, accessible color palettes from a single brand hex color, eliminating guesswork and ensuring design consistency.

Core Features & Use Cases

Shade Generation: Creates an 11-shade scale (50-950) from your brand's primary color.
Semantic Tokens: Maps shades to meaningful design tokens (e.g., background, foreground, primary).
Dark Mode Variants: Generates complementary dark mode colors.
WCAG Contrast Checking: Verifies text accessibility ratios.
Use Case: When setting up a new design system or theming a web application, use this Skill to generate a robust and accessible color system based on your brand's core color.

Quick Start

Generate a complete color palette from 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 color?▼

Generate an accessible color palette by inputting a single brand hex color to produce an 11-shade scale from 50-950. The palette includes semantic tokens and verifies WCAG contrast ratios for text accessibility.

How do I set up dark mode semantic tokens for a design system?▼

Set up dark mode semantic tokens by generating complementary dark mode variants from your base brand color. The system maps 11-shade scales to meaningful design tokens like background and foreground for both light and dark themes.

Does this color palette generator support Tailwind v4 theme syntax?▼

Yes, the color palette generator supports Tailwind v4 @theme syntax. It uses HSL color manipulation to ensure consistent shade generation that integrates directly with Tailwind CSS theme configurations.

What is WCAG contrast checking and how does it apply to brand colors?▼

WCAG contrast checking verifies text accessibility ratios against background colors. When generating brand color palettes, it ensures semantic tokens like foreground and background meet minimum contrast standards for readable UI design.

Can I create a complete design system color scale from one hex color?▼

Yes, you can create a complete design system color scale from one hex color. The system generates an 11-shade scale ranging from 50 to 950, providing the full spectrum needed for robust UI theming and brand color application.

Why does my generated color palette fail accessibility contrast checks?▼

Generated color palettes can fail WCAG accessibility contrast checks when semantic token mappings lack sufficient lightness differentiation. The system addresses this by using HSL color manipulation to verify and maintain accessible text contrast ratios.