TechCompare LogoTechCompare
← Back to Home

Color Picker

Pick colors and convert between formats.

239°

About this tool

The Color Picker lets you pick or paste any colour and see it in every common format at once, including HEX, RGB, HSL, HSV, and CMYK, with instant copy-to-clipboard on every field. Whether you're translating a designer's hex code into an HSL value for a CSS utility, prepping print artwork in CMYK, or tweaking a brand colour by adjusting saturation in HSL, all five representations stay synchronised as you edit.

Use it when you need to match a colour across disciplines (a hex from Figma, an RGB triplet for a config file, a CMYK value for a print shop), or when you're building a colour palette and want fine-grained control over perceptual brightness via HSL. The picker includes a full spectrum gradient for visual selection plus numerical inputs for every channel, so designers and developers both get the workflow they prefer.

Supported formats

HEX (#RRGGBB), RGB (0-255 per channel), HSL (hue 0-360°, saturation and lightness 0-100%), HSV (same hue, saturation/value 0-100%), and CMYK (cyan, magenta, yellow, key black 0-100%). Conversions are standard sRGB; no ICC profile is applied.

When to use it

Perfect for translating colours between Figma, CSS, Tailwind arbitrary values, Photoshop, and print specs. Pair it with the Contrast Checker to verify your text colour combinations meet WCAG AA or AAA, which the Color Picker alone doesn't enforce.

Frequently asked questions

How do I convert HEX to RGB?
Paste a hex value like #4F46E5 into the HEX field and the RGB equivalent (79, 70, 229) appears instantly. Each hex pair maps to one 0-255 channel: 4F = 79, 46 = 70, E5 = 229.
What's the difference between HSL and HSV?
Both split colour into hue, saturation, and a brightness component, but differently. HSL's L (lightness) is 50% for pure colours and 100% only for white. HSV's V (value) is 100% for any pure colour and 0% only for black. HSL is friendlier for picking palettes; HSV is more common in image-editing software.
Why does CMYK look different from RGB on my screen?
RGB is additive (light-based, for screens) and has a larger colour gamut. CMYK is subtractive (ink-based, for print) and can't represent many bright RGB colours. The CMYK output is a straightforward mathematical conversion, and a real print workflow adds colour profiles (like sRGB → Fogra) for accurate proofs.
What is the difference between #RGB and #RRGGBB?
#RGB is shorthand: each single digit is doubled, so #F0A becomes #FF00AA. Use shorthand only when all three channels happen to repeat a hex digit, otherwise you lose precision. The Color Picker always outputs the full 6-digit form.
Can I pick a colour from an image?
This tool doesn't include an eyedropper yet. For that, use your browser's built-in dev tools colour picker or a desktop tool like Photoshop. Once you have the hex value, paste it here to convert to every other format.
What is the sRGB colour space?
sRGB is the standard colour space assumed for most web content and non-HDR monitors. It defines exactly which real-world colour each RGB triplet represents. Colours on one sRGB display should look identical on another, while wide-gamut (P3, Adobe RGB) displays show more colours but can oversaturate sRGB content unless the app is colour-managed.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool ➜

Text Encoding Converter

Convert between Text, Base64, Binary, Hexadecimal, and Decimal formats.

Use tool ➜

PPI & Retina Calculator

Calculate PPI and Retina distance for your display.

Use tool ➜

Screen Size Comparison

Compare screen sizes side-by-side to visualize physical dimension differences.

Use tool ➜