Color Picker & HEX/RGB Converter: A Simple Guide
Picking the right color is easy. Getting its code into the format your project needs is the hard part. A Color Picker & HEX/RGB Converter lets you choose any color and copy it as HEX, RGB, HSL or CMYK instantly.
What are color codes?
- HEX: a six-character code starting with #, such as #7C3AED. It is the most common format on websites.
- RGB: the amount of red, green and blue from 0 to 255, such as rgb(124, 58, 237). Screens create every color from these three lights.
- HSL: hue, saturation and lightness. It is easy to adjust by hand, since you can lighten or darken a color by changing one number.
- CMYK: cyan, magenta, yellow and black, the inks used in printing.
How to use the tool
- Choose a color with the picker, or type a HEX, RGB or HSL value.
- Watch the other formats update at once.
- Press Copy next to the format you need.
The tool accepts shorthand such as #73e and plain numbers such as 124 58 237. In supported browsers, such as Chrome and Edge, the Pick from screen button lets you grab a color from anywhere on your display.
Build a full palette
One color is only the start. The tool also creates nine shades and tints, from light to dark, and matching palettes: complementary, analogous and triadic. Click any swatch to make it your main color.
Check text contrast
Text must be easy to read. The contrast checker shows how white and black text look on your color, with a ratio and a WCAG rating of AAA, AA, AA large text only or low contrast. A ratio of at least 4.5 to 1 is the standard for normal text, and good contrast helps everyone, including people with low vision.
Tips for choosing colors
- Pick one main color, then use shades of it for backgrounds and borders.
- Use a complementary color sparingly for buttons and highlights.
- Check contrast before you finalize a design, not after.
- Remember CMYK values here are a screen-based estimate. Printers may adjust them, so request a proof for important print jobs.
Who uses a color converter?
Web designers and developers move between HEX and RGB or HSL in code. Graphic designers build palettes, and anyone creating slides, posts or documents can find a matching color quickly.
Free and private
The tool runs in your browser. Nothing is uploaded or stored, and there is no sign up or login.
Frequently asked questions
Which format should I use on a website? HEX and RGB both work everywhere. HSL is handy when you want to adjust lightness.
Why is my pasted code not accepted? The field shows a red border when the value is not valid, such as an RGB number above 255.