Colour Picker
Pick a colour, convert it between HEX, RGB and HSL, preview simple shades and copy the values for web or design work.
Pick and convert a colour
How the colour picker works
Choose a colour visually or enter a HEX code. The tool converts the same colour into RGB and HSL formats, then gives a simple contrast comparison against black and white text.
HEX #2563eb
RGB = red 37, green 99, blue 235
HSL = hue 221°, saturation 83%, lightness 53%HEX is common in CSS and web design. RGB is useful when you want the red, green and blue channel values. HSL can be easier when adjusting hue, saturation or lightness.
HEX, RGB and HSL explained
| Format | What it shows | Example |
|---|---|---|
| HEX | A compact web colour code using red, green and blue values in hexadecimal. | #2563eb |
| RGB | Red, green and blue channel values from 0 to 255. | rgb(37, 99, 235) |
| HSL | Hue, saturation and lightness, often easier for colour adjustments. | hsl(221, 83%, 53%) |
Colour contrast tips
Colour contrast matters for readability. A colour may look attractive but still be difficult to read when used with small text, thin fonts or low-quality screens.
- Use strong contrast for text: dark text on light backgrounds or light text on dark backgrounds is usually safest.
- Test buttons separately: button text needs enough contrast against the button background.
- Be careful with QR codes: use dark foreground colours on light backgrounds for more reliable scanning.
- Check real devices: colours can look different across monitors and phones.
Common uses for the colour picker
This tool is useful for choosing colours for websites, forms, design mockups, simple brand palettes, QR codes and small UI components.
Creating a QR code?
Use this page to pick the colours, then use the QR Code Generator to create the actual code.
Colour picker FAQs
What is a HEX colour?
A HEX colour is a six-digit web colour code that represents red, green and blue values. For example, #2563eb is a blue colour.
Can I convert HEX to RGB?
Yes. Enter or pick a HEX colour and the RGB value updates instantly.
Can I use these colours in CSS?
Yes. You can copy the HEX, RGB or HSL value and paste it into CSS, design tools or website builders.
Does this guarantee accessible contrast?
No. The contrast note is a simple guide. For important accessibility work, test your final design against current accessibility standards.