🎨 Color Palette Generator

🎯
🔄
📊
{{ colorCount }}
⚡
⏳ Generating palette...
🎨
{{ color.hex }}
RGB({{ color.rgb.r }}, {{ color.rgb.g }}, {{ color.rgb.b }}) HSL({{ Math.round(color.hsl.h) }}°, {{ Math.round(color.hsl.s) }}%, {{ Math.round(color.hsl.l) }}%)
Contrast: {{ color.contrast }}:1 {{ color.isLight ?'Light' :'Dark' }}
ℹ️
Type: {{ paletteType.charAt(0).toUpperCase() + paletteType.slice(1) }}
Colors: {{ colors.length }}
Base Color: {{ baseColor }}
Accessible Colors: {{ colors.filter(c => c.contrast >= 4.5).length }} (WCAG AA)
⚠️

ℹ️ About Color Palette Generator

Color Palette Generator builds a set of related CSS colors from one base color. Enter a hex value such as #3498db, choose a harmony rule, and generate a palette that can be copied as HEX, RGB, HSL, CSS custom properties, or JSON.

Use it when selecting brand accent colors, planning UI states, choosing chart series colors, designing light and dark theme tokens, or creating background, border, and button color sets for web projects. A typical workflow is to start with a brand color, generate a complementary or analogous set, then verify the actual text/background pairs in the final layout.

Palette and harmony details:

  • Complementary: Uses the base hue plus a hue 180deg away for strong accent contrast.
  • Analogous: Samples nearby hues in 30deg steps for calmer interface and illustration palettes.
  • Triadic: Uses hues about 120deg apart for three balanced color families.
  • Tetradic: Uses four 90deg hue positions for richer palettes with multiple accents.
  • Monochromatic: Keeps one hue and varies lightness and saturation for subtle ramps.
  • Random: Generates unrelated hues for exploration when you do not have a starting direction.

The tool accepts 3- or 6-digit hex input and converts it to RGB and HSL before generating the selected harmony. Output colors stay in the CSS sRGB color model used by common web color syntaxes. For browser color syntax background, see the CSS Color Module Level 4 and MDN's CSS <color> reference.

Examples:

  • #3498db with complementary harmony produces a blue base and orange-family accents.
  • #22d3ee with monochromatic harmony creates a cyan ramp for borders, fills, and hover states.
  • #a3e635 with triadic harmony adds two other hue families for dashboards or charts.
  • Export CSS to create variables such as --color-1, --color-1-rgb, and --color-1-hsl.

Accessibility limitations: A pleasing palette is not automatically accessible. Contrast depends on the exact foreground and background pair, font size, font weight, and surrounding UI. The displayed contrast value is a helpful first pass against a white background; validate final combinations against WCAG 2.2 contrast guidance, including the common 4.5:1 target for normal text and 3:1 target for large text.

Privacy note: Palette generation runs in your browser from the color values you enter. The exported CSS and JSON files are created locally, and you should avoid treating generated palettes as final accessibility or brand-compliance approvals without reviewing them in context.

API Usage Example:

POST /api/tools/webdev/color-palette
Content-Type: application/json

{
    "baseColor": "#3498db",
    "paletteType": "complementary",
    "colorCount": 5
}
Ready