Color Picker

What is a Color Picker?

A color picker lets you select any color and instantly see its value in every major color format. This tool converts between HEX, RGB, HSL, HSV, and CMYK, shows a WCAG contrast ratio checker, and generates shades and tints of your selected color.

Color Formats Explained

• HEX — Hexadecimal notation used in HTML and CSS. Format: #RRGGBB where each pair is a value from 00–FF (0–255 in decimal). Example: #3B82F6.
• RGB — Red, Green, Blue. Each channel ranges from 0–255. Used in CSS as rgb(r, g, b). The additive color model used by screens.
• HSL — Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360). Saturation and lightness are percentages. More intuitive for designers than RGB.
• HSV — Hue, Saturation, Value (also called HSB — Brightness). Similar to HSL but Value represents the maximum brightness rather than the midpoint. Used in many design tools like Photoshop.
• CMYK — Cyan, Magenta, Yellow, Black. The subtractive color model used in printing. Screen colors converted to CMYK are approximations since CMYK has a smaller color gamut.

WCAG Contrast Ratio

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for readable text. A ratio of 4.5:1 or higher passes AA level for normal text. A ratio of 3:1 passes for large text (18pt+). A ratio below 3:1 fails and makes text hard to read for users with low vision.

This tool shows the contrast of your selected color against both white and black backgrounds, with a pass/fail indicator for the AA standard.

Frequently Asked Questions

What is the difference between HSL and HSV?

Both use hue and saturation, but the third component differs. In HSL, a lightness of 100% always gives white regardless of hue. In HSV, a value of 100% gives the pure hue color, not white — you need to reduce saturation for lighter colors. Photoshop and most design tools use HSV/HSB, while CSS uses HSL.

Why does CMYK look different from my screen color?

Screens use additive RGB color (light) while printers use subtractive CMYK color (ink). The CMYK gamut is smaller — some vivid screen colors (especially saturated blues and greens) cannot be accurately reproduced in print. The CMYK values shown here are mathematical conversions; always proof with your printer for critical color work.

What are shades and tints?

A tint is a color mixed with white (lighter). A shade is a color mixed with black (darker). The swatch row shows a gradient from tint to shade — click any swatch to select it as your active color and copy its HEX value.