Understanding Color Codes: HEX, RGB, and HSL for Beginners
A beginner-friendly guide to web color formats. Learn how HEX, RGB, and HSL work, when to use each one, and how to convert between them easily.
How Digital Colors Work
Every pixel on your screen produces color by mixing three lights: red, green, and blue. By varying the intensity of each from 0 to 255, your screen can display over 16 million colors. HEX, RGB, and HSL are just different ways to describe these color mixtures.
RGB: The Direct Approach
RGB stands for Red, Green, Blue. Each channel accepts a value from 0 to 255.
color: rgb(255, 0, 0); /* Pure red */
color: rgb(0, 128, 0); /* Medium green */
color: rgb(52, 152, 219); /* Sky blue */
color: rgba(0, 0, 0, 0.5); /* 50% transparent black */HEX: The Compact Notation
HEX codes represent RGB values using hexadecimal numbers. Instead of three decimal numbers, you get six hex characters.
color: #FF0000; /* Pure red */
color: #3498DB; /* Sky blue */
color: #F00; /* Shorthand for #FF0000 */HSL: The Human-Friendly Format
HSL stands for Hue, Saturation, Lightness. Unlike RGB and HEX, HSL describes colors the way humans think about them.
- Hue (0-360): The color itself on a color wheel. 0=red, 120=green, 240=blue.
- Saturation (0-100%): How vivid. 100% is fully vivid, 0% is gray.
- Lightness (0-100%): How bright. 0% is black, 50% is pure color, 100% is white.
color: hsl(0, 100%, 50%); /* Pure red */
color: hsl(200, 80%, 50%); /* Base blue */
color: hsl(200, 80%, 60%); /* Lighter blue */
color: hsl(200, 80%, 40%); /* Darker blue */
color: hsl(200, 40%, 50%); /* Muted blue */The power of HSL is that adjusting a color is intuitive. Want darker? Decrease lightness. Want muted? Decrease saturation. You cannot do this easily with RGB or HEX.
When to Use Each Format
| Format | Best For | Weakness |
|---|---|---|
| HEX | Quick copy-paste from design tools | Hard to adjust mentally |
| RGB | Transparency (rgba), programmatic generation | Not intuitive for manual picking |
| HSL | Creating palettes, adjusting shades, theming | Less common in design tools |
Convert Between Formats
HEX to RGB Converter
Convert hex codes to RGB with live preview.
Try it freeRGB to HEX Converter
Convert RGB values to hex codes instantly.
Try it freeHEX to HSL Converter
Convert hex to HSL for intuitive adjustments.
Try it freeHSL to HEX Converter
Convert HSL values to hex codes.
Try it freeRelated Articles
HEX to RGB Conversion Explained with Examples and Formulas
Understand how HEX color codes translate to RGB values. Learn the conversion formula, see practical examples, and use our free converter tool.
DesignPX to CM Converter: Screen Pixels to Print Measurements Explained
Learn how to accurately convert pixels to centimeters for print design. Covers DPI, screen resolution, and provides a free converter with adjustable settings.
DesignHSL Color Model Explained: Why Designers Prefer It Over RGB
Learn why HSL is more intuitive than RGB for color selection. Understand hue, saturation, lightness, and how to create harmonious color palettes with HSL.