Color Picker (HEX ↔ RGB)

Convert Between HEX, RGB, HSL, and CMYK

Designers and developers need to switch between color formats constantly — HEX for CSS, RGB for raster image tools, HSL for adjusting hue and saturation programmatically, and CMYK for print. This tool converts between all four in one place.

Each Format Explained

• HEX — a compact 6-digit hexadecimal notation (#RRGGBB) commonly used in CSS. Each pair is 0–255 for red, green, and blue respectively.
• RGB — additive color model with three 0–255 channels. Used on screens.
• HSL — Hue (0–360°), Saturation (0–100%), Lightness (0–100%). Intuitive for tweaking.
• CMYK — Cyan, Magenta, Yellow, Key (black), each 0–100%. Subtractive — used for print.

Picking Accessible Colors

For accessible text, aim for a contrast ratio of at least 4.5:1 between text and background (3:1 for large text) per the WCAG guidelines. Tools like the WebAIM contrast checker let you verify that the HEX you pick passes.

Tips

• Adjust hue (H) to change the color family; adjust saturation (S) to wash it out; adjust lightness (L) to make it brighter or darker.
• When building a palette, pick one main color and vary its lightness to get a consistent, on-brand range.
• Always test print colors with your print provider — CMYK output depends on the paper and process.