Color Picker

FREEDeveloper

TOOLColor Picker

#2b6cee

Hue × Saturation

Hue: 220°

Saturation: 85%

Lightness: 55%

Color Values

HEX

RGBrgb(43, 108, 238)

HSLhsl(220, 85%, 55%)

CMYKcmyk(82%, 55%, 0%, 7%)

CSS--color: #2b6cee;

Color Palettes

Complementary

Analogous

Triadic

Split Complementary

100% freeNo signupRuns in your browser

About Color Picker

Every designer and developer needs a reliable color picker that converts between formats instantly. This tool combines a visual HSL color canvas with real-time conversion to HEX, RGB, HSL, and CMYK — plus automatic palette generation for design inspiration.

How It Works

The picker uses the HSL color model internally (Hue 0-360°, Saturation 0-100%, Lightness 0-100%) for intuitive color selection, then converts mathematically to all other formats in real time. Palettes are generated using color theory relationships on the hue wheel.

Who Is This For

A frontend developer needs to convert a designer's HEX color to RGB for a canvas drawing context — types #3b82f6 and gets rgb(59, 130, 246) instantly.

A designer exploring color schemes picks a brand blue, then uses the generated triadic palette to find complementary accent colors.

A developer debugging CSS sees rgb(34, 197, 94) in DevTools and needs the HEX equivalent — the tool converts it instantly.

A print designer converting screen colors to CMYK for a brochure — picks the color and reads the CMYK values directly.

Scope note: CMYK conversion is approximate (uses a standard formula without ICC color profiles). For print-accurate CMYK, verify with professional color management software.

How to Use

Use the color canvas or sliders to pick your desired color visually

Or type a HEX, RGB, or HSL value directly — all other formats update instantly

Click Copy next to any format to copy it to your clipboard

View generated color palettes (complementary, analogous, triadic) below the picker

Click Save Color to store it in your browser history for quick access

Frequently Asked Questions

Type or paste your HEX code (e.g., #3b82f6) in the HEX input field. The RGB values update instantly below it.

The current version works with solid colors. For transparency, add the alpha value manually (e.g., rgba(59, 130, 246, 0.5)).

The tool generates complementary (opposite), analogous (adjacent), triadic (120° apart), and split-complementary palettes from your picked color.

The tool provides a visual canvas and HSL sliders for color selection. In Chrome/Edge, you can use the native color input element for eyedropper functionality.