Color Codes Explained: HEX, RGB, and HSL

Whether you're designing a website, building an app, or editing a photo, you'll encounter three main ways to define colors: HEX, RGB, and HSL. Here's what each means and when to use it.

HEX Colors

HEX codes are the most common format in web development. They start with # followed by six characters (0-9, A-F) representing red, green, and blue channels.

Example: #7c3aed - Toolium's brand purple

How it works: #RRGGBB where each pair is a hexadecimal value from 00 (none) to FF (maximum). So #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue.

Best for: CSS, HTML, design tools. It's compact and universally supported.

RGB Colors

RGB defines colors using three decimal numbers (0-255) for red, green, and blue.

Example: rgb(124, 58, 237) - the same purple in RGB

How it works: Each channel goes from 0 (off) to 255 (full intensity). Mixing all three at 255 gives white; all at 0 gives black.

Best for: CSS, JavaScript, programmatic color manipulation. It's easy to do math with RGB values.

HSL Colors

HSL stands for Hue, Saturation, and Lightness. It's the most intuitive format for humans.

Example: hsl(263, 83%, 58%) - that same purple again

How it works:

• Hue (0-360) - the color wheel position. 0 is red, 120 is green, 240 is blue
• Saturation (0-100%) - how vivid the color is. 0% is gray, 100% is fully saturated
• Lightness (0-100%) - how light or dark. 0% is black, 100% is white, 50% is the pure color

Best for: Creating color variations. Want a darker version? Lower the lightness. Want a muted version? Lower the saturation. HSL makes these adjustments intuitive.

Convert Between Formats

Use the Toolium Color Picker to convert between all three formats instantly. Type a HEX code, adjust RGB sliders, or enter HSL values - all formats update in real time with a live preview.