Color Palette Generator

AI-powered

Type a vibe — 'desert at dusk', 'cyberpunk lab' — and get a 5-color palette with hex, RGB, HSL, and OKLCH for every swatch.

Starter palette
highlight
accent
primary
background
secondary

01 — Overview

How the Color Palette Generator works

Generate cohesive color palettes from a natural-language vibe. Each palette comes back as five swatches with one-click copy in hex, RGB, HSL, and OKLCH. Tweak any swatch and re-export. Powered by Claude for the seed → palette step; conversions run locally.

02 — Use cases

When to use the Color Palette Generator

  1. 01

    Kick off a brand exploration without opening a design tool

  2. 02

    Get a palette for a landing page before a designer is involved

  3. 03

    Translate a mood board prompt into usable CSS variables

  4. 04

    Generate quick swatches for a data viz or chart series

03 — Examples

Color Palette Generator examples

sunset over Tokyo

ex 01

#ff9472, #f2709c, #5b3a8c, #1d2671, #c33764

A warm-to-cool gradient palette inspired by city dusk.

minimal forest morning

ex 02

#e8efe6, #b7c9b1, #8aa78a, #4f6b56, #243d33

Soft greens stepping from highlight to deep shadow.

cyberpunk diner

ex 03

#0d0221, #ff003c, #00f0ff, #ffd700, #f6019d

High-contrast neons over near-black backgrounds.

brutalist zine, high contrast

ex 04

#f4f1de, #e07a5f, #3d405b, #81b29a, #f2cc8f

Warm paper base with a terracotta accent and a deep navy for text.

04 — FAQ

Palette — frequently asked questions

How does it pick the colors?

Claude proposes five hex values from your description. The tool then converts each to RGB, HSL, and OKLCH locally and previews them as swatches.

Can I edit a single swatch?

Yes. Each swatch is editable in any format — the others update live. Use it to fine-tune contrast, lightness, or chroma without leaving the page.

Why OKLCH and not just HSL?

OKLCH is perceptually uniform: a 10-point lightness change looks like a 10-point change to the eye. HSL doesn't have that property and can produce muddy mid-tones. Both are exported for compatibility.

Are the palettes accessible?

The tool aims for usable contrast but doesn't enforce WCAG ratios. Pair this with a contrast checker for production use, especially when picking text/background pairs.

How do I turn a palette into CSS variables?

Copy each swatch in the format you want and paste it into a :root block or your Tailwind theme. OKLCH is the best choice for a theme scale: lightness is perceptually uniform, so you can derive hover and disabled states by shifting the L channel alone without the hue drift you get doing the same thing in HSL.

How many colors should a palette have?

Five is enough for most interfaces — a background, a raised surface, a body text color, an accent, and one supporting tone. Semantic colors for success, warning, and error sit outside the palette because they carry fixed meaning rather than brand, and users expect them to look roughly the same everywhere.

05 — Reference

Specs and further reading

The primary sources this tool follows. Where behaviour is defined by a specification, we link the specification rather than a summary of it.

07 — More

Tools that pair with Palette

Color Picker & Converter

Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.

Color/color

CSS Gradient Generator

Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.

Color/gradient

Glassmorphism Generator

Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.

Color/glassmorphism

Last updated .