palette-generator

Generate OKLCH color palettes with WCAG AA/AAA contrast ratios and dark mode variations.

22|3|Updated Jan 10, 2026
One-click install
npx skills add https://github.com/fusengine/agents --skill palette-generator
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: palette-generator
Source: https://github.com/fusengine/agents/tree/main/plugins/design-expert/skills/palette-generator
Command: npx skills add https://github.com/fusengine/agents --skill palette-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the creation of color palettes that adhere to modern design standards, ensuring both aesthetic appeal and accessibility.

Core Features & Use Cases

  • OKLCH Color System: Generates colors using the perceptually uniform OKLCH format for consistent results.
  • WCAG Contrast Ratios: Automatically checks and ensures compliance with WCAG AA and AAA contrast requirements.
  • Sector-Specific Palettes: Can generate palettes tailored to specific industry needs.
  • Use Case: A designer needs a new color scheme for a web application. They can use this Skill to generate a primary color scale, dark mode variants, and semantic colors (success, warning, error) that are all WCAG compliant.

Quick Start

Use the palette-generator skill to create a 10-step scale for the color oklch(55% 0.18 245) and output it in the palette-template.md format.

Frequently Asked Questions about palette-generator

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

FAQPage Schema
How do I generate a color palette that meets WCAG contrast requirements?

To generate a WCAG-compliant color palette, this Skill uses the OKLCH color system to create perceptually uniform scales and automatically checks them against WCAG AA and AAA contrast ratios for accessibility.

Can I export accessible color scales as Tailwind CSS configuration tokens?

Yes, you can export accessible color scales as Tailwind CSS configurations, as the Skill provides templates for both Tailwind config files and CSS custom properties to facilitate consistent theming across projects.

What is the best way to create dark mode color variations using the OKLCH color system?

The best way to create dark mode variations using the OKLCH color system is to generate a perceptually uniform base palette, which the Skill then automatically adapts into accessible dark mode variants.

How do I build a 10-step color scale from a specific OKLCH color value?

You can build a 10-step color scale by providing a specific OKLCH color value, such as oklch(55% 0.18 245), and the Skill will generate the full perceptually uniform gradient output in a palette template format.

Does this tool generate semantic colors like success, warning, and error states?

Yes, the tool generates semantic colors including success, warning, and error states, ensuring that these specific industry-tailored palettes also maintain strict WCAG AA and AAA contrast compliance.

When should I use OKLCH over other color formats for web design palettes?

You should use OKLCH over other color formats when you need perceptually uniform color scales that maintain consistent visual lightness across hues, which is critical for creating accessible and predictable UI design tokens.