ui-color-palette-scale-palette

Generate complete UI color palettes with light and dark themes.

1|Updated Apr 18, 2026
One-click install
npx skills add https://github.com/a-ng-d/claude-ui-color-palette --skill ui-color-palette-scale-palette
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-color-palette-scale-palette
Source: https://github.com/a-ng-d/claude-ui-color-palette/tree/main/skills/ui-color-palette-scale-palette
Command: npx skills add https://github.com/a-ng-d/claude-ui-color-palette --skill ui-color-palette-scale-palette

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build complete UI color palettes from source colors efficiently, enabling consistent theming and design-system readiness.

Core Features & Use Cases

  • Generate full palettes using get_full_palette with OKLCH (or other spaces) and produce light/dark themes.
  • Preview palettes visually before export or deployment.
  • Prepare palettes for design tools or code export, integrating into design systems.

Quick Start

Provide the source colors and palette preferences, then run the palette builder to generate and preview the full palette.

Frequently Asked Questions about ui-color-palette-scale-palette

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

FAQPage Schema
How do I generate a full UI color palette from source colors for a design system?

To generate a UI color palette, provide source colors and preferences to execute the palette builder, which returns a PaletteData object with perceptually uniform scales and light/dark themes ready for deployment.

Can I create light and dark themes using OKLCH color space?

Yes, you can create light and dark themes using OKLCH color space by passing a BaseConfiguration with your chosen color space, which generates perceptually uniform scales for web and mobile applications.

How does perceptually uniform color scaling work for theming?

Perceptually uniform color scaling works by applying algorithm versions to source colors in spaces like OKLCH, ensuring consistent visual lightness and chroma steps across your UI palette and themes.

What do I need to configure before generating a color palette?

Before generating a color palette, you need to configure a BaseConfiguration containing a name, description, colorSpace, algorithmVersion, source colors, and Themes to execute the palette generation correctly.

What's the best way to preview a color palette before exporting it to code?

The best way to preview a color palette before export is to use the generated PaletteData object downstream, allowing you to visually inspect light and dark themes before design tool or code publication.

Can I use this palette generation approach for both web and mobile design systems?

Yes, you can use this palette generation approach for both web and mobile design systems, as it produces complete UI palettes with light and dark themes suitable for multi-platform design deployment.