What is a HEX color code?

HEX is a six-digit code that represents a color using hexadecimal values for red, green, and blue. For example, #FF0000 is pure red. It is the most common color format used in HTML and CSS.

CMYK stands for Cyan, Magenta, Yellow, and Key (black). It is used in printing, where inks are mixed instead of light. Unlike RGB, CMYK is a subtractive color model.

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) defines contrast ratios to ensure text is readable. A ratio of 4.5:1 or higher is recommended for normal text. Our tool shows you the contrast between your color and black/white.

Does this tool work offline?

Yes. All color calculations happen directly in your browser. Once the page is loaded, you can disconnect from the internet and the tool will continue to work perfectly.

🎨

Color Picker

Q: What is the difference between RGB and HSL?

RGB describes a color by the intensity of red, green, and blue light. HSL describes a color by its hue (angle on the color wheel), saturation (intensity), and lightness. HSL is often more intuitive for adjusting colors.

Q: What is a complementary color?

A complementary color is the opposite of a given color on the color wheel. If your main color is red, its complementary is cyan. Complementary pairs create strong contrast and are used in design to draw attention.

Q: How do I copy a color code?

Each color format (HEX, RGB, HSL, etc.) has a copy button next to it. Click it to instantly copy the value to your clipboard, ready to paste into your CSS, design tool, or anywhere else.

Pick colors and convert between HEX, RGB, HSL, HSV and CMYK formats.

Selected Color

#E91E63

🎨

rgb(233, 30, 99)

hsl(340, 82%, 52%)

hsv(340, 87%, 91%)

cmyk(0%, 87%, 58%, 9%)

🌈 Color Harmony

Complementary

Analogous

🎚️ Shades & Tints

♿ WCAG Contrast

Text Sample

On Black

—

Text Sample

On White

—

💻 CSS Output

color: #E91E63;

About Our Color Picker

Colors are a powerful part of design. Whether you're trying to make a button look inviting, a logo memorable or give a website that trustworthy feeling the right color can make all the difference. But unfortunately finding the right color and converting it into the correct format can be quite tricky.

Our color picker tool takes the hassle out of this. Simply select a color and instantly see the value of the color in all the popular formats including HEX, RGB, HSL, HSV & CMYK. You can easily copy any color code by clicking the button. You can also find complementary & analogous colors, find out the WCAG contrast ratios for your color and everything can be done in your browser!

How To Use

The color picker tool is very easy to use. Just follow the below steps:

Select a color using the big color box or enter a HEX code into the box.
Use the slider to adjust your colors. Use the RGB or HSL slider to adjust each channel.
Copy any format by clicking the 📋 icon beside any of the color formats.
Find out the complementary & analogous colors by looking at the Color Harmony section. Or look at the row of shades to find out the tints & shadows of your color.
Check your colors are accessible by looking at the WCAG contrast section. You'll be able to see how readable your color is with black & white text.

Why Use Our Tool?

All formats. You can see all color formats in once place. The colors update in real time.
Easy to copy. Each color format has its own copy button so you can copy exactly what you need.
Color harmony. Find out complementary, analogous & shade variations of any color.
Accessible. You can see the WCAG contrast ratios for your color with black & white text.
Fully private. All calculations are done in your browser so we never receive any color data.

Color Formats Explained

HEX is the most commonly used format. It uses a short six digit code to represent your color. RGB gives details about the amount of red, green and blue light needed to create the color. HSL is a more intuitive way of using colors. You can think in terms of how red or how bright.

HSV works in a similar way to HSL but is a slightly different model. It is used in color pickers with a hue circle. CMYK is used for printing. It represents the amount of cyan, magenta, yellow and black ink needed to create the color.

Common Uses

Web, app and UI design
Brand palettes and marketing
Match colors from an image or screenshot
Print design using CMYK values
Ensure colors have good contrast
Create color palettes for illustrations or 3D art

FAQ's

What is a HEX color?

HEX codes are six-character codes that use the hexadecimal system to give details about the amount of red, green, and blue present in a particular color. Examples of the hexadecimal code include #FF0000, which refers to pure red color. The hexadecimal code is the most popular code used in HTML and CSS.

What is the difference between RGB and HSL?

RGB refers to the intensity of red, green, and blue light which can be used to form a particular color while HSL gives information about the hue, saturation, and lightness of the color. HSL is often easier to use.

What is a complementary color?

Complementary colors are the exact opposites of each other in the color wheel. If red is your base color, the complementary color would be cyan. They create a high contrast which can be used in design.

What does CMYK stand for?

Cyan, Magenta, Yellow & Key (Black). Used when printing. Instead of mixing lights they mix inks. Unlike RGB it is a subtractive color model.

How do I copy a color code?

Each color format (HEX, RGB, HSL etc) has a copy button. Simply click on the button to copy the value.

What is the Contrast Ratio in WCAG?

There are guidelines that establish minimum contrast ratios in order to ensure good readability of text under the acronym of WCAG. The recommended contrast ratio should be equal to 4.5:1 or more. Our tool will show you the contrast between your color and black/white.

Can I use this tool offline?

Yes! All color calculations are done within your browser. Once the page has loaded you can turn your internet off and it will still perfectly work!

Related Tools

If you found this color picker helpful why not try our Base64 encoder for developer tasks or our Case Converter for text formatting?