Color converter (HEX, RGB, HSL, CMYK, OKLCH)
Type a color in any format — #hex, rgb(), hsl(), hwb(), oklch() or a name like “tomato” — and instantly get every equivalent, its WCAG contrast against white and black, and a scale of tints and shades.
Processed 100% in your browser
How can I verify this?
Your files are never uploaded: they are processed on your device. Check it yourself: load the page, turn off your WiFi and the tool keeps working. Or open your browser’s developer tools (F12), go to the Network tab, and see that no file leaves your device.
Ctrl + Enter runCtrl + C copy result
How to use
- 1Type or paste a color in any format, or pick it with the color picker.
- 2Check its HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH equivalents.
- 3Click any format to copy it to the clipboard.
- 4Check the WCAG contrast and use the tints and shades to create variants.
Use cases
- Move colors from Figma or Photoshop (HEX) to modern CSS (OKLCH, HSL).
- Prepare approximate CMYK values for print.
- Verify that a text color meets AA or AAA accessibility.
- Find the closest CSS color name.
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX and RGB give the amount of red, green and blue (HEX in hexadecimal). HSL uses hue, saturation and lightness, which is more intuitive for creating variants of a tone.
What is OKLCH and why use it?
A perceptual color space supported by modern browsers: two colors with the same “L” look equally light, which is not true in HSL. It is ideal for consistent palettes and design systems.
Is the CMYK value exact for printing?
It is an approximate mathematical conversion. Real CMYK depends on the printer’s color profile and the paper, so confirm final values with your print provider.
What do AA and AAA mean for contrast?
They are WCAG levels: AA requires a minimum contrast of 4.5:1 for normal text (3:1 for large text) and AAA requires 7:1. The higher the ratio, the more readable the text.