Colour Picker & Converter
Pick a colour and convert between HEX, RGB, and HSL formats instantly.
–
Copied!
–
Copied!
Results are for general guidance only — not professional advice. Learn more.
How to use this tool
Use the colour picker or type a HEX code directly to inspect a colour. All values update instantly.
- Pick: Click the colour swatch to open your browser's native colour picker.
- HEX input: Type a 6-digit HEX code (e.g. #E11D3D) to jump to a specific colour.
- Copy: Use the Copy buttons to copy any format (HEX, RGB, HSL) to your clipboard.
- Contrast: The contrast section shows WCAG accessibility ratings against white and black backgrounds, so you can check if your colour is usable for text.
Thanks for helping us improve this tool. 🙏
Frequently asked questions
What is the difference between HEX, RGB, and HSL colour formats?
HEX is a six-character hexadecimal string (e.g. #E11D3D) used widely in web design. RGB (Red, Green, Blue) expresses a colour as three values from 0–255. HSL (Hue, Saturation, Lightness) uses a 0–360° hue wheel plus percentages for saturation and lightness, making it more intuitive for adjusting colours. All three represent the same colour space.
What is colour contrast ratio and why does it matter?
Contrast ratio measures the difference in luminance between two colours, expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). WCAG 2.1 accessibility guidelines require a minimum ratio of 4.5:1 for normal text and 3:1 for large text (AA level). A ratio of 7:1 or above meets the stricter AAA level.
What is HSL and why is it useful?
HSL stands for Hue, Saturation, Lightness. Hue is the colour position on a 0–360° colour wheel, saturation controls intensity (0% is grey, 100% is vivid), and lightness controls brightness (0% is black, 100% is white). HSL is more intuitive than RGB for designers because you can easily adjust brightness or saturation independently without changing the hue.
What does the alpha channel in RGBA mean?
The alpha channel controls opacity. In RGBA, alpha ranges from 0 (fully transparent) to 1 (fully opaque). In HSLA it works the same way. An alpha of 0.5 means 50% transparent. This is useful for overlays, shadows, and layered UI elements.