HEX ↔ RGB ↔ HSL Converter

What is the difference between HEX, RGB, and HSL?

HEX (#ff5733) is a 6-digit hexadecimal shorthand used in HTML and CSS. RGB (255, 87, 51) specifies red, green, blue channels as 0-255 values. HSL (9°, 100%, 60%) uses hue (color wheel angle), saturation (color intensity), and lightness. All three describe the same colors — just in different coordinate systems.

When should I use HSL instead of RGB or HEX?

HSL is more intuitive for design work. To lighten a color, increase lightness. To desaturate, lower saturation. To shift the hue, rotate the angle. This makes HSL ideal for programmatically generating color palettes, theming, and design systems. HEX and RGB are more common in raw CSS values and image data pipelines.

What does the hue value in HSL represent?

Hue is the angle on the color wheel from 0° to 360°. 0° = red, 60° = yellow, 120° = green, 180° = cyan, 240° = blue, 300° = magenta, 360° = red again. It represents the base color without regard to saturation or lightness.

How do I use color values in CSS?

All three formats work in CSS: color: #ff5733; or color: rgb(255, 87, 51); or color: hsl(9deg, 100%, 60%); Modern CSS also supports oklch() and lab() for perceptually uniform colors. HEX is most common for static values; HSL is great for CSS variables and dynamic theming.

What is the formula to convert HEX to RGB?

Split the 6-character HEX into three 2-character pairs and parse each from hex to decimal. For #FF5733: R = parseInt('FF', 16) = 255, G = parseInt('57', 16) = 87, B = parseInt('33', 16) = 51. 3-digit HEX like #f53 expands to #ff5533 by doubling each digit first.

How do I convert RGB to HSL?

Normalize RGB to 0-1 range. Find max and min channel. Lightness = (max+min)/2. Saturation = (max-min)/(1-|2L-1|). Hue depends on the max channel: if Red is max, H = (G-B)/(max-min) × 60; if Green, H = ((B-R)/(max-min) + 2) × 60; if Blue, H = ((R-G)/(max-min) + 4) × 60. If H < 0, add 360.