Color Converter: HEX, RGB, HSL, OKLCH and Contrast Checker

  • Free
  • No sign-up
  • Runs in your browser
  • Last updated 2026-10-07
Report a problem

Pick a color or type one in any CSS notation to get it in every common format, plus an accessibility contrast check.

Contrast (WCAG 2.x)

Text color on this backgroundRatioAA normalAAA normalAA largeAAA large

Everything you enter is processed in your browser and is never sent to a server.

How to use

  1. Pick a color with the color picker, or type one in the text box: a hex code, rgb(), hsl(), oklch() or a name such as tomato.
  2. Copy the format you need from the list: HEX, RGB, HSL or OKLCH.
  3. Check the contrast table to see whether white or black text is readable on this color.

Examples

#2563eb
→ rgb(37, 99, 235)   hsl(221, 83%, 53%)   oklch(54.61% 0.215 262.88)
Contrast is 5.17:1 with white text (passes AA for normal text) and 4.06:1 with black text (passes only for large text).
rebeccapurple
→ #663399
#2563eb80
→ rgba(37, 99, 235, 0.5)   #2563eb80
The last two hex digits are the alpha (opacity), and 80 is about 50%.

How it works

The text you enter is read by the open-source culori library, which understands the notations used in CSS. The color is converted to RGB, HSL and OKLCH and written out with rounded values: whole numbers for RGB and HSL, and two or three decimals for OKLCH.

The contrast ratio follows the WCAG definition. The relative luminance of each color is calculated from its linear RGB values, and the ratio is (lighter + 0.05) divided by (darker + 0.05). It runs from 1:1 for identical colors to 21:1 for black on white.

Because RGB and HSL values are rounded to whole numbers, converting a color back and forth can change a value by one step. The HEX value is the exact one.

Sources

Frequently asked questions

What is the difference between HEX, RGB and HSL?
They describe the same colors in different ways. HEX and RGB give the amounts of red, green and blue, in base 16 or in numbers from 0 to 255. HSL gives the hue as an angle from 0 to 360, then saturation and lightness as percentages, which is easier to adjust by hand.
What is OKLCH?
OKLCH is a color notation based on how people perceive color: lightness, chroma (colorfulness) and hue. Equal steps in lightness look much more even than in HSL, which makes it good for building palettes. Modern browsers support oklch() in CSS.
What do the WCAG contrast levels mean?
WCAG 2.x asks for a contrast ratio of at least 4.5:1 for normal text at level AA and 7:1 at level AAA. Large text (about 24px, or 19px bold) needs 3:1 at AA and 4.5:1 at AAA. Interface parts such as button borders need 3:1.
Does the contrast check include transparency?
No. It measures the color as if it were fully opaque. A semi-transparent color shows a different color depending on what is behind it, so check the final blended color instead.
Is anything sent to a server?
No. All conversion happens in your browser.

Last updated: