Color Picker

Pick any color with a visual gradient canvas, hue slider, and alpha control. Get values in HEX, RGB, HSL, and CMYK instantly. Free, runs in your browser.

100%

Reference

What is a color picker?

A color picker is a visual tool that lets you select any color from a gradient canvas and retrieve its precise numeric representation. Colors can be expressed in multiple color models: HEX (web standard, e.g., #B7522A), RGB (red/green/blue, used in screens), HSL (hue/saturation/lightness, intuitive for design), and CMYK (cyan/magenta/yellow/key, used in print). Converting between models is essential for ensuring consistent colors across digital screens and printed materials.

Color formats

HEX — A six-character hexadecimal notation (#RRGGBB) widely used in CSS and web design. An optional alpha channel adds two more digits (#RRGGBBAA).

RGB — Three channels (Red, Green, Blue) each ranging 0–255. The standard for digital screens and CSS: rgb(183, 82, 42).

HSL — Hue (0°–360°), Saturation (0%–100%), Lightness (0%–100%). More intuitive for creating color palettes because you can adjust brightness and vividness independently.

CMYK — Cyan, Magenta, Yellow, Key (black), each 0%–100%. The subtractive color model used by printers. Converting from RGB to CMYK is approximate since the gamuts differ.

Common use cases

  • Web design — pick exact HEX or RGB values for CSS properties like color, background, and border.
  • Branding — extract precise color values from a design mockup to ensure consistency across all materials.
  • Print preparation — convert screen colors to CMYK values for accurate print reproduction.
  • Accessibility — check color contrast ratios by picking foreground and background colors.
  • UI prototyping — quickly experiment with color variations using HSL adjustments.

Privacy

All processing runs 100% in your browser. No images are uploaded to any server.

← Back to all tools