TechCompare LogoTechCompare
Back

Color Picker

Pick colors and convert between formats.

239°

How to use this tool

  1. Pick a color

    Drag the spectrum gradient to find a hue, or type a hex value (like #4F46E5), an RGB triplet (79, 70, 229), or HSL values (245, 76%, 59%) into any input field. All other fields update instantly to match.

  2. Read the values in every format

    The picker shows HEX, RGB, HSL, HSV, and CMYK simultaneously so you can copy the format your target tool expects. Each field updates live as you drag the gradient or adjust a single channel.

  3. Copy any field to clipboard

    Click the copy button next to any format. The value is copied in a form ready to paste into CSS, Tailwind, Figma, a config file, or print specs without further editing.

  4. Adjust hue, saturation, or lightness directly

    For fine-grained edits, type new hue (0-360°), saturation (0-100%), or lightness (0-100%) values into the HSL inputs. The color updates in every other format as you type, so you can dial in a precise perceptual adjustment.

About this tool

The Color Picker lets you pick or paste any color 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 color by adjusting saturation in HSL, all five representations stay synchronized as you edit.

Use it when you need to match a color 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 color 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 colors between Figma, CSS, Tailwind arbitrary values, Photoshop, and print specs. Pair it with the Contrast Checker to verify your text color combinations meet WCAG AA or AAA, which the Color Picker alone doesn't enforce.

Popular color scenarios

Practical guides for the color formats and conversions developers and designers use most.

Hex to RGB
The web developer's color format explained
View details ➜
RGB vs CMYK
Why screen colors look different in print
View details ➜
HSL color model
The intuitive format for design systems
View details ➜

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 color into hue, saturation, and a brightness component, but differently. HSL's L (lightness) is 50% for pure colors and 100% only for white. HSV's V (value) is 100% for any pure color 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 color gamut. CMYK is subtractive (ink-based, for print) and cannot represent many bright RGB colors. The CMYK output is a straightforward mathematical conversion. A real print workflow adds color 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 color from an image?
This tool doesn't include an eyedropper yet. For that, use your browser's built-in dev tools color 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 color space?
sRGB is the standard color space assumed for most web content and non-HDR monitors. It defines exactly which real-world color each RGB triplet represents. Colors on one sRGB display should look identical on another, while wide-gamut (P3, Adobe RGB) displays show more colors but can oversaturate sRGB content unless the app is color-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 Visualizer

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

Use tool ➜