Color Code Converter for HEX, RGB, HSL and CMYK, With Shades and a WCAG Contrast Check
A colour rarely stays in one format for long. The brand guide gives you a hex code, the stylesheet wants hex to rgb, the design token is in HSL, and the printer wants CMYK. Then an accessibility audit says the same colour is hard to read. This color code converter handles all of that on one screen: paste one value, read it in five formats, pick a lighter or darker version, and see whether it passes WCAG against your background before you copy anything. This guide walks the exact case the tool opens with.
1. What a Color Code Converter Actually Gives You
Every format describes the same colour from a different angle, and each is the native language of a different tool, which is why a color converter never stops being useful. The tool above returns five rows for whatever you paste, each with a copy button:
- HEX — six characters, two each for red, green and blue, shown in uppercase. The form brand guides and most stylesheets use.
- RGB — the same three channels as whole numbers from 0 to 255, written as
rgb(249, 115, 22). - RGBA — RGB plus an opacity from 0 to 1. This is the row that keeps any transparency you entered; section 3 explains why that matters.
- HSL — hue in degrees, saturation and lightness as percentages. The friendliest format for nudging a colour lighter or less intense without guessing.
- CMYK — cyan, magenta, yellow and black as percentages, the way ink is specified for print.
That is hex to rgb hsl cmyk all at once, from one field, rather than a chain of single-purpose pages. It is also a colour converter in the spelling we use across the site — a colour code converter for UK, Australian and Pakistani readers who search that way and find mostly US-built tools that do not.
2. How to Convert HEX to RGB, HSL and CMYK (Step-by-Step)
No account, no email, no feature held back for a paid tier. To use this free online color converter:
Paste or pick a colour
Type a value into the text field at the top, or click the swatch beside it to open a picker. HEX with or without the hash, rgb(), rgba(), hsl() and hsla() are all accepted.
Read the five rows
HEX, RGB, RGBA, HSL and CMYK update as you type; there is no convert button to press.
Copy the one you need
Each row has its own copy button. A green tick confirms the value is on your clipboard, ready to paste into a stylesheet, a design token or a print brief.
On what the field accepts: three-digit shorthand like #F73 is expanded, letter case does not matter, and rgb() and hsl() want commas between the numbers with a percent sign on saturation and lightness, the classic form shown in the MDN reference for CSS colour values. The newer space-separated syntax, named colours such as tomato, and the oklch() family are not recognised; an unrecognised value shows the default orange rather than an error, so a sudden orange swatch means the input needs a second look.
This is also the answer to how to convert hex to hsl and to convert hex to rgb without Photoshop: no design software is needed to read a brand colour in another format. A common case is Tailwind color to HSL, where a palette hex needs to become an HSL custom property; paste the hex, copy the HSL row, done.
3. Transparency: 8-Digit HEX, RGBA and HSLA
The most frequent confusion we see is rgba not working in hex. A plain six-character hex has nowhere to put opacity. Transparency lives as the fourth number of rgba(), or as a seventh and eighth character on the end of a hex, defined in the W3C CSS Color Module Level 4. Figma exports and design-token files often use that eight-character form.
The tool reads both. Paste #F97316CC and the RGBA row gives you the decimal opacity, the practical answer to 8 digit hex to rgba. An hsla() value carries its opacity into the RGBA row the same way.
One honest limit for anyone searching for an hsl to hex converter with alpha: the HEX row is always the six-character form. Opacity survives in the RGBA row but is not written back out as an eight-character hex, and the contrast check in section 5 ignores it. If your destination only takes a hex, copy the RGBA and set the opacity separately where you paste it.
4. How to Make Lighter and Darker Versions of a Hex Colour
Beneath the converted values sits a strip of nine swatches: four tints, your colour in the middle, four shades. Tints are mixed toward white in even steps, shades toward black, and hovering shows the hex. It is the quickest way to make lighter and darker versions of a hex color that stay recognisably the same colour.
The everyday use is buttons. A developer who wants the hover color darker than the button color, and the pressed state darker again, takes the first and second shade and knows they belong to the same family. The tints do the same job for backgrounds, badges and highlights built from one brand colour.
What makes this a tint and shade generator with contrast checker built in, rather than a stand-alone strip, is that each swatch is a button. Click one and it becomes the new base colour: the five formats recompute, the strip re-centres, and the contrast verdict updates. Section 6 puts that to work. The steps are fixed at four each way and the strip does not build complementary or triadic harmonies, so treat it as a lightness ladder rather than a palette generator.
5. How to Check Colour Contrast for Accessibility
If you have ever thought my text colour is hard to read on the background, or an audit report says the site fails a contrast check, the number you need is the contrast ratio. It compares how bright the text is against the background and writes the answer as something like 6.37 : 1; a bigger first number means easier reading.
What is a 4.5:1 contrast ratio?
The minimum for ordinary body text under WCAG 2.1 Level AA, success criterion 1.4.3. Below it, people with moderate low vision and anyone reading a dim phone in daylight start losing letters. It is the threshold most audits and legal requirements point at.
AA vs AAA: what is the difference?
AAA raises the bar to 7:1 for normal text under criterion 1.4.6, the enhanced level for readers with more significant vision loss. AA is what most projects must meet; AAA is what you aim for on long-form reading and public-sector content when the brand allows.
The definitions come from the W3C Web Content Accessibility Guidelines 2.1, and the tool uses the formula that specification describes. To check color contrast for accessibility: enter the text colour in the main field, choose the background with the small swatch picker in the contrast panel, and read the ratio and the two PASS/FAIL cards. A preview box renders a heading and a line of body text in your colours so you can judge it by eye as well.
Two things so the result is used correctly. First, this is a WCAG contrast checker free of any paywall, and it covers normal-sized text at AA and AAA. The lower thresholds WCAG allows for large headings, and the separate rule for icons and form borders, are not reported, so a FAIL here for a large bold heading may still be acceptable under the large-text rule. Second, the background is set with the picker only; there is no second paste-in field. If you wanted a color contrast ratio calculator for two hex codes, paste the text hex, pick the background, and the ratio reads the same.
6. Which Shade of Your Colour Passes WCAG? A Worked Example
This is the job the tool was built for, and why the converter, the swatches and the checker share one screen. The situation is familiar: a brand colour fails contrast on a dark background, or a light one, and you may not change the brand. What you may do is use a slightly lighter or darker version. The question is which one.
Take the colours the tool opens with, which are our own: orange #F97316 as text on dark navy #0F172A. If you searched for orange on dark blue contrast ratio, the answer for that pair is 6.37 : 1. That passes AA, so body text in this orange on that navy is acceptable. It fails AAA, which needs 7:1. Suppose this is a long reading page and you want the enhanced level.
Read the verdict
With the defaults loaded, the panel shows 6.37 : 1, AA PASS, AAA FAIL. The preview box shows the orange heading on navy so you can see what 6.37 looks like.
Click the next tint
The swatch immediately left of centre is the first tint, #FA8F45. Click it. It becomes the base colour, the five rows update, and the ratio jumps to 7.72 : 1 — AA PASS, AAA PASS.
Copy the codes
The HEX row now reads #FA8F45 and the HSL, RGB and CMYK rows describe the same colour. Copy whichever your stylesheet or design token needs. Every code you copy is one that has already passed.
The loop runs the other way too. Flip the background to white and the original orange drops to 2.8 : 1, failing AA outright; that is the orange-on-white problem behind a great many why does my website fail accessibility contrast searches. Click down through the shades instead, and each click tells you whether you have gone dark enough. Because the strip re-centres on whatever you click, you can keep stepping until the card turns green.
The tool does not pick the passing shade for you; you click and read, because the nearest passing value is not always the one that looks right beside the rest of the palette. If the starting colour is in a logo or screenshot, the colour picker reads a hex from an image, and you can paste it straight in here.
7. CMYK for Print: What the Numbers Mean and What They Do Not
When you need to convert RGB to CMYK for printing, or want a hex to CMYK converter free of charge because a print shop asked for ink percentages, the CMYK row gives you them without any design software. Our default orange reads cmyk(0%, 54%, 91%, 2%).
Read those numbers for what they are: the standard mathematical conversion from screen values to ink percentages. It is a good estimate for a brief or a quote request. It is not a colour-managed proof. Presses use ICC profiles for specific paper stocks and inks, and the percentages a production tool produces under a profile can differ from these. Bright, saturated screen colours in particular sit outside what ink can reach, and no formula fixes that. For a commercial press, hand the print shop the hex as well and expect the values to be adjusted.
If the print job also involves artwork, the vector converter handles SVG, EPS and PDF logo files.
8. Why Cortexis Is the Best Free Colour Converter
Three jobs on one colour
Conversion, tints and shades, and a WCAG check share one screen and one input, so a click on a swatch updates everything at once.
Colour converter with no signup
No account, no email, no Pro tier holding the contrast check or the swatches behind a subscription. Every feature is the free version.
Five formats from one paste
HEX, RGB, RGBA, HSL and CMYK together, each with its own copy button, from hex, rgb(), rgba(), hsl() or hsla() as input.
Transparency is understood
Eight-character hex and rgba() opacity are read and carried into the RGBA row, which many single-purpose converters drop.
A real WCAG 2.1 verdict
The ratio uses the formula from the W3C specification and reports AA and AAA for normal text, with a preview so you can judge by eye as well.
Nothing is kept
Colour values are not stored on our servers, not retained after your session, and never used for analytics or training. Paste an unreleased brand colour with a clear conscience.
If you searched for a color converter no signup could gate, this is it, and it sits alongside a wider set of free developer and design tools on the same terms. The JSON formatter tidies the design-token file you are pasting into, and the Base64 encoder handles the inline SVG icons that sit beside the colours.
9. Frequently Asked Questions (FAQ)
Is this color code converter free, and do I need to sign up?
It is free and there is no account, email or trial. The five-format conversion, the tints and shades, and the WCAG contrast check are all available with nothing held back for a paid tier.
What is a 4.5:1 contrast ratio and is it enough?
It is the minimum contrast WCAG 2.1 requires between ordinary body text and its background to meet Level AA, the level most audits and regulations point at. The enhanced AAA level requires 7:1. The tool shows both cards, so you can see which level a pair meets.
Which shade of my color passes WCAG without changing the brand?
Enter your brand colour, set the background with the picker in the contrast panel, and click through the tints or shades in the swatch strip. Each click makes that swatch the active colour and updates the ratio and the AA and AAA cards, so you stop at the first one that turns green and copy its codes.
Why does rgba not work in a hex code?
A six-character hex has no room for opacity. Transparency belongs in the fourth value of rgba() or in an eight-character hex like #F97316CC. This tool reads both and shows the opacity in the RGBA row, but its HEX row is always the six-character form, so copy the RGBA when you need the transparency kept.
Can I use the CMYK value for a professional print job?
Use it as an estimate. The CMYK row is the standard mathematical conversion, not a colour-managed one, so a print shop working under an ICC profile may land on different percentages. Give them the hex as well and expect adjustment for the press.
Does the contrast checker cover large text and buttons?
It reports AA and AAA for normal-sized text only. WCAG allows a lower ratio for large headings and has a separate rule for icons and form borders, and neither is shown here, so check the criterion that applies to your element.
Working on the rest of the design? The colour picker pulls a hex out of any image, image compressor shrinks the graphics those colours sit behind, font converter gets the typeface into web formats, and the QR generator gives you a code in the same brand colour. If you would rather understand colour models and contrast from the ground up, our free graphic design course covers RGB, CMYK and accessible palettes from the first lesson.