Color Picker
Pick a color and get its HEX, RGB, HSL and CSS values instantly.
Colour formats explained
Digital colours can be expressed in several formats, each optimised for different contexts. HEX is most common in web design; RGB is used in CSS and design software; HSL makes it easier to reason about colour relationships; HSB (also called HSV) is used in many design tools.
| Format | Example | Best for |
|---|---|---|
| HEX | #4f8aff | CSS stylesheets, design handoff, most common in web |
| RGB | rgb(79, 138, 255) | CSS, screen design; intuitive for mixing light primaries |
| RGBA | rgba(79, 138, 255, 0.8) | CSS with transparency (0=transparent, 1=opaque) |
| HSL | hsl(221, 100%, 65%) | CSS; Hue-Saturation-Lightness, best for colour relationships |
| HSLA | hsla(221, 100%, 65%, 0.8) | CSS HSL with transparency |
| HSB/HSV | hsb(221°, 69%, 100%) | Photoshop, Figma, design tools; intuitive colour adjustment |
| CMYK | C:69 M:46 Y:0 K:0 | Print design; Cyan-Magenta-Yellow-Key (Black) |
| Pantone | PMS 2727 C | Brand colour matching for physical print production |
Accessibility: colour contrast ratios
WCAG 2.1 (Web Content Accessibility Guidelines) specifies minimum contrast ratios between text and background colours to ensure readability for people with visual impairments. Failing contrast requirements can exclude users with low vision and may violate accessibility laws in the EU, UK, and US.
WCAG contrast ratio requirements:
AA (minimum):
Normal text (< 18pt): 4.5:1 ratio
Large text (≥ 18pt): 3.0:1 ratio
UI components: 3.0:1 ratio
AAA (enhanced):
Normal text: 7.0:1 ratio
Large text: 4.5:1 ratio
Examples:
Black (#000) on white (#fff): 21:1 ✓ AAA
#767676 on white: 4.54:1 ✓ AA
#949494 on white: 3.03:1 ✗ fails AA for normal text
Navy (#003366) on white: ~11:1 ✓ AAAColour psychology in design
Frequently asked questions
What is the difference between HEX, RGB and HSL?
They are three ways to describe the same colour. HEX (#4f8aff) is compact and common in CSS, RGB defines red/green/blue channels, and HSL uses hue, saturation and lightness, which is more intuitive for adjusting colours.
What does the alpha value mean?
Alpha controls opacity, from 0 (fully transparent) to 1 (fully opaque). In CSS it appears as the fourth value in rgba() or an extra pair of hex digits.
How do I get an accessible colour contrast?
For readable text, aim for a contrast ratio of at least 4.5:1 between text and background (3:1 for large text), as recommended by the WCAG accessibility guidelines.
Can I convert a colour between formats here?
Yes. Pick or enter a colour and the tool shows its HEX, RGB and HSL values together so you can copy whichever your project needs.