palette-generator

Generate harmonious color palettes from a seed color. Extends color-palette with algorithmic palette generation for design systems.

Overview

The <palette-generator> component generates harmonious color palettes from a single seed color. It extends <color-palette>, inheriting all swatch rendering, click-to-copy, and layout features while adding algorithmic palette generation.

Attributes

Attribute Type Default Description
seed string — Hex seed color (e.g. #6366f1). Overridden by child input if present.
harmony string complementary Algorithm: complementary, analogous, triadic, split-complementary, tetradic, monochromatic.
include-seed boolean true Whether the seed color appears in the palette.
show-export boolean — Show Copy Hex / Copy CSS export toolbar below the palette.
layout string inline Inherited from color-palette: inline, grid, or list.
size string md Inherited swatch size: sm, md, or lg.
show-values boolean — Inherited: always show hex values on swatches.
show-names boolean — Inherited: show name labels below swatches.

Harmony Types

Complementary

Two colors opposite on the color wheel (+180°). High contrast, bold combinations.

Analogous

Three adjacent hues at ±30°. Harmonious, low-contrast palettes.

Triadic

Three hues evenly spaced at 120°. Vibrant, balanced palettes.

Split-Complementary

Seed plus two hues flanking the complement at ±30°. Softer than complementary.

Tetradic

Four hues evenly spaced at 90°. Rich palettes with many accent options.

Monochromatic

An 11-step lightness ramp matching the 50–950 design token scale. Ideal for generating custom color token sets.

Interactive Mode

Place a <color-picker> or <input type="color"> inside the component to enable live seed selection. The palette regenerates as you pick colors.

Also works with a plain native color input:

Export

Add show-export to display a toolbar with two copy buttons below the palette:

  • Copy Hex — comma-separated hex list
  • Copy CSS — CSS custom properties, e.g. --palette-base: #6366f1;

For monochromatic palettes, CSS export uses token-style names: --color-seed-50 through --color-seed-950.

Events

Event Detail Description
palette-generator:generate { colors, harmony, seed } Fired when a palette is computed or regenerated.
color-palette:select { color, name, index } Inherited. Fired when a swatch is clicked (also copies to clipboard).

Accessibility

  • Inherits all <color-palette> accessibility features: role="group", swatch buttons with aria-label, full keyboard navigation.
  • The export toolbar uses role="toolbar" with aria-label="Export palette".
  • Copy feedback is communicated via button text change (visible to screen readers).
↑