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 . Works only when each pair repeats the same digit: #123 = #112233 .…