# Color Palette Generator

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

- URL: https://generate.now/palette
- Category: color
- Price: free, no account required
- AI-powered: yes
- Last updated: 2026-08-27

## What it does

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.

## When to use it

- Kick off a brand exploration without opening a design tool
- Get a palette for a landing page before a designer is involved
- Translate a mood board prompt into usable CSS variables
- Generate quick swatches for a data viz or chart series

## Examples

### sunset over Tokyo

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

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

### minimal forest morning

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

Soft greens stepping from highlight to deep shadow.

### cyberpunk diner

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

High-contrast neons over near-black backgrounds.

### brutalist zine, high contrast

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

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

## 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.

## References

- [CSS Color Module Level 4](https://www.w3.org/TR/css-color-4/) — W3C. Defines the modern color spaces and notations used in the generated CSS.
- [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) — W3C WAI. The 4.5:1 and 3:1 contrast thresholds the palette checker validates against.
- [oklch()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch) — MDN Web Docs. Reference for the perceptually uniform color space used for lightness ramps.

## Related tools

- [Color Picker & Converter](https://generate.now/color): Pick or paste a color, get every format — hex, RGB, HSL, OKLCH, CMYK, and the closest named color.
- [CSS Gradient Generator](https://generate.now/gradient): Build linear and radial gradients visually. Pick stops, angle, and direction; copy as CSS or Tailwind arbitrary value.
- [Glassmorphism Generator](https://generate.now/glassmorphism): Visual builder for frosted-glass cards. Sliders for blur, opacity, saturation, border — copy CSS or Tailwind.