Hex Color Codes: A Complete Guide for Designers and Developers
Hexadecimal color codes are the most common way to specify colors in CSS, design tools, and brand guidelines. Compact, copy-paste friendly, and understood everywhere — but the format has subtleties worth knowing.
The #RRGGBB Format
Hash + six hex digits: two for red, two for green, two for blue. Range 00–FF (0–255 decimal).
#FF0000 red #00FF00 green #0000FF blue #FFFFFF white #000000 black #5B5BD6 purple
Shorthand (#RGB)
When both digits in each pair are identical: #FFFFFF → #FFF, #AABBCC → #ABC. #5B5BD6 cannot be shortened (5≠B).
8-Digit Hex with Alpha (#RRGGBBAA)
CSS Color Level 4 adds an alpha channel. FF=fully opaque, 00=fully transparent. #5B5BD680 = purple at ~50% opacity (0x80=128≈50% of 255).
HEX to RGB in JavaScript
parseInt('#5B5BD6'.slice(1,3),16) → 91 (red)parseInt('#5B5BD6'.slice(3,5),16) → 91 (green)parseInt('#5B5BD6'.slice(5,7),16) → 214 (blue)
Uppercase vs Lowercase
CSS is case-insensitive. Pick one convention and enforce it with a stylelint rule. Many teams prefer lowercase; Figma defaults to uppercase.