🎨 Color Picker

Free online color picker

Pick any color and instantly get its HEX, RGB and HSL codes, ready to paste into your CSS, design software, presentation or graphics project. Click the large color box, choose a shade from the picker, and the three codes update at once. Press Copy next to a code to put it on your clipboard. Everything runs in your browser, with nothing to install and no account to create.

How to use it

1. Click the color box on the left to open your browser's color picker.
2. Choose a color by dragging or by typing a value in the picker.
3. Watch the preview bar and the three code boxes update.
4. Click Copy beside the format you need.

The three color formats explained

• HEX: a six-character code that starts with a hash sign, like #6C8CFF. Each pair of characters sets the red, green and blue amounts in base 16. HEX is the most common format on websites.
• RGB: three numbers from 0 to 255 for red, green and blue, like rgb(108, 140, 255). It is the same color as the HEX code written in plain numbers.
• HSL: hue, saturation and lightness. Hue is the position on the color wheel from 0 to 360 degrees, saturation is how vivid the color is, and lightness is how bright it is. HSL is easier for people to adjust by hand, such as making a color a little lighter or less intense.

Tips for choosing colors

• Check contrast between text and background. The accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
• Do not rely on color alone to carry meaning, since some people cannot tell certain colors apart.
• Build a palette from one main color, one or two supporting colors and a neutral. Too many colors make a design feel busy.
• Colors can look different on different screens, so test important colors on more than one device.

Frequently asked questions

Which format should I use in CSS?

All three work in modern CSS. HEX is the most compact, RGB is easy to read, and HSL is the most convenient when you want to tweak a shade.

Why does a color look different in print?

Screens mix colored light (RGB), while printers mix inks. Some bright screen colors cannot be reproduced exactly on paper.

Can I pick a color from an image?

This tool does not sample colors from images. Some browsers include an eyedropper inside their picker, so look for a dropper icon in the color picker window.

Is anything stored?

No. Your selections stay in your browser and are not saved or sent anywhere.