How Color Formats Work
All three formats — HEX, RGB, and HSL — describe exactly the same colors. They're just different notations for the same underlying data: how much red, green, and blue to mix. HEX is compact and readable at a glance. RGB maps directly to how your screen works. HSL is the most human-friendly for creating palettes.
Conversion Formulas
HEX and RGB convert directly — each pair of hex digits is a base-16 number from 0 to 255. Converting to HSL requires normalizing each channel to 0–1, finding the max/min, then computing hue, saturation, and lightness from those values.
CSS Usage
Frequently Asked Questions
What is a HEX color code?
A HEX color code is a 6-digit (or 3-digit shorthand) hexadecimal representation of a color, prefixed with #. Each pair of digits represents the red, green, and blue channels from 0 (00) to 255 (FF). For example, #FF5733 means red=255, green=87, blue=51. HEX is the most common format in web development.
What is RGB?
RGB stands for Red, Green, Blue. Each channel ranges from 0 to 255. Mixing all three at 255 gives white (rgb(255, 255, 255)); mixing all at 0 gives black (rgb(0, 0, 0)). RGB is the native color model for screens and is fully supported in CSS.
What is HSL?
HSL stands for Hue, Saturation, Lightness. Hue is the color angle on the color wheel (0–360°), Saturation is how vivid the color is (0–100%), and Lightness is how light or dark it is (0% = black, 100% = white, 50% = pure color). HSL is often more intuitive for designers because adjusting lightness or saturation is straightforward.
Which format should I use in CSS?
All three formats are valid CSS. Use HEX for static design tokens and color palettes. Use RGB (or rgba for transparency) when you need to manipulate channels programmatically. Use HSL when you want to create color variations by adjusting lightness or saturation — e.g., hover states and dark mode variants.