Color Picker · Gradients · Palettes · Contrast

Color Picker &
Gradient Generator

Pick any color in HEX, RGB, HSL. Build beautiful CSS gradients visually. Generate palettes, check WCAG contrast, copy CSS instantly.

#3B82F6

WCAG Contrast Checker

vs White

—

Sample Text

vs Black

—

Sample Text

Color Values

HEX

RGB

HSL

HSV

RGBA

HSLA

Quick Picker

Recent Colors

CSS Code

Gradient Presets

Type

Angle °

Color Stops

Repeat

Use As

Base Color

CSS Custom Properties

Professional Color Tools

Everything designers and developers need to work with color — all in one place.

🎨

Multi-Format Picker

Get any color in HEX, RGB, RGBA, HSL, HSLA, and HSV — all update simultaneously as you pick.

🌈

CSS Gradients

Build linear, radial, and conic gradients visually with unlimited color stops and instant CSS output.

♿

WCAG Contrast

Check AA and AAA accessibility compliance automatically as you pick colors — for both white and black text.

🖌️

Palette Generator

Generate harmonious color palettes — analogous, triadic, complementary — with one-click CSS variable export.

How It Works

Create Gradients in 3 Steps

Pick Colors

Select your start and end colors using the color picker.

Choose Direction

Set gradient angle or type — linear, radial, or conic.

Copy CSS Code

Copy the ready-to-use CSS gradient code.

Frequently Asked Questions

What gradient types are supported?

Linear, radial, and conic gradients are all supported.

Can I add multiple color stops?

Yes, you can add unlimited color stops for complex gradients.

Is the output CSS compatible?

Yes, the output is standard CSS that works in all modern browsers.

Color Picker &Gradient Generator