⚡ Design & CSS · Client-side · No data sent to server

Color Palette Generator

Pick a base color and a scheme to get a matching set of swatches. Click any swatch to copy its hex. Everything runs in your browser.

Base
Scheme
Pick a base color and a scheme. Copied!
100% private. Schemes are computed in your browser with plain HSL math. No colors are sent to a server or logged.

About the Color Palette Generator

The Color Palette Generator turns one base color into a matching set of colors. Pick a color with the picker or type a hex value, choose a scheme, and get a row of swatches you can copy with a click. It is built for designers and developers picking colors for sites, themes, and UI. All schemes are computed in your browser with HSL math, so nothing is uploaded or stored.

How it works

  1. Set a base color using the color picker or by typing a hex value like #3DDA85.
  2. Choose a scheme: shades and tints, complementary, analogous, triadic, or monochromatic.
  3. Read the row of swatches; the palette updates as you change the base color or scheme.
  4. Click any swatch or its hex label to copy that color to your clipboard.

Features

  • Color picker plus a hex input that stay in sync.
  • Five schemes: shades and tints, complementary, analogous, triadic, and monochromatic.
  • Live updates as you change the base color or scheme.
  • Click to copy any swatch hex.
  • Random base color button for quick starting points.

Frequently asked questions

How are the colors calculated?

The base color is converted to HSL, then the scheme is built by rotating the hue or adjusting lightness and saturation. Complementary uses a 180 degree hue shift, triadic uses 120 degree steps, analogous stays within 30 degrees, and shades and monochromatic vary lightness and saturation.

What do the schemes mean?

Shades and tints vary the lightness of one hue. Complementary pairs the base with its opposite hue. Analogous uses hues next to the base. Triadic uses three evenly spaced hues. Monochromatic uses one hue with varied lightness and saturation.

How do I copy a color?

Click a swatch or its hex label. The hex value is copied to your clipboard and a Copied confirmation appears.

Is my data sent anywhere?

No. The colors are computed in your browser. Nothing is uploaded, saved, or logged.

What hex formats are accepted?

You can enter a 6 digit hex such as #3DDA85 or a 3 digit shorthand such as #3D8, with or without the leading hash. Invalid input is flagged until you correct it.