Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL.
Pick, convert, and build palettes from one color
RGB
HSL
CMYK
Shades & tints
Color schemes
Complementary
Analogous
Triadic
Split complementary
Contrast ratio (WCAG)
AA requires 4.5:1 for normal text (3:1 for large text); AAA requires 7:1 (4.5:1 for large text).
How to use it
- 1Pick a color with the swatch, type a HEX/RGB/HSL value directly, or hit "Random" to explore.
- 2HEX, RGB, HSL, and CMYK all stay in sync as you adjust any of them.
- 3Scroll down for shade/tint variations, color harmony suggestions, and AA/AAA contrast ratios.
Supported formats & limits
Supports common formats like JPG, PNG, and WebP. Processing happens in your browser.
Example
The hex code #1d4ed8 is the same color as rgb(29, 78, 216), hsl(224, 76%, 48%), and cmyk(87%, 64%, 0%, 15%) — edit any field and the others update to match, or copy every format at once from the button at the bottom.
How it works
HEX and RGB both describe a color as red, green, and blue intensities — HEX is just RGB written in base 16. HSL describes the same color differently: as a hue angle (0-360°), saturation, and lightness, which is often more intuitive for picking related shades of one color. CMYK converts that same color to print's cyan/magenta/yellow/black model, shown as a reference approximation rather than a print-calibrated value.