Color Palette & Gradient Generator

Builds color schemes from one base color, generates random palettes, and makes gradients to copy as CSS or save as a PNG image. Use it to choose colors for a design, a presentation or a web page.

How to use

1. On "Palette", pick a "Base color" and choose a "Scheme". If you like it, press "Use this scheme as the palette".
2. Press "Generate (Space)" for new colors; lock the ones you want to keep and generate again.
3. Take the colors with "Copy HEX list", "Copy CSS variables" or "Save as image", and press "Keep palette" to store one for later.
4. On "Gradient", set the "Type", "Angle" and "Color stops", then copy the CSS code or press "Save PNG".

How it works

• Schemes rotate the hue on the HSL color wheel: complementary 180°, analogous ±30°, triadic 120°, split complementary 150° and 210°, square 90° steps.
• Contrast grades follow WCAG 2.2: AA needs 4.5:1, AAA 7:1, and large text 3:1.
• "Color vision simulation" is an approximation based on Machado et al. (2009). It changes only the colors on screen, not copied or saved values.
• Up to 40 kept palettes are stored in this browser on this device.

Questions and answers

How do I find the complementary color?

It is the color directly opposite on the color wheel, 180° away. Set "Scheme" to "Complementary" to see it, and tap the swatch to copy its HEX value.

How do I make a CSS gradient?

On "Gradient", tap the bar to add stops and set their colors and positions. The CSS box shows the code, ready to copy.

Why do the middle colors of my gradient look dull?

Set "Interpolation space" to OKLCH. The middle colors stay more vivid, and the CSS also gets a fallback line for older browsers.

How can I tell if text will be readable on this color?

Each color shows the contrast ratio and grade of the more readable text color, white or black. The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker color.