HEX, RGB, and HSL Explained

HEX, RGB, and HSL are three ways of writing the same colors. They are interchangeable, but each is convenient in different situations. Knowing what each one describes makes it easier to read, adjust, and convert colors in your work.

RGB: the underlying model

Screens create color by mixing red, green, and blue light. RGB writes a color as three channels from 0 to 255. It maps directly to how displays work, which makes it the natural format for canvas, SVG, and image processing.

HEX: RGB in base-16

A HEX code is simply RGB written in hexadecimal. Each pair of digits encodes one channel, so #ff0000 is red at full strength. HEX is compact and universal in CSS and design tools. An eight-digit HEX adds an alpha (opacity) channel.

HSL: designed for humans

HSL describes a color as hue, saturation, and lightness. It is the easiest format for making deliberate adjustments: raise lightness to create a tint, lower saturation to mute a color, or rotate hue to find a companion. HSL is derived from RGB, so converting between them can round by a unit, which is invisible in practice.

Try these tools

Color Format Converter Auto-detect any color input and convert it to HEX, RGB, HSL, HSV, HWB, and CMYK. HEX to RGB Converter Convert a HEX color code to RGB and RGBA values instantly, with validation. HEX to HSL Converter Convert a HEX color to HSL and HSLA so you can reason about hue and lightness. Color Picker Pick a color and read its HEX, RGB, HSL, HSV, and CMYK values with alpha support.