If you’ve ever peeked into a stylesheet, you’ve probably seen odd-looking values like #ff5733 or #000000. These are hex codes—a good method of defining colors in CSS.
At first glance, they may look random, but in reality, they’re just numbers written in a different number system, one that is called hexadecimal.
What exactly is a hex code?
A hex code starts with a # followed by six characters, each representing a number between 0 and 255—but written in base 16 instead of base 10. That means it uses digits 0–9 and letters A–F for values.
The six characters are grouped into three pairs:
- First two → Red
- Middle two → Green
- Last two → Blue
So #ff0000 is perfect red, #00ff00 is perfect green, and #0000ff is perfect blue. When combined, these values form millions of possible colors.
How hex codes work in CSS
In CSS, hex codes are used anywhere you want to apply a color:
There’s also a shorthand form: #fff is the same as #ffffff (white), and #000 is the same as #000000 (black). This allows for faster typing of common colors.
Why use hex over RGB or HSL?
Here’s the contradiction: hex codes are not the most human-friendly format—it’s hard to guess what #4caf50 looks like without seeing it. Yet, they remain one of the most common notations because:
- They’re short and widely recognized.
- Many design tools export colors in hex.
- They fit well with the basic RGB screen model.
For developers, hex codes are reliable, predictable, and universally supported.
In short: Hex codes might look incomprehensible, but they’re just a clean shorthand for mixing red, green, and blue values. Once you know how to read them, you’ll see they’re a practical tool in CSS, one that has proven itself over time.
Although my blog doesn’t support comments, feel free to reply via email or X.