Colors on the web can be expressed in several formats — HEX (like #7A1F2B), RGB (red, green, blue values), and HSL (hue, saturation, lightness). Different tools and codebases prefer different formats, so designers and developers often need to convert between them. This tool lets you pick or enter a color and instantly see it in all three formats.

• Type a HEX color code, or use the color picker to choose visually.
• The preview box updates instantly, along with the HEX, RGB, and HSL values.

HEX

A six-digit code (e.g. #7A1F2B) representing red, green, and blue values in hexadecimal. It's the most common format in CSS and design tools due to its compactness.

RGB

Red, Green, and Blue values expressed as numbers from 0-255 each (e.g. rgb(122, 31, 43)). This format is intuitive for programmatically adjusting individual color channels.

HSL

Hue, Saturation, and Lightness (e.g. hsl(351, 60%, 30%)). This format is often easier for humans to reason about — adjusting lightness to make a color darker or lighter is more intuitive than recalculating RGB values.

Designers use this kind of conversion when moving a color between design tools, code editors, and style guides that expect different formats. Developers use it when a design spec provides one format but their codebase or framework expects another.

Which format should I use in my CSS?
All three are valid in modern CSS. HEX is most compact, RGB is useful when you need to reason about individual channels or apply transparency (RGBA), and HSL is often easiest for creating color variations (lighter/darker shades of the same hue).

Is my color data sent anywhere?
No, all conversion happens directly in your browser.