Site Tools

Color Converter & Picker

Ad Space
HEX#6366f1
RGBrgb(99, 102, 241)
RGBArgba(99, 102, 241, 1)
HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
HSVhsv(239, 59%, 95%)
OKLCHoklch(0.5854 0.2041 277.12)

Color palette

Complementary
Analogous
Triadic

Contrast checker (WCAG)

Sample text
17.74contrast ratio
Normal AA
Normal AAA
Large AA
Large AAA
Ad Space

The Color Converter is a complete toolkit for designers and front-end developers. Paste a color in any common format — HEX, RGB, RGBA, HSL, HSLA, HSV/HSB or the modern OKLCH — or pick one visually, and every other format updates instantly with a one-click copy button. Beyond conversion it generates a harmonious palette (complementary, analogous and triadic colors) from your base color, and includes a WCAG contrast checker so you can verify text remains accessible against any background. Everything runs in your browser, so it is fast, private and always available.

How to Use the Color Converter

  1. Use the color picker or type a value (e.g. #6366f1 or rgb(99,102,241)) into the input.
  2. Read every format in the list and copy any of them with its copy button.
  3. Explore the generated palette and use the contrast checker to test text against a background.

Benefits and Use Cases

  • Instantly convert between HEX, RGB, HSL, HSV and OKLCH without remembering any formulas.
  • Build accessible interfaces by checking WCAG AA/AAA contrast for normal and large text.
  • Generate complementary, analogous and triadic palettes to speed up your design work.

FAQ

Which color formats are supported?

HEX, RGB, RGBA, HSL, HSLA, HSV/HSB and OKLCH. Paste any of them or use the visual picker, and all the others update instantly.

What is OKLCH?

OKLCH is a modern, perceptually uniform color space supported by CSS. It makes lightness and chroma adjustments look more natural than HSL.

How does the contrast checker work?

It computes the WCAG contrast ratio between two colors and shows whether they pass AA and AAA for normal and large text.