utilitech

Color Converter & Picker

Pick a color or paste any format — HEX, RGB, HSL, HWB, OKLCH, CMYK — check contrast and get tints, shades and palettes.

Click to pick

Formats

HEX
#7C3AED
RGB
rgb(124, 58, 237)
HSL
hsl(262, 83%, 58%)
HWB
hwb(262 23% 7%)
OKLCH
oklch(54.1% 0.247 293)
CMYK
cmyk(48%, 76%, 0%, 7%)
CSS var
--color-brand: #7C3AED;

Contrast (WCAG)

Aa 5.70:1

On white

Aa 3.69:1

On black

Large heading text

Normal body text — the quick brown fox jumps over the lazy dog. ภาษาไทยอ่านง่ายไหม

5.70:1✓ AA text✓ AA large✗ AAA text✓ AAA large

Tints & shades (50–950)

Harmonies

Complementary

Analogous

Triadic

Split complementary

Tetradic

How to use
  • Click the big swatch to pick a color, use Pick from screen (Chrome and Edge) to sample any pixel, or paste a color in any format — #7C3AED, rgb(124 58 237), hsl(262 83% 58%), oklch(54% 0.25 293), cmyk(48%, 76%, 0%, 7%) or a name like tomato.
  • Every format updates together; click Copy next to the one you need.
  • Click any tint, shade or harmony swatch to make it the current color.
Contrast and accessibility
  • WCAG asks for a contrast of at least 4.5:1 for normal text and 3:1 for large text (24px, or 19px bold) to pass AA. AAA needs 7:1 and 4.5:1.
  • The 50–950 scale is spaced evenly in OKLCH lightness, so steps look evenly spaced to the eye — similar to Tailwind CSS palettes.
  • CMYK values are a simple conversion; for print, check with your printer's color profile.