Are there any good reasons for using hex over deci

Question

rgb(255,255,255) notation has been available since CSS1. But #ffffff seems to be vastly more popular.

Obviously it's slightly more compact. I know that hex is more closely related to the underlying bytes, and understand that there would be advantages in carrying out arithmetic on those values, but this isn't something you're going to do with CSS.

Colour values tend to be originated by designers (such as myself) who would never encounter hex notation anywhere else, and are much more familiar with the decimal notation which is the main way of specifying colour in the apps they use -- in fact I have met quite a few who don't realise how a given hex value breaks down into RGB components and assumed it didn't directly relate to the colour at all, like a Pantone colour system reference (eg PMS432).

So, any reason not to use decimal?

Answer 1

I think it's what you're used to. If you're used to HTML, you'll probably use HEX since it's just been used a lot in HTML. If you're from a design background, using Photoshop/Corel/PaintShopPro etc., then you're likely used to the RGB notation - though, a lot of programs these days incorporate a HEX value field too.

As said, RGBA might be a reason to just go with the RGB notation - consistency.

Though, I think it also depends on the scenario. If you're comfortable with both, you might just switch between them: #fff is a lot easier to type than rgb(255,255,255).

Another question is why people will say #fff instead of White (assuming most browsers support this keyword).

It's all a matter of preference and legibility - if you're maintaining a huge CSS file, being able to look at the colour value and know what colour it is, is a really good advantage. Even more advantageous is using something like LESS or Sass to add a kind of programmability to CSS - allowing constants for example. So instead of saying:

#title { color: #abcdef; }

You might instead do the following with LESS:

@base-color: #abcdef;

#title { color: @base-color; }

Maintaining the CSS becomes less of an issue.

If you're worried about the performance of the browser rendering it's result, then that could also be another factor to your choice.

So in summary, it boils down to:

• Familiarity
• Preference
• Maintainability
• Performance

Answer 2

The main reason is probably compactness, as you mentioned. #ffffff can even be further shortened to the #fff shorthand notation.

Another possible reason is that there's a perceived performance increase by saving the browser the trouble of converting the rgb notation.

Answer 3

I always used hex, but today I prefer to set my values as:

rgb(82, 110, 188)

in my css files, so whenever I want to add opacity I just need to rename rgb to rgba and add the opacity value. The advantage is that I don't have to convert the hex value to rgb before being able to add the opacity:

rgba(82, 110, 188, 0.5)

Answer 4

Probably a touch of speed when the color is interpreted by a browser. Otherwise some people from design background may know how to compose colors from RGB components when they write code, and some others from programming background are probably more inclined to use HEX values.

Answer 5

Maybe I've done HTML too long, but I find it easier to think in HEX values. A lot of the pre-defined colour palette for HTML maps neatly to HEX values. Using the shortened format also gives you automatic 'web-safe' colours, though this is not really an issue in the days of 32bit colour displays.

Answer 6

It's worth noting that if you want to input an RGBA value, hex notation is not supported; i.e., you can't fake it with #FFFFFFff. As a matter of fact, the alpha value must be a number between 0.0 and 1.0, inclusive. (Check out this page for browser support -- as always, IE is leading the pack here. ;) )

HSL and HSLA color support -- which is very designer friendly -- is also provided with a similar syntax to the RGB() style. If a designer were to use both types of color values in the same stylesheet, they might opt for decimal values over hex codes for consistency.