Web Design & CSS
🎨 Color Codes Explained
Understand the differences between Hexadecimal, RGB, and HSL formats.
When building websites, colors aren't defined just by their names (like "red" or "blue"). They are defined mathematically so that digital screens know exactly how much light to output.
HEX (Hexadecimal)
The most common format on the web. A HEX code is a 6-digit string of alphanumeric characters preceded by a hash (e.g., #1E1E2F). It represents the exact mix of Red, Green, and Blue light.
- Characters 1-2 control the Red value.
- Characters 3-4 control the Green value.
- Characters 5-6 control the Blue value.
RGB (Red, Green, Blue)
RGB does the exact same thing as HEX but uses a 0 to 255 base-10 integer scale instead of base-16 letters. rgb(0, 207, 195) means 0 parts Red, 207 parts Green, and 195 parts Blue. This is often preferred in CSS when you need to manipulate the opacity (Alpha channel) using rgba().
HSL (Hue, Saturation, Lightness)
HSL is generally considered the most "human-readable" color format.
- Hue (0-360) represents the color on a 360-degree color wheel. (0 is red, 120 is green, 240 is blue).
- Saturation (0%-100%) represents how vibrant the color is. 0% is grey, 100% is full color.
- Lightness (0%-100%) represents how bright the color is. 0% is black, 100% is white.
Many modern frontend frameworks (like Tailwind CSS) utilize HSL heavily because it allows you to easily generate lighter or darker shades of a primary brand color just by tweaking the Lightness percentage in code.