Open any stylesheet and you will see colors written two ways: #2f6feb and rgb(47, 111, 235). They describe the exact same color. So why do both exist, and which should you use?
What Each Format Means
HEX is a base-16 shorthand for the three channels of the RGB color model. #2f6feb means red = 0x2f (47), green = 0x6f (111), blue = 0xeb (235). It is compact and was historically the easiest to write and copy from design tools.
RGB spells the same channels out as decimal numbers from 0 to 255: rgb(47, 111, 235). It is longer but reads like a value, which makes it easier to adjust by hand when you know roughly which channel to change.
Convert colors instantly
Switch between RGB, HEX, and HSL with a live preview.
When to Use Each
- Copy from design tools: Figma and Sketch usually export HEX by default — use it as-is.
- Adjusting colors in code: RGB makes it clearer to tweak one channel, but most editors now preview colors inline regardless of format.
- Opacity: Use the alpha channel —
rgba()or the 8-digit#RRGGBBAA— when you need transparency. An 8-digit HEX does the job with no extra syntax. - Readability in shared code: Team preference matters more than any technical advantage; pick one and be consistent.
Why HSL Is Gaining Ground
Modern CSS also supports HSL, which expresses color as hue, saturation, and lightness. It is the most human-readable format: you pick a hue (0 to 360 degrees), then adjust saturation and lightness. Generating a lighter version of a color becomes a one-line change. Many developers now prefer HSL for component theming and keep HEX only for values pasted from design tools.
Convert Rather Than Guess
Design files give you colors in one format, but your codebase may expect another. Instead of doing base-16 arithmetic in your head, run the value through a converter — and use a tool with a live preview so you can see the color before you commit to the code.