Pro Color Picker
Sample colors using the manual scale or upload an image to extract precise brand codes.
Color Scale
Select a base hue from the system picker.
Image Eyedropper
Click here to upload an image and click anywhere on it to sample colors.
HEX Notation
Hex codes are a 6-digit representation of Red, Green, and Blue. They are the industry standard for web design and CSS properties.
Why HSL?
HSL (Hue, Saturation, Lightness) is more human-readable than RGB. It allows you to create variations like hover states by changing just the lightness value.
Additive Color
RGB is an additive model used for screens. It defines how much light each pixel emits. Combined at 255, they create pure white.
Working with colour formats and palettes
Pick a colour from the wheel or lift one directly from an uploaded image with the eyedropper, then read it in whichever notation your project needs. The three common formats describe the same colours in different ways, and each is convenient for different work.
HEX, RGB and HSL
HEX is the compact six-digit form used throughout CSS and design tools. It is really just RGB written in hexadecimal, two digits each for red, green and blue.
RGB expresses the same three channels as numbers from 0 to 255, and extends to RGBA with an alpha channel for transparency. It is the most direct format when generating colours in code.
HSL describes hue, saturation and lightness. This is the format to reach for when building a palette, because you can hold hue constant and vary lightness to produce a coherent set of tints and shades — something that requires guesswork in HEX.
Contrast and accessibility
Colour choices carry an accessibility obligation. The WCAG guidelines call for a contrast ratio of at least 4.5 to 1 between body text and its background, and 3 to 1 for large text above roughly 24 pixels.
Low contrast is the most common accessibility failure on the web, and it affects far more people than is generally assumed: anyone with reduced vision, anyone on a phone in sunlight, anyone using a dimmed screen. Checking a ratio takes seconds and the fix is usually a small lightness adjustment.
Never rely on colour alone to convey meaning. Around one in twelve men has some form of colour vision deficiency, so pair colour coding with a label, icon or pattern.
Build palettes in HSL
Fix the hue and vary lightness to generate tints and shades that look deliberately related.
Test in greyscale
Converting a design to greyscale instantly reveals where you have relied on hue alone to carry meaning.
Limit your palette
Two or three core colours plus neutrals reads as more considered than a dozen competing hues.
Frequently asked questions
What is the difference between HEX and RGB?
None in terms of the colours they can express. HEX is hexadecimal notation for the same three channels RGB writes as decimal numbers.
How do I add transparency?
Use RGBA or HSLA and supply an alpha value between 0 and 1. CSS also accepts eight-digit HEX where the last two digits set alpha.
What contrast ratio do I need?
WCAG AA requires 4.5 to 1 for normal text and 3 to 1 for large text. AAA raises those to 7 to 1 and 4.5 to 1.
Are uploaded images kept?
Images used for the eyedropper are removed from the server automatically a few seconds after upload.