color-selection

Generate accessible color palettes from brand colors with WCAG AA verification.

1|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/peterbamuhigire/website-skills --skill color-selection
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: color-selection
Source: https://github.com/peterbamuhigire/website-skills/tree/main/color-selection
Command: npx skills add https://github.com/peterbamuhigire/website-skills --skill color-selection

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python-coloraide, and includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill transforms basic brand colors into complete, accessible, and psychologically resonant website color palettes, ensuring visual appeal and brand alignment.

Core Features & Use Cases

  • Palette Generation: Creates harmonious color schemes (monochromatic, analogous, complementary, etc.) based on provided brand colors.
  • Accessibility Compliance: Verifies and adjusts colors to meet WCAG AA contrast ratios (4.5:1 for text, 3:1 for UI elements).
  • Industry Alignment: Tailors color choices to specific industry expectations and psychological associations.
  • Output Formats: Generates color tokens for Tailwind CSS and CSS custom properties.
  • Use Case: A startup provides their primary blue hex code. The Skill generates a full palette including secondary, accent, success, error, and neutral colors, ensuring they all work together and meet accessibility standards for their tech website.

Quick Start

Use the color-selection skill to generate a website color palette from the brand color #3B82F6.

Frequently Asked Questions about color-selection

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?

To generate an accessible color palette, provide a primary brand hex code and the Skill creates a complete scheme with secondary, accent, and neutral colors. It verifies WCAG AA contrast ratios for text and UI elements while aligning choices with industry-specific psychology.

Can I export generated color palettes as Tailwind CSS variables?

Yes, you can export generated color palettes directly as Tailwind CSS variables and CSS custom properties. This allows immediate integration of your accessible, harmonious color tokens into your web design workflow without manual conversion.

What color theory schemes are supported for web design palettes?

Supported color theory schemes for web design palettes include monochromatic, analogous, complementary, split-complementary, triadic, and tetradic. These options allow you to build visually harmonious brand palettes tailored to specific industry expectations.

Does the palette generator verify WCAG AA contrast ratios for text and UI elements?

Yes, the palette generator verifies WCAG AA contrast compliance, ensuring a 4.5:1 ratio for text and a 3:1 ratio for UI elements. It automatically adjusts generated colors to meet these accessibility standards before outputting the final tokens.

How do I create a color scheme that matches my industry's psychological expectations?

To create a color scheme matching your industry's psychological expectations, provide your brand color and specify your sector. The Skill uses industry-specific color psychology to tailor the generated palette, ensuring visual appeal and brand alignment.

What do I need to provide to start building a color palette?

You only need to provide a single primary brand hex code to start building a color palette. The Skill processes this input to generate a full range of harmonious, accessible colors suitable for your web design project.