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.
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.
Related Tools
Image Compressor
Compress JPG, PNG, WebP images online free. Reduce file size up to 80% without losing quality.
Image Resizer
Resize images to custom dimensions or social media presets online free.
Color Palette Generator
Generate color palettes from a color, image, or random. Export as CSS, Tailwind, or PNG.