TechCompare LogoTechCompare
Back

Color Picker

Pick colors and convert between formats.

Saturation & Lightness

239°

HEX

RGB

HSL

CMYK

HSV

How to use this tool

  1. Pick a color

    Drag the saturation and lightness gradient to adjust those values, then use the Hue slider to choose a hue. You can also type a hex value (like #4F46E5), an RGB triplet (79, 70, 229), or HSL values (243, 75%, 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 adjustment.

About this tool

The Color Picker lets you pick or paste a color and shows it in HEX, RGB, HSL, HSV, and CMYK at once, with a copy button on every field. All five stay in sync as you edit, whether you're turning a designer's hex code into an HSL value for CSS, prepping print artwork in CMYK, or tweaking a brand color's saturation.

Use it to match a color across tools (a hex from Figma, an RGB triplet for a config file, a CMYK value for a print shop) or to build a palette with fine control over lightness in HSL. A full spectrum gradient handles visual selection, and numeric inputs cover every channel.

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

Use it to translate 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

Guides to the color formats and conversions behind web and print work.

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
How hue, saturation, and lightness work in 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 and 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 means. 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

Use this tool on your own site

Drop the Color Picker into your blog, docs, or CMS with one iframe snippet. Free, no signup. See all embeddable tools