Color Palette Generator

Create stunning color palettes for your next project

Quick Actions

spacebar

Generate Random

Press spacebar anytime to create a new palette

click

Lock Shades

Click any shade to lock it as base color

Color Input

Use color picker or enter hex code

Export

Get Tailwind CSS config instantly

Accessibility

Check WCAG contrast compliance

Tailwind CSS Color Generator

Press spacebar, enter a hexcode or use the color picker to create a custom color scale

Hue (H)

Saturation (S)

Lightness (L)

Red (R)

Green (G)

Blue (B)

Lightness (L)

Chroma (C)

Hue (H)

Saturation Range

Min (0-100)

Max (0-100)

Lightness Range

Min (0-100)

Max (0-100)

Example UI Elements

Interactive Components

Custom Checkbox

Toggle Switch

Cards

Interactive Card

Hover over this card to see the animation.

Loading State

Contrast Grid

AAA (7.0+) AA (4.5+) Fail (<4.5)

Saved Colors

Delete Color

Are you sure you want to delete this color? This action cannot be undone.