← All tools

Color Picker & Converter

Pick a color to get HEX, RGB, and HSL values instantly, plus a shade ramp and matching color scheme.

HEX
RGB
HSL

Shades & Tints

Matching Colors (Complementary & Analogous)

About Color Formats

The shade/tint ramp shows the same hue mixed with black (shades) and white (tints) — useful for building a consistent UI color scale. The matching colors show the complementary color (opposite on the color wheel) and two analogous colors (neighboring hues), a quick way to find colors that pair well together.

Frequently Asked Questions

Which format should I use in my CSS?

All three work — HEX is most common and compact, RGB is useful when adjusting individual red/green/blue channels programmatically, and HSL is easiest for humans to reason about, e.g. "10% lighter".

What are shades and tints exactly?

A shade is your color mixed toward black (darker), a tint is your color mixed toward white (lighter) — both keep the same hue, just adjusted lightness.

How is the complementary color calculated?

It's the color exactly opposite yours on the 360° color wheel (180° away in hue) — a classic pairing that provides strong visual contrast.