How to convert a color and check its contrast
- Type, paste, or pick a color. HEX, RGB, HSL, HWB, OKLCH, OKLAB, CMYK, and CSS names such as
tomatoall work. - Copy the format you need from the list. Click a tint or shade to continue with that color.
- Under Contrast checker, enter a text color and a background color to see WCAG 2.2 results for normal text, large text, and interface parts. Use "Adjust text color" to find the nearest passing color.
A color with transparency, such as #FF573380 or rgb(255 87 51 / 50%), keeps its alpha in the output. For contrast, a translucent text color is blended onto the background first, and a translucent background onto white.
Supported conversions
Enter a color in any of these formats and read it in all the others.
- HEX to RGB
- HEX to HSL
- HEX to HWB
- HEX to OKLCH
- HEX to OKLAB
- HEX to CMYK
- RGB to HEX
- RGB to HSL
- RGB to HWB
- RGB to OKLCH
- RGB to OKLAB
- RGB to CMYK
- HSL to HEX
- HSL to RGB
- HSL to HWB
- HSL to OKLCH
- HSL to OKLAB
- HSL to CMYK
- HWB to HEX
- HWB to RGB
- HWB to HSL
- HWB to OKLCH
- HWB to OKLAB
- HWB to CMYK
- OKLCH to HEX
- OKLCH to RGB
- OKLCH to HSL
- OKLCH to HWB
- OKLCH to OKLAB
- OKLCH to CMYK
- OKLAB to HEX
- OKLAB to RGB
- OKLAB to HSL
- OKLAB to HWB
- OKLAB to OKLCH
- OKLAB to CMYK
- CMYK to HEX
- CMYK to RGB
- CMYK to HSL
- CMYK to HWB
- CMYK to OKLCH
- CMYK to OKLAB
- CSS color name to HEX
- CSS color name to RGB
- HEX to HSB / HSV
- RGB to HSB / HSV
Every format above also converts to the CSS color name that is nearest.
Questions
Is my color data uploaded anywhere?
No. All conversions and contrast calculations run in your browser. Nothing is sent to a server, saved, or tracked.
How do I convert HEX to RGB, or RGB to HEX?
Type or paste the color in the box. The tool recognizes the format on its own, so a HEX code gives you RGB, HSL, HWB, OKLCH, OKLAB, and CMYK at once, and an rgb() value gives you HEX. Press the copy button next to the format you need.
Why do my CMYK values differ from Photoshop or my printer?
The CMYK shown here is the plain mathematical conversion from RGB. Real print CMYK depends on the ink, paper, and an ICC color profile, which a browser cannot apply. Use these numbers as a starting point and check a proof before printing.
What is OKLCH, and why use it?
OKLCH describes a color by lightness, chroma (how vivid it is), and hue, in a space designed so that equal changes look equal to the eye. It is supported in all current browsers as oklch() in CSS. A color that cannot be shown in sRGB is brought into range by lowering its chroma.
What contrast ratio do I need to pass WCAG?
WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text and for interface parts such as input borders and icons. Level AAA needs 7:1 for normal text and 4.5:1 for large text. APCA is a newer method proposed for WCAG 3 and is shown as extra information.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.