Color Picker

Pick colors and get HEX, RGB, HSL values - perfect for designers and developers

#4f46e5
rgb(79, 70, 229)
hsl(243, 75%, 59%)

About the Color Picker Tool

Pick any colour and get its value in HEX, RGB and HSL formats instantly, ready to copy into your CSS, design file or brand guide.

Each format serves a purpose. HEX (#4F46E5) is the web standard, compact and used everywhere in CSS and design tools. RGB (79, 70, 229) maps to how screens actually emit light and is required when you need transparency via rgba(). HSL (243°, 75%, 59%) describes hue, saturation and lightness — by far the easiest format for creating variations, because you can darken a colour just by lowering the lightness value while keeping it recognisably the same hue.

Designers use this when matching brand colours, building CSS variables, creating hover and active states, checking text contrast for accessibility, or converting a colour from one tool's format to another. Aim for at least a 4.5:1 contrast ratio between text and background to meet accessibility standards.

Frequently Asked Questions

They describe the same colour differently: HEX is compact web notation, RGB maps to screen light output and supports alpha, HSL uses hue/saturation/lightness and is easiest for making lighter or darker variants.
Use HSL and adjust only the lightness value. The hue stays consistent, which keeps the colours visually related — far better than guessing at HEX codes.
At least 4.5:1 for normal text and 3:1 for large text, per WCAG AA guidelines.
Yes — pick or enter a colour and all three formats are shown together, ready to copy.

Related Tools