Color Picker & Converter

Pick, convert, and extract colors from images. Interactive color wheel and in‑depth color model explanations.

Click on the wheel to pick a color (saturation and hue).

Click or drag an image to upload

Supported: JPG, PNG, GIF (max 5MB)

Image preview
Click on image to pick color
Color Harmonies
Complement
Analogous 1
Analogous 2
Triadic 1
Triadic 2
Monochrome
Red Green Blue Yellow Magenta Cyan Black White GetZenQuery Purple

Understanding Color Models – In Depth

Color models are mathematical systems that represent colors as tuples of numbers. Each model is optimized for different applications (screens, printing, human perception).

1. RGB (Red, Green, Blue)

Additive color model – light is added to create colors. Used in monitors, cameras, and digital devices. Each channel ranges 0–255 (8‑bit) or 0–1. Full combination gives white (255,255,255).

2. HEX (Hexadecimal)

Compact representation of RGB for web: #RRGGBB. Each pair corresponds to decimal 0–255 (00‑FF). Shorthand #RGB expands to #RRGGBB (e.g., #F00 = #FF0000).

3. HSL (Hue, Saturation, Lightness)

Intuitive for humans: Hue (0–360° color wheel), Saturation (0–100% intensity), Lightness (0–100% brightness). Lightness = 50% gives pure hue; 0% black, 100% white. Ideal for creating shades/tints.

4. HSV (Hue, Saturation, Value)

Also called HSB (Brightness). Value represents the maximum intensity of the color. Value = 100% gives full brightness, while Saturation reduces toward white. Often used in color pickers because it separates color from brightness.

5. CMYK (Cyan, Magenta, Yellow, Key/Black)

Subtractive color model used in printing. Colors are subtracted from white light. Conversion from RGB is non‑linear and depends on color profiles.

6. LAB (CIELAB)

Designed to be perceptually uniform – a change of the same amount in a value should produce a change of about the same visual importance. Used in color management.

Comparison of HSL and HSV

Model Lightness / Value Typical Use
HSL Lightness = average of max and min RGB (midpoint between black and white). Pure colors at L=50%. CSS, design systems, UI palettes
HSV Value = maximum RGB component. Pure colors at V=100%. Legacy color pickers, computer vision

Color Gamut and Perception

Different devices display different ranges of colors (gamut). sRGB is the standard for web, while Adobe RGB and ProPhoto RGB are wider. LAB covers all visible colors.

How to Use This Picker

1
Click the large color preview to open your system's color picker.
2
Edit any HEX, RGB, HSL, or HSV field – all others update in real time.
3
Use example buttons to quickly test named colors.
4
Explore harmonies below the picker for complementary, analogous, and triadic schemes.

Frequently Asked Questions

RGB is for screens, HEX for web code, HSL/HSV are more intuitive for humans (hue, then adjust). Designers often prefer HSL to create shades/tints.

HSL uses Lightness (midpoint between black and white), while HSV uses Value (maximum intensity). HSV often feels more natural for picking saturated colors.

Absolutely! Copy the HEX or RGB values directly into your CSS. The harmonies help you build color schemes.

216 colors that display consistently on older 8‑bit screens. They use hex pairs like 00, 33, 66, 99, CC, FF. Modern monitors support millions of colors, but web‑safe is still used for retro style.