🎨

Color Picker

Pick any color and instantly convert between HEX, RGB, HSL, and CMYK formats. Bidirectional sync, color history, and one-click copy.

Converter Tools Runs locally No data sent
color hex rgb hsl cmyk converter
Pick Color
Dark
Nearest: —
Formats
HEX
RGB
HSL
CMYK
Color History
No colors picked yet
#5E6AD2
Color Values
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)

What is Color Picker?

Pick colors visually and convert between HEX, RGB, HSL, and CMYK. Copy any format with one click and fine-tune values directly in the browser.

How to Use Color Picker

  1. Enter a HEX value or use the visual picker to choose a color.
  2. Review the converted RGB, HSL, and CMYK values shown below.
  3. Fine-tune the inputs until the color matches your design or code target.
  4. Copy the format you need with one click.

Quick Guides

Color Format Reference compares HEX, RGB, HSL, and CMYK so you can choose the right format for CSS, design, and print workflows.

Related Tools

🎨
Color Format Converter
Convert colors between HEX, RGB, HSL, OKLCH formats
 🎨
Color Palette Generator
Generate complementary, analogous and triadic color palettes
 ⚖️
WCAG Contrast Checker
Check WCAG AA and AAA color contrast ratios for accessibility
Understand Color Picking ▾
Example
Input #FF5733
Output RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
Common Use Cases
  • Pick exact UI colors for CSS or design tokens
  • Copy HEX, RGB, or HSL values into front-end code
  • Inspect and compare colors during design QA
  • Build small palettes from a single selected color
Frequently Asked Questions
What color formats are supported?

HEX, RGB, RGBA, HSL, HSLA, and CMYK. Click any format field to copy its value.

Can I use the eyedropper to pick colors from my screen?

On browsers that support the EyeDropper API (Chrome 95+), yes. Click the eyedropper icon to pick from anywhere on screen.

What is the difference between HSL and HSB/HSV?

HSL (Hue, Saturation, Lightness) and HSB/HSV (Hue, Saturation, Brightness/Value) are both cylindrical color models but differ in how they define the third axis. In HSL, 50% lightness is the "pure" color. In HSB, 100% brightness means the maximum brightness, which is closer to the color artists think of as vivid. CSS uses HSL; Photoshop and Figma use HSB.

Can I use this to check WCAG color contrast?

This tool shows color values and conversions. For accessibility contrast checking (WCAG AA/AAA ratios) against a background color, use the dedicated Contrast Checker tool.