How to Convert Colors Between HEX, RGB, and HSL
Every color on the web can be represented in multiple formats — HEX, RGB, and HSL are the three most common. Designers and developers frequently need to convert between these formats when working with CSS, design tools, and APIs. This guide explains each color system and how to convert between them.
Understanding Color Formats
- HEX. A 6-digit hexadecimal string prefixed with
#. Each pair of digits represents red, green, and blue channels. Example:#FF5733. - RGB. Defines a color by its red, green, and blue components, each ranging from 0 to 255. Example:
rgb(255, 87, 51). - HSL.Represents color using hue (0–360 degrees), saturation (0–100%), and lightness (0–100%). More intuitive for humans. Example:
hsl(11, 100%, 60%).
HEX to RGB Conversion
Each pair of HEX digits maps directly to an RGB channel:
#FF5733 R G B FF = 255 57 = 87 33 = 51 → rgb(255, 87, 51)
How to Convert Colors Step by Step
- 1Pick a color. Use the ToolStack Color Picker to visually select a color and see all format values.
- 2Copy the format you need. Switch between HEX, RGB, and HSL tabs to get the value in the format required by your CSS or design tool.
- 3Generate a palette. Once you have a base color, use the Palette Generator to create complementary, analogous, or triadic schemes.
Try It: Pick and Convert Colors
Use our free Color Picker to select any color and get its HEX, RGB, and HSL values instantly.
Open Color Picker