Color Picker

Pick a color, convert HEX, RGB, and HSL formats, generate matching palettes, and check WCAG contrast instantly.

Color converter + contrast checker

Paste any color, get every format, and build a usable palette.

Convert #hex, rgb(...), hsl(...), and named colors, then copy CSS-ready values, check accessibility, and save recent swatches.

Runs entirely in your browser. No color data is uploaded.

Current color

#3b82f6

Quick examples

Supports 3 or 6 digit HEX, RGB, HSL, and common named colors.

#

Recent colors

Your last colors will appear here.

Developer exports

WCAG contrast checker

Paste a HEX, RGB, HSL, or named background color.

Aa Body text example
Aa Large headline
Contrast ratio 8.18:1
AA normal AAA normal AA large AAA large

Palette ideas from this color

Use the generated swatches for accents, hover states, or design system scales.

Complementary
Analogous
Triadic
Monochromatic scale

How to convert HEX to RGB and HSL

A HEX color like #3b82f6 stores red, green, and blue in hexadecimal pairs. This tool converts it instantly to rgb(59, 130, 246) and hsl(217, 91%, 60%). If you paste an rgb(...) or hsl(...) value instead, the converter works in reverse.

When to use HSL vs HEX

HEX is compact and common in codebases. HSL is easier when you want to create hover states, tints, or darker shades because you can adjust hue, saturation, and lightness directly. That is why design systems often start with one base HEX color, then derive several HSL-based variations.

Use the contrast checker before shipping UI colors

Strong-looking colors can still fail accessibility. The built-in WCAG checker compares your foreground color against white, dark, soft, or custom backgrounds and shows pass or fail badges for AA and AAA text requirements. Use it for buttons, links, dashboards, and marketing pages.

Build a palette from one base color

The palette section generates complementary, analogous, triadic, and monochromatic swatches. Complementary colors are useful for call-to-action accents, analogous colors help with softer gradients, and monochromatic scales are great for charts, badges, and component states.

Privacy-first color conversion

ToolKit Now runs this color picker entirely on the client side. Your pasted color values, recent history, contrast checks, and generated exports stay in your browser.