In CSS, the same color can be written in at least three different ways, and each one is convenient for a different job — from design handoff to animating transparency.
HEX: a compact format for copy-pasting
Hex notation like #FF5733 encodes the three channels — red, green, blue — as two characters each. It's the most compact format, convenient for copying out of design mockups, but nearly unreadable to a human: it's hard to tell at a glance what shade a string of digits represents.
RGB: direct access to each channel
rgb(255, 87, 51) writes the same three channels as decimal numbers from 0 to 255. That's handy when you need to change a single channel programmatically, say smoothly increasing red in a JavaScript animation.
HSL: intuitive shade picking
HSL describes a color through hue (0–360°), saturation, and lightness. It's the most convenient format for picking a color by hand: to get a darker version of the same hue, you only need to lower the lightness, without recalculating all three RGB channels from scratch.
The alpha channel for transparency
The rgba() and hsla() formats add a fourth parameter — opacity from 0 to 1. Modern CSS also lets you set transparency in HEX via two extra characters at the end, like #FF573380.
Why you'd need this
- Quickly convert a color from a design mockup into the CSS format you need.
- Pick a darker or lighter version of the same color using HSL.
- Add transparency to a color without changing its underlying hue.
The 140-odd CSS color names you can actually use
CSS lets you skip HEX and RGB entirely for a fixed list of named colors like rebeccapurple or cornflowerblue — 148 of them as of the CSS Color spec, inherited almost unchanged from the X11 color list defined for Unix workstations in the 1980s. That heritage shows: rebeccapurple (#663399) was added in 2014 as a memorial to Eric Meyer's daughter Rebecca, making it the only CSS color name with a documented human story behind it rather than an X11 legacy. A handful of names are famously confusing — fuchsia and magenta are the exact same color (#FF00FF), added separately because one came from X11 and the other from the print world, and nobody ever unified them since removing either would break existing pages.