Speaking the Language of Light
Colors on a screen aren't paint—they're light. And just like languages, there are different ways to describe them. Whether you're a developer, a designer, or just curious, understanding these formats is like learning the alphabet of the digital world.
RGB: The Recipe for Light
RGB stands for Red, Green, Blue. Think of your screen as a mosaic of millions of tiny pixels. Each pixel has three tiny light bulbs: red, green, and blue. By varying the intensity of each (from 0 to 255), we can create over 16 million colors.
rgb(255, 0, 0) = Red
rgb(0, 255, 0) = Green
rgb(0, 0, 255) = Blue
HEX: The Developer's Shorthand
Hexadecimal (HEX) is just a compact way to write RGB values. Instead of using numbers 0-255, we use 00-FF. It's shorter and easier to copy-paste, which is why web developers love it.
#FF0000 = Red
#00FF00 = Green
#0000FF = Blue
HSL: The Human Way
Computers think in RGB, but humans don't. If I ask you to 'make this red darker', you don't think 'reduce the red channel by 20'. You think 'lower the brightness'. That's HSL (Hue, Saturation, Lightness). It separates the *color* (Hue) from how *vibrant* (Saturation) and *bright* (Lightness) it is.
Why Contrast Matters
When choosing colors for text and backgrounds, it's not just about aesthetics—it's about accessibility. Low contrast makes text hard to read for everyone, especially people with visual impairments. Always check your contrast ratios!