Palette Generator

How to use it

1. Pick a base color with the color picker.
2. Choose a scheme: complementary (180 degrees on the wheel), triadic (120 and 240), analogous (nearby hues) or monochromatic (lightness steps).
3. Five swatches appear immediately, each with its HEX, RGB and HSL values.
4. Click the HEX, RGB or HSL label on a swatch to copy that value in the format you need.

Common use cases

• Website theming — start from a brand color and get supporting hues for accents, borders and surfaces.
• Data visualization — triadic and analogous sets give distinguishable series colors that share a base.
• Learning color theory — watch how hue rotation and lightness steps change the mood of a scheme.
• Design handoff — copy exact HSL values straight into CSS custom properties.

Why it stays private

The palette is computed with plain HSL trigonometry in your browser tab. No request is sent, no account is needed, and the values you copy never touch a server.

FAQ

Q: Which color model does the math use? A: HSL. The generator converts your base color from HEX to RGB to HSL, applies hue, saturation or lightness offsets per scheme, and converts back for display.

Q: Can I use a dark or very saturated base color? A: Yes. Offsets are clamped to the valid 0-100 range for saturation and lightness, so extreme bases still produce five valid swatches, though near-black or near-white bases give subtler variation.

Q: How do I get these colors into my stylesheet? A: Click the value label on each swatch to copy HEX, RGB or HSL text, then paste it into a CSS variable or your design tool of choice.