Color Code Converter
Convert color codes between HEX, RGB, HSL, HSV, OKLCH and CMYK. You can also check the contrast ratio (WCAG) between text and background.
1. Enter a color
Paste a color code, or click the square on the left to pick a color.
e.g. #FF6B35, rgb(255, 107, 53), hsl(16, 100%, 60%), C0 M58 Y79 K0, tomato
2. Converted colors
Use the buttons on the right to copy each value, ready to paste into CSS.
- HEX
- —
- RGB
- —
- HSL
- —
- HSV (HSB)
- —
- OKLCH
- —
- CMYK (approx.)
- —
- CSS color name
- —
3. Check the contrast ratio
See whether a text and background color pair is easy to read, based on WCAG (the web accessibility guidelines).
Use the color for
Enter a color above to see a preview here.
Contrast ratio
—
- Normal text AA4.5:1 or higher—
- Normal text AAA7:1 or higher—
- Large text AA3:1 or higher—
- Large text AAA4.5:1 or higher—
Large text means 18pt (24px) or larger, or 14pt (about 18.7px) or larger in bold.
Everything is converted on this device. The colors you enter are never sent anywhere.
CMYK values are a rough guide calculated without a print color profile (ICC profile). Before sending files to a printer, check the colors in your design software.
Found it useful? We'd love a share
Something not working, or an idea to make it better?
How to use
1. Enter a color code
Type the code of the color you want to convert (e.g. #FF6B35) into the “Color code” box. As you type, “Converted colors” below shows it in RGB, HSL, HSV, OKLCH and CMYK, along with its CSS color name.
Type the code of the color you want to convert (e.g. #FF6B35) into the “Color code” box on the left. As you type, “Converted colors” on the right shows it in RGB, HSL, HSV, OKLCH and CMYK, along with its CSS color name.
2. Pick a color instead
Tap the color square to the left of the “Color code” box. A color picker opens, and the code of the color you choose goes into the box and updates the results.
Click the color square to the left of the “Color code” box. A color picker opens, and the code of the color you choose goes into the box and updates the results.
3. Copy the results
In “Converted colors”, tap the button to the right of “RGB” to copy it as rgb(…). Tap “Copy all results” below to copy every format, one per line.
In “Converted colors”, click the button to the right of “RGB” to copy it as rgb(…). Click “Copy all results” below to copy every format, one per line.
4. Check the contrast ratio
In “Check the contrast ratio” below, tap “Black” to the right of “Background color”. You'll see sample text on a black background, the contrast ratio, and whether normal and large text meet the AA and AAA levels.
In “Check the contrast ratio” below, click “Black” to the right of “Background color”. You'll see sample text on a black background, the contrast ratio, and whether normal and large text meet the AA and AAA levels.
Handy for
Turning design colors into CSS
Paste a HEX copied from your design tool and instantly get rgb(), hsl() and the newer oklch() versions.
Web and app developers
Checking that text is readable
Enter the text and background colors to see the contrast ratio and whether it meets WCAG AA and AAA.
Designers who care about accessibility
Getting a CMYK estimate for print
When making flyers or business cards, get a rough idea of what a web color comes to in CMYK.
People making printed materials
Listing brand colors in every format
“Copy all results” copies everything from HEX to CMYK at once, ready to paste into a brand guide or a document.
Marketing and brand teams
Good to know before you start
- CMYK values are a calculated estimate. For exact values that match your printer's color profile (ICC profile), check in your design software.
- To pull colors out of an image, use Extract colors from an image.
- It can't convert to spot color numbers such as PANTONE, or to Munsell values.
How the color code formats differ
Screen colors are made from the strength of three colors of light: red, green and blue. HEX (#FF6B35) and RGB (rgb(255, 107, 53)) are the same thing written in hexadecimal and decimal. HSL and HSV rewrite it as hue, saturation and lightness (or brightness), which makes colors easier for people to adjust. OKLCH describes lightness the way our eyes perceive it, so it's easier to build palettes with even lightness, and it's starting to be used in modern CSS.
CMYK is the amount of each printing ink: cyan, magenta, yellow and black. Screens use light and print uses ink, so the same color can't be reproduced exactly. The CMYK values here are an estimate from a commonly used formula. The contrast ratio expresses the difference in brightness between text and background on a scale from 1 to 21. WCAG asks for at least 4.5 (AA) or 7 (AAA) for normal text.
Frequently asked questions
Common questions about converting color codes and checking contrast.
Are the colors I enter sent anywhere?
No. Both the conversion and the contrast calculation happen only inside the browser on your device.
What formats can I enter?
HEX like #FF6B35 or #F63 (with or without the #), rgb() and rgba(), hsl() and hsla(), hsv() and hsb(), oklch(), cmyk() or “C0 M58 Y79 K0”, and CSS color names like tomato. Plain numbers like “255, 107, 53” are read as RGB. Full-width characters work too.
Can it convert colors with transparency (alpha)?
Yes. Enter an 8-digit HEX like #FF6B3580 or rgba(255, 107, 53, 0.5), and you get an 8-digit HEX, and RGB, HSL and OKLCH with opacity. HSV and CMYK have no way to write opacity, so only the color is shown.
Why is a value off by 1 when I convert to HSL and back?
Like other sites and design tools, HSL and HSV are rounded to whole numbers. Converting back from rounded values can shift RGB by 1 or 2. If you need exact values, use HEX or RGB.
Can I use the CMYK values for printing as they are?
Treat them as a guide. Actual printed colors depend on the paper, the ink and the printer's color profile (ICC profile). The values here come from a general formula that doesn't use a profile. Check with your design software or your printer before sending files.
What is OKLCH?
A way of describing color by lightness (L), chroma (C) and hue (H) that's close to how our eyes perceive color. Colors with the same lightness value look about equally bright, even when their hues differ. Modern browsers support it in CSS as oklch().
The color I entered in OKLCH changes slightly.
OKLCH can describe vivid colors that ordinary screens (sRGB) can't show. For those, lightness and hue are kept and chroma is reduced until the color fits. When this happens, a notice appears below the input box.
What do AA and AAA mean for contrast ratio?
They're conformance levels in the web accessibility guidelines (WCAG 2). Normal text needs 4.5 or higher for AA and 7 or higher for AAA. Large text (18pt or larger, or 14pt or larger in bold) needs 3 or higher for AA and 4.5 or higher for AAA.
Why does a contrast ratio of 4.49 not show as 4.5?
So that a pair just short of a threshold never looks like a “Pass”, the ratio is cut off (not rounded) at 2 decimal places, and that value is used for the check.
Is it free?
Yes. No sign-up and no ads.
More tools
- Tax Calculator (Add or Remove Tax)
Enter a price to instantly see the amount before tax, the tax, and the total. Japan’s 10% and 8% rates are built in, or use any rate.
- Age Calculator
Pick a date of birth to see the exact age, days until the next birthday, days lived and the Chinese zodiac sign, with an age chart by birth year.
- Date Calculator (Add or Subtract Days)
Instantly get the date and weekday N days or N business days after or before any date. Weekends and holidays can be skipped too.
- Time Calculator (Work Hours Total)
Work out hours worked from start, end and break times, and add them up. Also adds and subtracts time and converts to decimal hours.
- Bill Splitter
Enter the total and the number of people to see what each person owes. Round to an easy amount, have some people pay more, and let the organizer cover the difference.
- Unix Timestamp Converter (Epoch ⇔ Date)
Instantly convert Unix time (epoch seconds or milliseconds) to a UTC, local or Japan time date, and a date back to Unix time.