Color picker

Choose a color and get every code for it

Sometimes you know the color you want when you see it, not as a number. The color picker lets you choose visually, then gives you its value in the formats designers and developers use, HEX, RGB, HSL and CMYK, so you can paste it straight into CSS, Figma, Canva, PowerPoint or your website builder.

Choose a color with the picker, adjust it until it looks right, and copy the code you need.

It's a quick companion when choosing brand colors, building a palette, styling a button, or matching a color you've seen.

How to use the color picker

1. Click the color field and choose a color.
2. Adjust it until it looks right.
3. Read the values in each format.
4. Copy the code you need into your project.

Examples

Brand periwinkle

Input: Pick #8997BB

Output: HEXA #8997BB

For a fully opaque color, the HEXA value is the normal six-digit code. The RGBA, HSLA, HSVA and CMYK boxes update to the same color.

A semi-transparent overlay

Input: #8997BB with the opacity slider at 50%

Output: HEXA #8997BB80

Two extra digits are added for transparency (80 is about 50%), and RGBA ends in 0.5. Use either in CSS to keep the transparency.

Common uses

• Choosing brand, button and background colors for a website.
• Building a color palette for a logo, slides or social graphics.
• Getting CSS values while styling a page.
• Finding lighter and darker variants for hover states.
• Teaching color theory and color models.
• Choosing an accessible text color, then checking its contrast against the background.

Tips and things to know

• Check contrast between text and background: WCAG recommends at least 4.5:1 for normal text.
• Build a palette from one base color by changing only lightness in HSL.
• Convert between every format with the color converter, or use HEX to RGB and RGB to HEX for quick swaps.
• Screens show colors differently; test important brand colors on several devices.

Edge cases and limitations

• The CMYK value is a simple mathematical conversion, not a color-managed print profile. Ask your printer for exact values for brand printing.
• To pick a color from an image or another app, use your browser's or operating system's eyedropper, then paste the code here to get the other formats.
• Colors look different on different screens. Check important brand colors on more than one device.

Frequently asked questions

How do I find the HEX code of a color?

Pick the color here and copy the HEX value, which starts with #.

What color format should I use in CSS?

Any of HEX, rgb()/rgba() or hsl()/hsla() works. HEX is the most common; HSL is easiest to adjust.

How do I pick a color from an image?

Your operating system or browser may include an eyedropper tool. Once you have the value, paste it into the color converter.

What's the difference between RGB and CMYK?

RGB is for screens (light), CMYK is for print (ink). Convert carefully when designing for print.

Related tools

• Color converter: Convert your color to multiple other formats.
• HEX to RGB: Easily convert HEX color units to RGB with this easy convertor.
• RGB to HEX: Easily convert RGB color units to HEX with this easy convertor.
• Image optimizer: Compress and optimize images for a smaller image size but still high quality.
• Exif reader: Upload a image and extract the data out of it.