There is no single best way to write colors in CSS. Each format exists for a reason, and knowing when to use which one removes a category of micro-decisions from your workflow.

The basics: what are you actually writing?

Every CSS color format describes the same thing: a point in a color space, encoded as text the browser can parse. The difference is how that encoding works and what operations it makes easy .

HEX (#RRGGBB)

color : #2 f855a ; background : #1 a202c ; border-color : #e2e8f0 ;

Enter fullscreen mode

Exit fullscreen mode

Structure: Three pairs of hexadecimal digits. Each pair represents one color channel (red, green, blue) on a scale from 00 (0) to ff (255).

Why it exists: Compact and universally supported. A hex code is shorter than its RGB equivalent and trivially copy-pasteable from any design tool (Figma, Sketch, Adobe XD all export hex by default).

3-digit shorthand: #fff expands to #ffffff .…