This free color converter turns a color between HEX, RGB, RGBA, HSL and CMYK in one step, so you can go from rgb to hex or hex to rgb and copy the result. It also checks text contrast against WCAG and pulls a color palette from an image.
- How to use the color converter
- Color formats you can type
- How to convert RGB to HEX and HEX to RGB
- WCAG contrast checker: what the badges mean
- Color palette from image: how it works
- Best practice for picking and using colors
- Common mistakes
- FAQ
- Related tools
How to use the color converter
- Type a color into the main box, or use the color picker beside it. The box accepts HEX, rgb(), hsl() and cmyk() values.
- Look at the swatch and the list of values. HEX, RGB, RGBA, HSL and CMYK all update as you type.
- Press Copy next to the format you need.
- To test text on a background, set the Text colour and Background colour in the contrast checker and read the ratio and the four Pass or Fail badges.
- To build a palette, drop an image into the palette box, set how many colors you want from 5 to 8, then press a chip to load that color into the converter or Copy to copy its HEX value.
Everything runs in your browser. The colors you type and the images you drop are not uploaded, and you do not need an account.
Color formats you can type
The converter reads several ways of writing a color. Here is each one for the same blue.
| Format | Example | Notes |
|---|---|---|
| HEX | #2563eb | The # is optional. 3, 4, 6 and 8 digit forms work |
| RGB | rgb(37, 99, 235) | Red, green and blue from 0 to 255 |
| HSL | hsl(221, 83%, 53%) | Hue in degrees, then saturation and lightness |
| CMYK | cmyk(84%, 58%, 0%, 8%) | Cyan, magenta, yellow and black in percent |
You can also type a few common color names such as black, white, red or teal. A 4 or 8 digit HEX value, or an rgba() or hsla() value, includes an alpha channel for transparency. The RGBA row then shows the opacity, and the HEX row adds two digits at the end.
How to convert RGB to HEX and HEX to RGB
A HEX color is three numbers written in base 16. The first two characters are red, the next two are green and the last two are blue. So #2563eb is 25 for red, 63 for green and eb for blue. In decimal, those are 37, 99 and 235, which is rgb(37, 99, 235).
To go the other way, write each of the three numbers in base 16 and join them. 37 is 25, 99 is 63 and 235 is eb. The tool does this for you. Type the HEX or the RGB value and read the other format straight away. It also shows the HSL form, which is useful for making lighter or darker versions of a color, since you only change the lightness number.
| Color | HEX | RGB and HSL |
|---|---|---|
| Black | #000000 | rgb(0, 0, 0), hsl(0, 0%, 0%) |
| White | #ffffff | rgb(255, 255, 255), hsl(0, 0%, 100%) |
| Red | #ff0000 | rgb(255, 0, 0), hsl(0, 100%, 50%) |
| Grey | #808080 | rgb(128, 128, 128), hsl(0, 0%, 50%) |
| Blue | #2563eb | rgb(37, 99, 235), hsl(221, 83%, 53%) |
A note on CMYK. The CMYK numbers use the standard simple formula. They are a good starting point, but printers use color profiles, so a printed result can look different. For a print job, ask your printer for the values or profile they want.
WCAG contrast checker: what the badges mean
Text is easy to read when it stands out from its background. WCAG, the web accessibility standard, measures this as a ratio from 1:1 for no difference to 21:1 for black on white. The checker shows the ratio and four badges.
| Badge | Needs a ratio of | Applies to |
|---|---|---|
| AA normal text | 4.5 or more | Body text under about 24 pixels |
| AA large text | 3 or more | Large or bold headings |
| AAA normal text | 7 or more | Body text, higher standard |
| AAA large text | 4.5 or more | Large or bold headings, higher standard |
WCAG treats text as large when it is 18 point (about 24 pixels) or bigger, or 14 point (about 19 pixels) and bold. Some examples from the tool: white text on #2563eb gives 5.16, which passes AA for normal and large text, and AAA for large text but not for normal text. White on #f59e0b gives 2.14, which fails every level. Dark #0b1b3a on #f59e0b gives 7.93, which passes all four.
Two limits to know. The tool treats both colors as solid, so transparency is ignored. It also rounds the ratio down, so a ratio of 4.499 never shows as a pass at 4.50. The checker looks at text color pairs. It does not check images, focus outlines or other interface parts, so test those too.
Accessible color is also good for business. Text that people can read is text that people act on, which is why a web design project should check contrast on buttons, forms and headings before launch.
Color palette from image: how it works
- Drop a logo, photo or screenshot into the Palette from image box.
- The tool shrinks a copy of the image to about 100 pixels on its longest side and reads the pixels. Transparent pixels are ignored.
- It groups similar colors using a method called median cut and shows the average of each group, with the most common color first.
- Use the slider to ask for 5, 6, 7 or 8 colors. A flat logo may return fewer if it does not have that many distinct colors.
- Press a chip to load the color above and convert it, or press Copy to copy the HEX.
A palette from a photo gives you a set that already looks natural together. It is a good way to match a banner to a product photo or find the main brand color in a logo file. Always check the contrast of the pairs you plan to use for text.
Best practice for picking and using colors
Use a small set. Most sites work with one main color, one accent, a dark text color, a light background and one or two greys. Write the values down in one place, so everyone who makes a banner, page or document uses the same ones.
Choose HEX for web and CSS, because it is short and everywhere. Use HSL when you want to adjust a color by eye. Use RGB when a tool asks for it, and CMYK only as a starting point for print. When you save a final color, store it as HEX and keep a note of the name.
Do not rely on color alone. A red error with no icon or text is invisible to some people. Pair color with a label or a shape. If you want to check how your colors look on a built page, try the HTML Viewer, and for converting logo files first, the WebP to PNG Converter helps.
Common mistakes
The first mistake is picking text colors by eye on a bright monitor. Light grey text on white can look fine on your screen and be unreadable elsewhere. Run it through the checker. The second is mixing formats in a style guide, which leads to small differences such as two nearly identical blues.
The third is using a photo palette with low contrast pairs. The most common colors in a picture often sit close together. Pick the lightest and darkest from the set for text and background. The fourth is trusting CMYK values for a print run. Always ask your printer, and look at a proof.
Frequently asked questions
How do I convert RGB to HEX?
Type the RGB value, such as rgb(37, 99, 235), into the main box. The HEX row shows the result, here #2563eb. Press Copy to copy it. The tool also works in the other direction, so you can paste a HEX value and read the RGB numbers.
How do I convert HEX to RGB?
Type the HEX code, with or without the # sign, and read the RGB row. For example, #2563eb gives rgb(37, 99, 235). Short three digit codes such as #fff are also read, and eight digit codes include transparency.
What contrast ratio do I need?
For WCAG level AA, normal text needs 4.5 to 1 and large text needs 3 to 1. For level AAA, normal text needs 7 to 1 and large text needs 4.5 to 1. The checker shows the ratio and four Pass or Fail badges.
How does the color palette from image tool work?
The tool shrinks a copy of your image, reads the pixels, and groups similar colors with a method called median cut. It then shows 5 to 8 average colors, most common first. The image is not uploaded.
Why do my CMYK values look different when printed?
The tool uses a simple formula to work out CMYK from RGB. Printers use color profiles for their inks and paper, so the same numbers can look different. Ask your printer for the values or profile to use.
Does the tool support transparency?
Yes for conversion. A 4 or 8 digit HEX value, an rgba() value or an hsla() value includes opacity, shown in the RGBA row. The contrast checker ignores transparency and treats both colors as solid.
Are my colors or images stored?
No. Conversions, contrast checks and palettes are made in your browser. Nothing is uploaded or saved, and you do not need to sign up. Copy any values you want to keep before you close the page.
Related free tools
Need help with a website as well as a quick tool? Get in touch with Rank Ray and tell us what you are working on.