How to use the Color Picker
- Pick a color with the color box or type a HEX code.
- Fine-tune hue, saturation and lightness.
- Copy the format you need.
What does this tool do?
HEX and RGB describe colors by their red, green and blue components. HSL — hue, saturation, lightness — is easier for humans to adjust: change lightness to get a lighter or darker version of the same color.
Why use it?
- Get codes for CSS, design tools and brand guides.
- Adjust colors intuitively with HSL.
- Copy any format in one click.
Use cases
- Find the exact code for a brand colour and use it in CSS, Figma or Canva.
- Make a lighter or darker version of a colour by moving only the lightness slider.
- Check at a glance whether black or white text reads better on a colour — the preview picks the more readable one.
One color, five formats
#2C48D6 is rgb(44, 72, 214), hsl(230, 67%, 51%), hsv(230, 79%, 84%) and cmyk(79%, 66%, 0%, 16%).
Common mistakes
- Sending on-screen CMYK values to a printer as final. The CMYK shown is a standard conversion without a printer profile; ask your printer for a proof.
- Using a light brand colour for text. A colour that looks fine as a background often fails contrast as text — check it with the Contrast Checker.
Accuracy and limits
- CMYK values use the standard formula without colour profiles, so printed colours can differ.
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
How do I pick a colour from an image or screenshot?
Use the Image Color Picker: open the image (or a screenshot) and click anywhere on it to get that pixel's HEX and RGB codes.
Which colour format should I use in CSS?
Any of HEX, rgb() or hsl() works in every browser. HEX is the most compact and common in design handoffs; hsl() is easiest to tweak by hand.
When should I use HSL instead of HEX?
HSL is easier to adjust by hand. To make a color lighter or darker, change only the lightness; to make it more muted, lower the saturation. HEX is more compact and common in design handoffs.
What is an 8-digit HEX code?
The last two digits set transparency. #FF660080 is the same orange at about 50% opacity. All current browsers support 8-digit HEX in CSS.
Last reviewed by the M2Toolkit team.