Generators
Color Format Converter
Convert colours between HEX, RGB and HSL formats in either direction, with a live colour preview.
About the Color Format Converter
The Color Format Converter translates any colour between HEX, RGB, HSL, HSV/HSB and CMYK as you type, with a colour picker, a live preview, a text-contrast check for white and black text, and a row of tints and shades. Tap any value to copy it.
What you can do with the Color Format Converter
- Five formats: HEX, RGB, HSL, HSV/HSB and CMYK.
- Picker and preview: Choose visually or type a code.
- Contrast check: For white and black text.
- Tints and shades: A row of lighter and darker versions. Tap to copy.
The formats
HEX (#8b5cf6) and RGB (rgb(139, 92, 246)) describe amounts of red, green and blue from 0 to 255. HSL describes hue (0–360°), saturation and lightness; HSV/HSB, used in design apps like Photoshop and Figma, uses brightness instead of lightness. CMYK is the cyan, magenta, yellow and black used in printing.
Why designers like HSL
HSL makes adjustments intuitive: to make a darker shade, lower the lightness; for a muted version, lower the saturation; for a different colour with the same feel, change only the hue. The tints and shades row does the lightness part for you.
About the CMYK value
Screens mix light (RGB) and printers mix ink (CMYK), and printers can't reproduce every screen colour. The CMYK figure here is the standard mathematical conversion, which is fine for a starting point; for exact print colours, ask your printer for their colour profile.
Related tools
Frequently Asked Questions
What formats can I type?
HEX with or without # (including 3-digit shorthand like #fff), rgb(…) and hsl(…). Or use the colour picker.
Which format should I use in CSS?
HEX, rgb() and hsl() all work in every modern browser. HEX is compact; HSL is easiest to adjust by hand.
Is my colour readable as text?
The text-contrast boxes show the contrast ratio with white and black text and whether it passes the 4.5:1 accessibility guideline.
How do I convert HEX to RGB by hand?
Split the six-digit code into three pairs and convert each pair from base 16 to a number from 0 to 255. For #8B5CF6, 8B is 139, 5C is 92 and F6 is 246, giving rgb(139, 92, 246). The converter does this instantly as you type.
What is the difference between HSL and HSV?
Both use the same hue angle but treat brightness differently: in HSL, 100% lightness is always white and full colour sits at 50%, while in HSV (also called HSB), 100% value is the brightest form of the colour. Design apps like Photoshop often use HSB, while CSS uses HSL.
Why doesn't the CMYK value match what my printer uses?
The CMYK shown is a simple mathematical estimate from the RGB values, with no printer or paper profile. Real print results depend on the press, ink and paper, so ask your printer for their exact CMYK values or a colour proof for important brand colours.
What contrast ratio does text need?
The WCAG accessibility guideline asks for at least 4.5:1 for normal text and 3:1 for large text. The contrast check shows the ratio for white and black text on your colour, marking it AA, Large text only, or Too low.
What is the CSS rgb() row with no commas?
It is the newer space-separated CSS syntax, like rgb(139 92 246), which means the same as rgb(139, 92, 246). All current browsers support both forms, so use whichever matches the style of your existing stylesheet.
Is #FFF the same as #FFFFFF?
Yes. A three-digit HEX code is shorthand where each digit is doubled, so #FFF means #FFFFFF and #8B5 means #88BB55. The converter accepts both, with or without the # sign, and HEX codes are not case-sensitive.
Does it keep transparency from rgba() or hsla()?
No. You can paste rgba() or hsla() values and the colour is read, but the alpha (transparency) part is ignored and all results are for the solid colour. Eight-digit HEX codes with an alpha value are not read.
What are tints and shades?
A tint is a lighter version of a colour and a shade is a darker one. The row below the converter keeps your hue and saturation and steps lightness from 95% down to 15%. Tap any of them to switch the converter to that colour.
Related tools
- Coin Flip & Yes/No Decider, Flip a fair virtual coin or get a random Yes / No answer, with a running tally of every result.
- Random Name Picker, Pick one or several random winners from a list of names or entries, fair, quick and ideal for giveaways, raffles and classrooms.
- Random Color Generator, Generate a random colour with its HEX code and a live preview, useful for design ideas and placeholder colours.
- Color Palette Generator, Create a five-colour palette from one starting colour, with evenly spaced hues for balanced, cohesive colour schemes.
- CSS Gradient Generator, Build a CSS linear gradient from two colours and an angle, preview it live and copy ready-to-use CSS.
- Random Username Generator, Generate six catchy username ideas at a time from adjective and noun combinations, with optional numbers or underscores.
Quick Work Studio