Color Picker
Pick colors and convert between HEX, RGB, and HSL
About Color Picker
Color Picker is a free online tool that lets you select any colour from a visual spectrum and instantly converts it between all major colour formats — HEX, RGB, RGBA, HSL, HSLA, and CMYK. Click on the colour wheel, enter a known value in any format, or sample a colour from an image to get the full set of colour codes for use in web design, graphic design, and print.
Colour codes are the language of digital design. Web designers work primarily in HEX (hexadecimal notation) and RGB. HEX codes like #3B82F6 are compact and universally used in HTML and CSS. RGB (Red, Green, Blue) values like rgb(59, 130, 246) are used in CSS and image processing. HSL (Hue, Saturation, Lightness) is the most intuitive format for humans — adjusting hue changes the colour family, saturation changes vibrancy, and lightness changes brightness. CMYK (Cyan, Magenta, Yellow, Key/Black) is the print colour model used by printers and design tools like Adobe Illustrator.
Understanding colour spaces helps you make better design decisions. RGB is additive — mixing all three channels at full intensity produces white (light adds). CMYK is subtractive — mixing all four at full produces black (ink subtracts). Converting between them is non-trivial because the RGB colour gamut (the range of colours it can represent) is wider than the CMYK gamut — some vivid digital colours cannot be accurately reproduced in print. The colour picker shows both values so you can assess this gap.
HSL is particularly useful for creating consistent colour variations within a design. Keeping hue and saturation constant while varying lightness creates a monochromatic colour scheme. Rotating the hue by 30° produces analogous colours. Rotating by 180° produces the complementary colour. These relationships are intuitive in HSL but opaque in HEX or RGB.
How to Use Color Picker
- 1Click anywhere on the colour spectrum to pick a colour
- 2Or enter a known HEX, RGB, or HSL value in the input field
- 3View the equivalent colour codes in all formats instantly
- 4Copy any format (HEX, RGB, HSL) with one click
Frequently Asked Questions
A HEX colour code is a 6-character hexadecimal string representing the red, green, and blue components of a colour. #FF0000 is pure red (FF=255 red, 00=0 green, 00=0 blue). The # prefix is used in CSS. Short 3-character codes like #F00 are shorthand for #FF0000.
RGB defines a colour using red, green, and blue channel values (0–255). RGBA adds an Alpha channel (0–1) for transparency — rgba(59, 130, 246, 0.5) is 50% transparent. Use RGBA in CSS when you need semi-transparent colours.
HSL is more intuitive for programmatically creating colour variations — tints, shades, and related colours. In CSS, hsl(220, 90%, 56%) is easier to adjust than #3B82F6. Many design systems define colours in HSL for this reason.
RGB is a wider colour gamut than CMYK. Some highly saturated digital colours (especially vivid blues, greens, and oranges) cannot be reproduced in print. The CMYK values in the picker give you the closest printable approximation.
You might also like
Try next