Color Converter

Convert colors between HEX, RGB, HSL, and OKLCH. Check contrast ratios and generate palettes.

Click to pick
Hue11°
Saturation100%
Lightness60%
HEX#ff5733
RGBrgb(255, 87, 51)
HSLhsl(11, 100%, 60%)
OKLCHoklch(68.04% 0.21 33.69)

Contrast Checker

Preview Text (Large)

Normal text sample for contrast checking.

21.00:1
AA Normal
Pass
(4.5:1)
AAA Normal
Pass
(7:1)
AA Large
Pass
(3:1)
AAA Large
Pass
(4.5:1)

Color Palette

Complementary

#ff5733

Base

#33daff

180°

Analogous

#ff3374

-30°

#ff5733

Base

#ffbe33

+30°

Triadic

#5833ff

-120°

#ff5733

Base

#33ff58

+120°

Split Complementary

#3374ff

-150°

#ff5733

Base

#33ffbe

+150°

How It Works

1

Enter any color format

Type a HEX, RGB, HSL, or CSS named color. The tool converts to all other formats.

2

Fine-tune with the picker

Use the hue, saturation, and lightness sliders for interactive color selection.

3

Check contrast and palettes

Use the contrast checker for WCAG compliance. View complementary, analogous, and triadic palettes.

FAQ

WCAG defines minimum contrast ratios for accessible text: 4.5:1 for normal text (AA), 7:1 for enhanced (AAA), and 3:1 for large text.
OKLCH is a perceptually uniform color space. Colors with the same lightness value actually look equally bright, unlike HSL.
Yes. Each format has a copy button that outputs the value as a CSS property. To see colors in action, try the mesh gradient generator.

Related Tools

Mesh GradientCSS Cover ArtText to GradientLoopkit

Designing a product?

Map out your user personas and feature set before you build — run a Discovery session.

Built & Maintained by Varstatt

Varstatt is a one-person product studio run by Jurij Tokarski, product engineer since 2011. These tools are free and open — no signup, no catch.