CREATE · EXPLORE · COPY

Color ideas,
made effortless.

Turn one color into a complete design system—or blend up to five colors into a production-ready CSS gradient.

Open Color Studio →Build Gradient ↓
10Balanced shades5Gradient colors1-clickCSS copy
YOUR COLOR#6C5CE7
CSS GRADIENT135°
COPIED!#6C5CE7
SHADE GENERATOR

One color. Endless range.

Choose a base color and instantly generate ten balanced shades.

BASE COLOR#0EA5E9

Click any shade to copy its HEX value

GRADIENT GENERATOR

Blend multiple colors beautifully.

Choose 2 to 5 colors, set the direction and copy production-ready CSS.

LIVE PREVIEW
HOW MANY COLORS?
ACCESSIBILITY PREVIEW

See your colors in a real design.

Preview single colors or gradients with text, then check whether the combination is easy for everyone to read.

Single Color Preview

Choose a background and text color. The preview and readability score update instantly.

CONTRAST RATIO4.68:1
AA ✓AAA ✕

Good for normal text

Live website preview
COLOR CONFIDENCE

Design that everyone
can experience.

Test your colors before using them in a website, mobile app or brand.

Why this matters

Readable color combinations improve usability for people with low vision and color-vision differences.

01

Instant Shades

Create a balanced light-to-dark palette from any color.

02

Multi-color Gradients

Combine up to five colors with multiple direction options.

03

Accessible Preview

Check real design previews and WCAG contrast before using your colors.

Copied!