Super Boring Tools

Search tools

Find a tool by name or what it does.

Color Palette Generator

Build a color palette from a base color or an image, then copy the hex values.

Start from

Base color

Updates live as you type.

Harmony

Palette

Click a swatch to copy its hex value.

How to generate a color palette

  1. Pick a starting point

    Choose a color to build a harmony, or an image to pull the main colors out of a picture.

  2. Set the source

    For a color, use the picker or type a six-digit hex and choose a harmony. For an image, drop, browse, or paste a picture and the palette builds on its own.

  3. Copy what you need

    Click any swatch to copy that hex value, or use Copy all hex values to take the whole palette as a space-separated list.

Why use this tool

Five harmony modes

Complementary, analogous, triadic, tetradic, and monochromatic palettes, each derived from the same base color.

Real color-wheel math

The base color is converted to HSL and its hue rotated by the classic angles: 180 degrees for complements, 120 for triads, 90 for tetrads.

A usable spread, not five clones

Most modes also step the lightness up or down on some swatches, so palettes come out with light, mid, and dark values.

Colors pulled from any image

Drop, browse, or paste a photo and the tool reads its pixels to surface the five most prominent colors as a palette.

Click-to-copy swatches

Every swatch is a button that copies its hex value; a copy-all action grabs all five in one go.

Legible labels on any color

Each swatch label switches between black and white based on the swatch luminance, so the hex value stays readable.

Local and free

All the conversion math runs in your browser with no signup, so nothing you try is recorded.

About this tool

This color palette generator expands one base color into a five-swatch scheme using color-wheel harmony rules. The hex value you enter is converted to HSL and its hue rotated by fixed angles: 180 degrees for a complementary scheme, 20 and 40 degree neighbors for analogous, thirds of the wheel for triadic, quarters for tetradic. Monochromatic keeps the hue still and steps the lightness instead, and several modes nudge lightness on individual swatches so the result reads as a scale.

The image mode works the other way around. Instead of deriving colors from a rule, it reads them out of a picture you already have. Drop, browse, or paste a photo and the tool samples its pixels and groups them into five representative colors, so a screenshot, product shot, or piece of artwork turns into a ready palette. Large images are scaled down before sampling so it stays quick.

It fits the moments when you have one color and need company for it: a brand primary that needs hover and border shades, a chart that wants distinguishable series colors, an accent looking for its complement. Every swatch is click-to-copy, and the copy-all action produces a space-separated list of uppercase hex values that pastes cleanly into a design tool or a CSS variables block.

All of the conversion math is a handful of JavaScript functions running locally, so the colors you experiment with never leave the page. To restate a swatch in another notation, use the color converter; to verify that a text and background pairing from the palette is readable, run it through the contrast checker; and to blend two swatches into a background, try the gradient generator.

Frequently asked questions

How are the palettes generated?
The tool converts your base color to HSL (hue, saturation, lightness) and rotates the hue around the color wheel using classic harmony rules. Complementary uses the opposite hue, analogous uses neighbors, triadic and tetradic space hues evenly, and monochromatic keeps the hue fixed while varying lightness.
How do I copy a color?
Click any swatch to copy its hex value to your clipboard. To copy the entire palette at once, use the Copy all button at the bottom, which copies every hex value as a space-separated list ready to paste into your design tool or CSS.
What is the difference between these harmonies?
Complementary pairs give high contrast and energy. Analogous schemes feel calm and cohesive. Triadic and tetradic schemes are vibrant and balanced with more colors to work with. Monochromatic schemes are the safest and most unified, using one hue at different lightness levels.
Can I enter a specific hex code?
Yes. Use the color picker for a visual choice, or type a six-digit hex code like #3b82f6 directly into the field. The palette updates the moment you enter a valid color. Invalid input is ignored without breaking anything.
Can I get a palette from an image?
Yes. Switch to the image mode, then drop, browse, or paste a picture. The tool reads the picture and picks out five of its most prominent colors as a palette you can copy. It accepts JPEG, PNG, and WebP, and everything runs in your browser, so the picture is never uploaded.
Is my data sent anywhere?
No. All color math runs locally in your browser with JavaScript. Nothing is uploaded, stored, or logged, so you can experiment freely and offline.

Related tools