How to Convert a Colour
Designers hand over HEX, CSS wants rgb or hsl, print needs CMYK, and picking a lighter variant by hand means guessing at numbers until it looks right. This converter handles all of it in one place. Paste a colour in almost any notation — a HEX with or without the hash, three, four, six or eight digits, or a full rgb, rgba, hsl or hsla string — and every other format appears instantly, each with its own copy button. Transparency is carried through, so an eight-digit HEX or an rgba value keeps its alpha in the other notations rather than being silently dropped. Beyond conversion, two things make this genuinely useful for real work. The contrast checker computes the WCAG ratio against both white and black backgrounds and shows whether it passes AA and AAA for normal and large text, which is the check most colour tools leave out entirely. And the tint-and-shade strip generates a nine-step scale from your colour, so you get a coherent light-to-dark range for hover states, borders and backgrounds — tap any swatch to make it the active colour. Everything runs in your browser.
Enter a colour
Type any notation, or use the picker to choose visually.
Read every format
HEX, RGB, HSL, HSV and CMYK all update instantly.
Check and copy
Review the contrast, pick a tint, and copy what you need.
Understanding Contrast
What the ratio means
Contrast is measured as a ratio between two colours' relative luminance, from 1:1 for identical colours up to 21:1 for pure black on pure white. Higher means easier to read.
The thresholds
WCAG asks for at least 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for the stricter AAA level. Failing these makes text hard to read for many people.
Common Use Cases
HEX to RGB for CSS
Convert a designer's HEX into the rgb or rgba your stylesheet needs.
Build a colour scale
Generate tints and shades for hover, border and background states.
Check accessibility
Confirm your text colour passes WCAG before shipping it.
Print preparation
Get an approximate CMYK value for a screen colour.
Adjust lightness
Switch to HSL to nudge brightness without changing the hue.
Match a brand colour
Convert a brand HEX into every notation your tools require.
Design tokens
Produce consistent values for a design system.
Add transparency
Turn a solid colour into an rgba or eight-digit HEX with alpha.
Tips & Best Practices
Use HSL to build palettes
Keeping the hue fixed and varying lightness gives a far more coherent scale than picking HEX values by eye.
Check contrast before shipping
A colour that looks fine to you may be unreadable for someone with low vision — verify against the real background.
Large text has a lower bar
Text at 18pt or 14pt bold only needs 3:1, so a colour failing AA for body text may still work for headings.
Treat CMYK as a starting point
Screen-to-print conversion is approximate; always confirm with a proof for brand-critical colours.
Prefer eight-digit HEX for alpha
It keeps colour and transparency in one token, which is tidier in a design system.
Don't rely on colour alone
Pair colour with icons, labels or underlines so meaning survives for colour-blind users.
Troubleshooting
My colour won't parse
Check the notation. A HEX needs three, four, six or eight hex digits, and rgb or hsl values need three or four numbers in brackets.
The CMYK looks off in print
CMYK conversion from screen colour is approximate. Use your print profile or a proof for exact matching.
My alpha disappeared
Alpha only appears when it's below one. A fully opaque colour shows plain HEX and rgb values.
Rounding changed my HSL slightly
HSL values are rounded to whole numbers for readability, so converting back and forth can shift by a unit.
Frequently Asked Questions
How do I convert a colour for free?
Paste any HEX, rgb or hsl value above and every other format appears instantly, each with a copy button — free, no signup.
Which formats are supported?
HEX including alpha, RGB and RGBA, HSL and HSLA, HSV and an approximate CMYK.
Does it handle transparency?
Yes. Eight-digit HEX and rgba or hsla values keep their alpha through every conversion.
What is the contrast checker for?
It shows the WCAG contrast ratio against white and black, with AA and AAA pass or fail badges for accessibility.
What contrast ratio do I need?
At least 4.5:1 for normal text at AA level, 3:1 for large text, and 7:1 for the stricter AAA level.
What are tints and shades?
Lighter and darker variants of your colour. The nine-step strip gives a coherent scale for UI states.
Can I click a swatch?
Yes. Tapping any tint or shade loads it as the active colour so you can convert it.
Is the CMYK accurate for print?
It's a standard approximation. Exact print colour depends on the ink, paper and colour profile.
What's the difference between HSL and HSV?
Both start from hue and saturation, but HSL's third value is lightness while HSV's is value or brightness — they behave differently at the extremes.
Can I use the colour picker?
Yes. The swatch next to the input opens your system picker for choosing visually.
Does a short HEX work?
Yes. Three-digit and four-digit shorthand HEX values are expanded automatically.
Is my data sent anywhere?
No. All conversion happens in your browser.
Why did my HSL change by one?
Values are rounded to whole numbers for readability, so a round trip can shift slightly.
Can I copy just one format?
Yes. Every row has its own copy button.
Does it work with named colours?
Enter the HEX equivalent — named CSS colours aren't parsed directly.
Does it work offline?
Once the page has loaded it runs entirely in your browser, so it keeps working without a connection.
Does it work on phones?
Yes, in any modern browser on Windows, Mac, Android or iPhone with nothing to install.
Is this tool really free?
Completely free, forever — no account, no ads and no premium wall.
100% free · No signup · Processed in your browser · Data never sent
Last updated: August 2026 · FlipMyFormat Color Converter
Written and maintained by the FlipMyFormat team · Runs entirely in your browser