Free Color Picker
Colour for people who are not designers
Choosing colours is hard when you are not trained for it. Which shades go together? How do you get a lighter version of your brand blue? What is that exact colour on someone else’s website? This colour picker answers those questions. Choose or type a colour, and it shows the HEX, RGB, HSL, HSV and approximate CMYK values side by side, with a contrast check and matching colours. In browsers that support it, Pick from screen lets you click any pixel on your display and read its code.
Converting between formats
Different tools want different formats, and one colour has many names. The brand colour used on this site, for example, is #4338CA in HEX, which is rgb(67, 56, 202) in RGB and about hsl(244, 58%, 51%) in HSL. HEX and RGB are the same information written two ways, a mix of red, green and blue light. HSL describes the same colour as hue, saturation and lightness, which is far more natural for adjusting a colour by eye. Type any form and the others update instantly, ready to copy.
Making shades and tints with HSL
This is the most useful trick in the tool. To get a lighter or darker version of a colour, keep the hue and saturation and change only the lightness. If your brand colour has a lightness of 51 percent, a tint at 90 percent makes a soft background, and a shade at 30 percent makes a strong hover colour. The result always looks related, because the hue has not moved. Choose the colour here and read the HSL values to plan a whole set.
Building a simple palette
- Complementary: the colour opposite on the colour wheel. It gives strong contrast, great for a call-to-action button against a calm background.
- Analogous: colours next to each other, which feel harmonious and calm.
- Triadic: three colours spaced evenly around the wheel for a lively but balanced look.
The matching colours panel shows these for your chosen colour. A good starting formula is the 60-30-10 rule: about 60 percent of the page in a dominant neutral, 30 percent in a secondary colour and 10 percent in an accent.
Grabbing a colour from the screen
Click Pick from screen, then click any pixel on your display, including outside the browser window in supported browsers, and the tool reads its exact colour. It works in current desktop versions of Chrome and Edge, and some other browsers do not support it yet. It is ideal for matching a client’s logo colour, copying a shade from a mock-up or checking what colour a page really uses. If the button is missing, your browser does not offer the feature.
Print colour is a different story
CMYK is the mix of inks used in printing, and the values shown here are calculated from the screen colour as an approximation. Screens can display some very bright blues and greens that ink cannot reproduce, so printed colours may look duller than on screen. For anything that matters, such as packaging and logos, ask your printer for their colour profile and proof, instead of trusting a conversion from a web colour.
A small brand palette from one colour
Start with a main colour, say indigo. Use its HSL values to make a very light tint for backgrounds, a mid tone for buttons and a dark shade for headings and hover states. Add one complementary accent for important actions, and a neutral grey that shares the same hue at very low saturation, so everything feels related. Write down the five HEX codes with their roles, and you have a consistent system in about ten minutes.
Check readability before you commit
A pretty colour can still be unreadable. The tool shows the contrast of your colour against black and white text, but for a precise check of a chosen pair, use the colour contrast checker, which tests them against accessibility standards and suggests a passing shade. Keep your final palette written down, with the HEX code of each colour and its role, so everyone working on your brand uses exactly the same values.
FAQ
Click Pick from screen and click the colour. This works in Chrome and Edge on desktop. Other browsers may not support it yet.
Type the HEX code and the RGB value appears instantly, ready to copy.
RGB mixes light for screens. CMYK mixes ink for print. Some bright screen colours cannot be printed exactly.
It relies on the EyeDropper feature, which only some browsers support.
No. Everything runs in your browser.
It is an approximation calculated from the screen colour. Printed results depend on inks, paper and the printer profile, so ask your printer for a proof.