Colorpick - Color Code Tool

How to use Colorpick

1. Choose a colour. On the HSV Color Picker tab, drag the circle across the colour area and use the hue and opacity bars below it, or type a HEX code into the input field. Scroll down for the Material palette if you prefer preset shades.
2. Fine-tune with sliders. The Live Update tab has separate sliders for hue, saturation, brightness and alpha (transparency), with the preview updating as you move them.
3. Read the codes. The Selected Color panel at the top shows the colour as RGB, HEX, RGBA and HSV at all times.
4. Copy a value. Tap any code in the panel, or use the Copy RGB and Copy HEX buttons, to copy it to your clipboard. A message confirms what was copied.
5. Save favourites. Tap the heart icon in the top bar to add the current colour to Favorites. Open the Favorites tab to reuse a saved colour or a recent one, and tap × to remove a favourite.

Features

• HSV colour area with hue and opacity controls
• HEX input field for entering an exact code
• Material Design colour palette
• Hue, saturation, brightness and alpha sliders
• RGB, RGBA, HEX and HSV codes shown together
• One-tap copy to the clipboard
• Favourite colours
• Recent colours (last 10)
• Saved in your browser; no account

A practical guide to colour codes

RGB and HEX are the same colour, written differently

Screens mix red, green and blue light. RGB writes each channel as a number from 0 to 255, so rgb(33, 150, 243) is a medium blue. HEX writes exactly the same three numbers in base 16: 21, 96 and F3, giving #2196F3. HEX is the most common format in CSS and design tools; RGB is easier to read and to adjust by hand.

Alpha means transparency

RGBA adds a fourth value, alpha, for opacity: 1.0 (or 255) is fully solid and 0 is invisible. In CSS you can write rgba(33, 150, 243, 0.5) for a half-transparent blue, or use an eight-digit HEX code where the last two digits are the alpha. Semi-transparent colours look different depending on what is behind them, so always check them against the real background.

Why HSV is easier for choosing

HSV describes colour the way people tend to think about it. Hue is the position on the colour wheel in degrees (0 red, 120 green, 240 blue), saturation is how intense the colour is, and value or brightness is how light or dark it is. To make a lighter or more muted version of a brand colour, keep the hue and change saturation or brightness rather than guessing new RGB numbers.

Building a palette this way, with a few colours that share a hue but differ in brightness, gives designs a consistent look.

Contrast and accessibility

Text needs enough contrast with its background to be readable. The Web Content Accessibility Guidelines recommend a contrast ratio of at least 4.5:1 for normal body text and 3:1 for large text. Very light grey text on white or saturated red on blue often fails. Check important combinations with a contrast checker, and don't rely on colour alone to convey meaning, since many people have some form of colour vision deficiency.

Frequently asked questions

Limitations of the web version

• No eyedropper for photos or the screen
• Recent colours keep only the last 10
• Favourites stay in one browser and don't sync

Phone app

Colorpick is also available as an app for phones and tablets:

App Store (iPhone, iPad) Google Play (Android)