Color Picker – HEX, RGB, HSL Converter Online

Color Formats Explained

Web colors can be expressed in several equivalent formats. Each serves a slightly different purpose depending on the context:

HEX (#rrggbb)

The most widely used format on the web. A six-character string prefixed with #. Each pair of characters represents red, green, and blue in hexadecimal (base 16). Shorthand is available when both digits in a pair match — #3b82f6 cannot be shortened, but #ffffff becomes #fff.

RGB (red, green, blue)

Expresses each channel as an integer from 0–255. CSS also supports rgba() with a fourth alpha parameter from 0 (fully transparent) to 1 (fully opaque), making it the go-to format when you need semi-transparent overlays.

HSL (hue, saturation, lightness)

Describes color in terms more natural to human perception. Hue is the pure color angle (0° = red, 120° = green, 240° = blue), saturation is how vivid it is (0% = grey), and lightness ranges from black (0%) to white (100%). HSL makes it trivial to generate harmonious palettes by rotating the hue.

CMYK (cyan, magenta, yellow, key/black)

The standard for print. Digital displays use additive RGB (mixing light), while printers use subtractive CMYK (mixing ink). A color that looks vibrant on screen may appear duller in print due to the smaller CMYK gamut — always proof-check critical brand colors before printing.

When to Use Each Format

Format	Best for
HEX	CSS, HTML, design tools — quick and compact
RGB / RGBA	CSS when transparency is needed
HSL / HSLA	Programmatic color generation and theming
CMYK	Print design and pre-press workflows

Frequently Asked Questions

How do I convert HEX to RGB? +

A HEX color like #3b82f6 breaks into three two-digit pairs: 3b (red), 82 (green), f6 (blue). Convert each pair from hexadecimal to decimal: 3b = 59, 82 = 130, f6 = 246. So #3b82f6 = rgb(59, 130, 246). This tool does the conversion automatically.

What is HSL color format? +

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360), Saturation is the intensity (0–100%), and Lightness is how light or dark the color is (0% = black, 100% = white, 50% = pure color). HSL is often more intuitive than RGB for creating color variations.

Which color format should I use in CSS? +

All formats work in CSS. Use HEX for simple colors (most common). Use RGB/RGBA when you need transparency (rgba(0,0,0,0.5)). Use HSL when you're programmatically generating color variations — it's easy to adjust hue, saturation, or lightness independently.