Choose the perfect color
Whether you are designing a logo, building a website or choosing paint for a poster, you need the exact code for a color so you can use it again everywhere. This color picker lets you choose a color visually or type a HEX code, then shows the same color in the four formats used by designers, developers and printers.
How to use the color picker
- Click the large color box to open your device's color selector, or type a HEX code such as
#FF5733. - Read the HEX, RGB, HSL and CMYK values and copy the one you need.
- Use the tints and shades below to find lighter and darker versions for hover states, borders and backgrounds.
Color formats explained
| Format | Example | Used for |
|---|---|---|
| HEX | #4F46E5 | Websites, CSS, most design tools |
| RGB | rgb(79, 70, 229) | Screens, CSS, image editors |
| HSL | hsl(243, 75%, 59%) | Adjusting lightness and saturation in CSS |
| CMYK | cmyk(66%, 69%, 0%, 10%) | Printing on paper |
Tints and shades
A tint is made by mixing a color with white, and a shade is made by mixing it with black. This tool mixes in steps of 16 percent. Using tints and shades of one brand color keeps a design consistent: for example a light tint for a background panel, the main color for buttons and a dark shade for text or hover states.
A note about CMYK
Screens create color with light (RGB), while printers use ink (CMYK). The CMYK values here are a simple mathematical conversion. Real printed colors also depend on the paper and the printer's color profile, so ask your print shop for a proof when exact color matters.
Frequently asked questions
Can I enter a 3-digit HEX code?
Yes. A short code such as #F53 is expanded to #FF5533 automatically.
How do I get a color from an image?
Use the Image Color Picker, which reads the color of any pixel you click.
Which format should I use in CSS?
All three screen formats work in every modern browser. HEX is the shortest; HSL is the easiest to adjust by hand.