Color Converter
HEX, RGB, HSL, OKLCH and CMYK in one place. Runs in your browser.
About this color converter
This color converter reads almost any CSS color and shows it in every common format at once: HEX, HEX with alpha, RGB, HSL, HWB, OKLCH and an approximate CMYK. Paste a value, pick a color visually, or type a name like teal, then click any result to copy it.
It keeps transparency through every conversion, handles modern CSS syntax such as rgb(255 99 71 / 0.6), and tells you when an OKLCH color is outside the sRGB range most screens can show. It also checks contrast against white and black using the WCAG formula, so you know if the color works for text.
Everything runs in your browser. Nothing you paste is sent anywhere.
Features
One box for any format
Paste HEX (3, 4, 6 or 8 digits), rgb(), rgba(), hsl(), hsla(), hwb(), oklch(), cmyk() or any of the 148 CSS color names.
All formats at once
See HEX, HEX8, RGB, HSL, HWB, OKLCH and CMYK together. Click any row to copy it.
Alpha kept everywhere
Transparency carries through to HEX8, rgba, hsla, HWB and OKLCH, and the swatch sits on a checkerboard so you can see it.
OKLCH gamut check
OKLCH colors outside sRGB are mapped to the closest displayable color by lowering chroma, and the original and fallback are shown side by side.
WCAG contrast
See the contrast ratio of the color as text on white and on black, with AAA, AA, AA Large or Fail ratings.
Closest color name
Find the nearest CSS named color, with an exact badge when your color matches one.
Native color picker
Use your system's color picker to choose visually. The current alpha is kept when you pick.
How to use the color converter
- 1Paste any CSS color (HEX, RGB, HSL, HWB, OKLCH, CMYK or a name) or use the picker.
- 2All formats update instantly.
- 3Click a value to copy it.
When to use it
Design handoff
Turn a HEX value from a design file into rgb() or hsl() for your stylesheet.
Moving to OKLCH
Convert an existing palette to OKLCH for more even lightness across hues in modern CSS.
Accessibility checks
Check quickly whether a brand color is readable as text on a white or black background.
Print preparation
Get a starting CMYK value for a brand color, then confirm it with your printer.
Debugging CSS
Paste a color from browser dev tools to see what it is in other formats, including its alpha.
HEX vs RGB vs HSL vs OKLCH
HEX and RGB describe the same thing: how much red, green and blue light to mix, from 0 to 255 each. HEX writes those numbers in base 16, so #2336ff means red 35, green 54, blue 255. An extra pair of digits in HEX8 stores alpha.
HSL describes a color by hue (an angle on the color wheel), saturation and lightness. It is easier to adjust by hand, but its lightness doesn't match what the eye sees: yellow and blue at 50% lightness look very different in brightness. HWB is similar, using amounts of white and black mixed into a pure hue.
OKLCH uses lightness, chroma and hue in a model built to match human vision. Two colors with the same OKLCH lightness look about equally bright, which makes it good for palettes and for generating shades. It can also describe colors beyond sRGB for wide-gamut screens.
Out-of-gamut colors and sRGB
sRGB is the color range that HEX, RGB and HSL can express, and most screens show it fully. OKLCH can describe more saturated colors than sRGB holds. Some newer screens (Display P3) can show part of that extra range.
When you enter an OKLCH color outside sRGB, this tool keeps the lightness and hue and lowers chroma until the color fits. The HEX, RGB, HSL, HWB and CMYK values use that fitted color, while the OKLCH value stays as you typed it. The note under the swatch tells you the chroma it used.
Why CMYK is only an approximation
Screens make color by adding light. Printers make color by layering cyan, magenta, yellow and black ink, which absorbs light. The exact result depends on the ink, the paper and the printer, which is described by an ICC color profile.
This tool uses the simple formula that ignores profiles. Treat its CMYK as a starting point, and ask your printer for a proof for brand-critical work.
Reading WCAG contrast ratios
WCAG compares the brightness of text and background on a scale from 1:1 (no contrast) to 21:1 (black on white).
- 4.5:1 or more: passes AA for normal text.
- 3:1 or more: passes AA for large text (about 24px, or 19px bold) and for icons.
- 7:1 or more: passes AAA for normal text.
- Translucent colors are blended over the background first, which is what you actually see.
Why use Mavros
| Mavros | Typical upload sites | |
|---|---|---|
| Input | Any CSS color format in one box | A separate field for each format |
| Transparency | Kept in every output format | Often dropped |
| OKLCH | Input and output, with a gamut warning | Missing or silently clipped |
| Copying | Click any value to copy it | Select and copy by hand |
| Contrast | WCAG ratios on white and black built in | Needs a separate tool |
| Privacy and ads | Runs in your browser, no ads in the way | Ad-heavy pages |
Tips
- You can paste a value with or without the #, and a trailing semicolon from CSS is ignored.
- Write alpha as a number (0.6) or a percent (60%). Both work.
- If you type an invalid value, the results keep showing your last valid color until you fix it.
- Use the example chips to see how each input syntax looks.
- For text on a white background, look for at least AA on the white contrast tile.
Questions
How do I convert HEX to RGB?
Paste the HEX code into the box. The RGB row shows the result, for example #2336ff becomes rgb(35, 54, 255). Click the row to copy it.
How do I convert RGB to HEX?
Type the color as rgb(35, 54, 255) or rgb(35 54 255). The HEX row shows #2336ff.
What is OKLCH?
OKLCH describes a color by lightness, chroma and hue in a model that matches how people see brightness. It is supported in modern CSS and is useful for building even palettes.
What does out of gamut mean?
The color can't be shown in sRGB, the range that HEX and RGB cover. The tool shows the closest sRGB color with the same lightness and hue.
Is the CMYK value exact?
No. It is a simple approximation. Accurate print color depends on the printer's ICC profile, the ink and the paper.
How do I add transparency to a HEX color?
Add two more hex digits for alpha, such as #2336ff80 for about 50%. The HEX8 row shows the right value for any alpha you enter.
What contrast ratio do I need for accessible text?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text. AAA needs 7:1. The contrast tiles rate your color on white and on black.
Which color names does it understand?
All 148 CSS named colors, such as tomato, rebeccapurple and teal, plus transparent.
Are my colors sent anywhere?
No. Parsing and conversion run in your browser.