Convert between HEX, RGB and HSL color formats instantly. Click the swatch to use the browser color picker, or type any format below.
Web developers and designers work with three primary color formats on the web: HEX, RGB, and HSL. Each has different strengths and is preferred in different contexts. This tool converts between all three instantly as you type.
HEX codes like #2563eb represent each color channel (red, green, blue) as a two-digit hexadecimal number from 00 to FF. They are compact, widely supported, and the most common format in CSS and design tools like Figma, Photoshop, and Sketch. The # prefix is a CSS convention.
rgb(37, 99, 235) expresses each channel as a decimal number from 0 to 255. RGB is intuitive for programmers because it maps directly to how displays mix light. It's also used for RGBA where the fourth value (alpha) controls transparency, e.g. rgba(37, 99, 235, 0.5).
hsl(221, 83%, 53%) is often the most human-friendly format. Hue is a degree on the color wheel (0° = red, 120° = green, 240° = blue). Saturation is the intensity from grey to vivid (0–100%). Lightness goes from black to white (0–100%). HSL is especially useful when building color palettes or when you want to programmatically lighten or darken a color.
All three are valid in modern CSS. Use HEX for static values copied from design tools. Use RGB or RGBA when you need transparency or want to manipulate values dynamically in JavaScript. Use HSL when building themeable systems or when you want human-readable color logic — it's easy to reason that "hsl(221, 83%, 80%)" is a lighter version of "hsl(221, 83%, 53%)".