中 | EN

Color Playground -

Create harmonious palettes
in seconds

Color Master hero 1

Problem Statement

Graphic designers creating brand color schemes, or UI designers working on interface palettes, often need to ensure WCAG contrast compliance. Existing tools are usually scattered and cumbersome, requiring multiple apps and manual calculations. This makes the process slow, error-prone, and can lead to palettes that are either inaccessible or visually inconsistent.

User Flow

  1. Input or select a primary color.
  2. Choose a harmony rule and step increments.
  3. Click "Generate" to create the color table.
  4. View color swatches, check contrast, and preview UI components.
  5. Download CSS/JSON or share via URL.
User Flow Diagram

Solution

I designed the Color Playground, a tool that simplifies the process of generating brand-ready color palettes while ensuring accessibility and usability.

1. Color Harmony Rules

To inspire different palette directions, the tool includes four harmony rules:

  • Monochromatic – shades and tints of the same color.
  • Analogous – neighboring hues on the color wheel.
  • Complementary – high-contrast pairs from opposite sides of the color wheel.
  • Triadic – three colors evenly spaced on the color wheel.

This ensures designers can explore both safe and bold combinations.

2. Automatic Palette Expansion

Once the harmony rule is selected, the tool automatically generates a full palette including:

  • Primary colors
  • Neutral scale (grays, backgrounds, borders)
  • Semantic colors (success, warning, error)
  • Interactive states (hover, active, disabled)

This saves designers from manually building out UI-ready palettes.

3. Accessibility Integration

The system checks WCAG contrast ratios and highlights whether a color combination passes AA or AAA standards. This reduces the risk of accessibility issues later in the design process.

User Flow

  1. Input or select a primary color.
  2. Choose a harmony rule and step increments.
  3. Click "Generate" to create the color table.
  4. View color swatches, check contrast, and preview UI components.
  5. Download CSS/JSON or share via URL.
User Flow Diagram
Color Palette Design Pen

Key Features

Try the Color Playground!