Utiltown

Color Palette Generator & Color Converter

Generate a harmonious color palette from any base color, then use the built-in RGB / HEX / HSL converter to move between formats. Pick a harmony, tweak the base, and save, export, or share your scheme — all computed locally in your browser, with nothing uploaded. Great for brand palettes, design tokens, and CSS colors.

All computations run locally in your browser, no data uploaded to server.

Color Palette Generator

Choose a harmony, then base the palette on the wheel color or a random color. Click any swatch to copy its hex.

My Palettes

No saved palettes yet. Generate one and click Save palette.

Color Converter

Drag the wheel to pick a hue and saturation — use the slider for brightness.

Contrast Check

Compare a foreground and background color against the WCAG contrast thresholds. The foreground follows the converter's current color; the background is independent.

Contrast ratio —

How To Use

  1. Pick a base color on the wheel, or click Random to start from a surprise color and see a fresh palette immediately.
  2. Choose a harmony mode — complementary, analogous, triadic, tetradic, or monochrome — and the tool draws four sibling colors around your base.
  3. Click any swatch to copy its hex, or use the conversion fields to read it as RGB or HSL.
  4. Save palette to keep it in My Palettes and reload it later (stored only in your browser).
  5. Export it as CSS, JSON, or a PNG swatch, or copy a share link that rebuilds the exact palette for anyone who opens it.

Usage Example

Start from the hex base #2563eb (a vivid blue).

A Triadic palette keeps the blue and adds two hues 120° apart, plus lighter variants:

#2563eb  #eb2463  #63eb24  #da7293  #93da72

And the converter reports that same base across formats: 

HEX: #2563eb
RGB: 37, 99, 235
HSL: hsl(221, 83%, 53%)

Enter any one of the three and the others are filled in; the palette uses whichever base color is current.

Use Cases

A palette generator keeps brand and interface colors coherent without guessing. Build a brand color system by starting from a primary color and pulling a monochrome ramp for tints and shades. Derive accent colors for buttons, links, and charts with a complementary or triadic scheme. Prepare a slide deck or report theme as a small set of tokens that echo one another. Copy the CSS variables straight into a stylesheet or design-token file, export a PNG swatch to paste into documentation, and share the link with a teammate so they land on the exact same palette. Everything stays local, so your proprietary brand colors never leave your device.

Frequently Asked Questions

Is the conversion accurate?

Yes. It uses the standard sRGB-to-HSL and HSL-to-RGB mathematical conversions, computed locally with native JavaScript.

Which formats are accepted?

HEX supports #RGB and #RRGGBB. RGB accepts r, g, b or rgb(r, g, b). HSL accepts h, s%, l% or hsl(h, s%, l%).

What is a color palette generator?

It builds a harmonious set of colors from one base color. Based on the color you give it, it automatically produces four sibling colors using a chosen harmony — complementary, analogous, triadic, tetradic, or monochrome — so your whole scheme looks cohesive.

Which harmony modes are available?

Five: Complementary (colors across the wheel), Analogous (neighbors on the wheel), Triadic (three evenly spaced hues), Tetradic (four evenly spaced hues), and Monochrome (shades of one hue). All five generate a 5-color palette.

Where is my saved palette stored?

Only in your own browser, using the site’s local storage, in the same place the Privacy panel reports. Nothing is uploaded or stored on a server.

How does the share link work?

The share link encodes just the base color and harmony mode into the URL hash (for example #h=2563eb&m=triadic). When someone opens it, the palette rebuilds instantly. Only a compact color + mode are encoded, keeping links short.

Can I use the palette in my CSS?

Yes. Click Copy CSS to copy the five colors as CSS custom properties (--palette-1 through --palette-5) ready to paste into a stylesheet, Copy JSON for a structured export, or Download PNG for a swatch image.

Is my color data sent anywhere?

No. All conversions and palette generation run locally in your browser. Nothing is uploaded.

Complete the Visual Toolkit

Take a palette from concept to production: compress your images to WebP / PNG / JPEG right here — local-only, nothing is ever uploaded.

Related Tools