🎨 Color Tools

Pick, convert, and fine-tune colors across HEX, RGB, HSL, and HSLA formats, generate matching color harmonies and CSS gradients, and check WCAG contrast for accessible text.

H 209

S 62

L 50

HEX #3182CE

RGB rgb(49, 130, 206)

RGBA rgba(49, 130, 206, 1)

HSL hsl(209, 62%, 50%)

HSLA hsla(209, 62%, 50%, 1)

Color Harmonies

Gradient Generator

From To Direction

background: linear-gradient(to right, #3182ce, #805ad5);

WCAG Contrast Checker

Foreground

Background

Sample Text Preview

Saved Palettes

No saved palettes yet

How to Use These Color Tools

Use the picker or the H/S/L sliders to dial in a color, then copy it in HEX, RGB, RGBA, HSL, or HSLA format with one click. Color Harmonies suggests complementary, analogous, and triadic colors that pair well with your chosen color — useful for building a palette.

The Gradient Generator lets you pick a start and end color and direction, then copy the ready-to-use CSS. The WCAG Contrast Checker tells you whether a foreground/background pair meets accessibility contrast guidelines for readable text, and Saved Palettes keeps colors you like for later.