About the Color Picker
The Color Picker lets you choose a colour visually and gives you the matching HEX and RGB codes to copy. Designers, bloggers and developers use these codes in CSS, design tools and brand guides.
A HEX code like #1F9D55 is a six-digit value for the red, green and blue parts of the colour. The RGB form rgb(31, 157, 85) shows the same three numbers from 0 to 255.
How to use it
- Click the colour box under Choose color and select a shade.
- Read the HEX and RGB values shown below.
- Press Copy HEX or Copy RGB.
Using colour codes
In CSS: color:#1F9D55; or background:rgb(31,157,85);.
Check contrast between text and background; dark text on a light background is easier to read.
Save the codes of your brand colours so your pages stay consistent.
Real-world examples
Matching a brand colour. Pick a shade and copy the HEX for your CSS.
Design hand-off. Give a developer the exact RGB value instead of 'a nice green'.
Accessible text. Check candidate colours, then test contrast against your background with a contrast checker.
Common mistakes
Judging colours on a dim or tinted screen. Using pure black text on pure white can feel harsh; very dark grey is often easier to read. Light grey text on white looks elegant but often fails accessibility contrast (aim for at least 4.5:1 for body text).
How it works
The browser's built-in colour input returns a six-digit HEX string. The tool splits it into pairs, converts each pair from base 16 to a number from 0 to 255, and shows them as the red, green and blue values of an RGB colour.
Frequently asked questions
What is the difference between HEX and RGB?
They describe the same colour in two notations.
Can I enter a code?
The picker is visual; paste your code into your CSS directly.
Does it use my camera?
No.