Color Picker – HEX, RGB, HSL Color Converter Online
Color Picker & Converter is a free online tool that lets you pick any colour and instantly see its HEX, RGB, HSL, and CMYK values — all kept in sync. Generate tints, shades, and complementary colours, check WCAG contrast ratios, and copy any format to your clipboard. No data is sent anywhere; everything runs in your browser.
How to Use the Color Picker Online
- 01
Pick a colour
Click the native colour picker to open your OS colour dialog, or type directly into the HEX, RGB, or HSL fields. All values stay in sync.
- 02
Explore the palette
View tints, shades, and the complementary colour. Click any swatch to switch to it. Recent colours are saved in your browser.
- 03
Copy and check contrast
Copy any format to the clipboard with one click. Enter a second colour in the contrast checker to see WCAG AA and AAA pass/fail results.
Features
- ✓HEX, RGB, HSL, CMYK — all kept in sync
- ✓Native OS colour picker
- ✓CSS variable preview and copy
- ✓5 tints and 5 shades palette
- ✓Complementary colour display
- ✓WCAG AA and AAA contrast checker
- ✓Last 10 recent colours (localStorage)
- ✓No login, no data sent to server
Frequently Asked Questions
What color formats does this tool support?
The tool supports HEX (e.g. #3b82f6), RGB (rgb(59, 130, 246)), HSL (hsl(217, 91%, 60%)), and CMYK (cmyk(76%, 47%, 0%, 4%)). You can input values in any format and they all stay in sync. There is also a CSS variable preview (--color-primary: #hex).
What is the difference between HSL and RGB?
RGB (Red, Green, Blue) defines colours by mixing light intensities on a 0–255 scale. HSL (Hue, Saturation, Lightness) is more intuitive for design: Hue is the angle on the colour wheel (0–360°), Saturation is the intensity (0–100%), and Lightness is how bright or dark the colour is (0–100%). HSL makes it easy to create tints and shades by adjusting only the Lightness.
How is the WCAG contrast ratio calculated?
The contrast ratio uses the formula from WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminance values of the two colours. WCAG AA requires a minimum of 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text.
How are the tints and shades generated?
Tints are created by blending the selected colour towards white (increasing each RGB channel towards 255). Shades are created by blending towards black (multiplying each channel towards 0). Five tints and five shades are shown. Clicking any swatch sets it as the active colour.
What is the complementary colour?
The complementary colour sits directly opposite the selected colour on the HSL colour wheel — 180° away. Complementary pairs produce maximum contrast and are commonly used in design to create visual interest. The tool displays the complementary colour and its HEX code.