72

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?

2
  • 3
    Update: many thanks for responses. I don't think any compelling reason to use either is evident, and therefore have not marked an answer. But some interesting side points, particularly WCWedin's on decimal being required for RGBA
    – e100
    Jul 25, 2009 at 15:49
  • Hmm, not sure what I'm doing wrong with Markdown's link syntax?
    – e100
    Jul 25, 2009 at 15:59

13 Answers 13

39

Hex values are easier to copy and paste from your favourite image editor.

RGB values are easier to manipulate with Javascript.

(My favourite Hex colour value is #EDEDED and a site we made for a client involved in motorsport had a background colour of #F1F1F1 :-)

Ed.

25

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.

4
  • 1
    As RGBA becomes more widely used (it is quite useful), I expect a resurgence of usage of decimal notation. Good point!
    – chuckharmston
    Jul 23, 2009 at 13:03
  • Yup, good point on RGBA. Not sure if designers will really use HSL values to specify colour values, although it's a intuitive model when used for colour pickers, colour adjustment filters, etc
    – e100
    Jul 23, 2009 at 13:47
  • 1
    The nice thing about HSL is that you can easily make up matching color schemes on the fly and have a pretty good idea of what they'll look like before you even refresh the page. There's no need to open up Photoshop to pick out three shades of the same red. Even complimentary colors are easy to pick out; 120 degree rotations are trivial in RGB, but I'm not sure if 180 degrees can be calculated so readoily. Jul 23, 2009 at 20:53
  • 2
    The CSS Color Module Level 4 draft spec adds the 8-digit hexadecimal notation #RRGGBBAA and #RGBA. According to caniuse, such notation is supported by 76% of browsers (in Sept 2018), with no IE or Edge support yet, so it not advisable to use... yet. Sep 24, 2018 at 18:29
9

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
8

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.

3
  • 6
    There is a perceived performance difference? I had a double take on your comment to check if it was written before 1991. Is this based on any data?
    – Rick
    Mar 29, 2017 at 18:28
  • 1
    LMAO. A thought experiment for anyone who thinks they are "saving the browser the trouble": Do you think computers natively consume hexadecimal values encoded as ASCII, any more than they do decimal ones? In either case, the browser must convert the ASCII strings to the 8-bit numbers that the rendering engine needs. Plus, any size advantage of hex colours will not matter in any non-contrived scenario. Jun 19, 2017 at 20:55
  • 1
    @underscore_d You act like all browsers are created equally. Jun 20, 2017 at 1:19
6

Traditionally HTML has always used hex colours, so that has carried forward into CSS. Think <font color="#ffffff">

6

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)
2
  • 8
    In Sass you can still use HEX values and combine them with alpha. For example: .container { background: rgba(#369, .2); }. Here's a Demo in JSFiddle. Nov 5, 2014 at 20:04
  • The CSS Color Module Level 4 draft spec adds the 8-digit hexadecimal notation #RRGGBBAA and #RGBA. According to caniuse, such notation is supported by 76% of browsers (in Sept 2018), with no IE or Edge support yet, so it not advisable to use... yet. Sep 24, 2018 at 18:29
5

CSS was invented by software developers, not designers. Software developers live and breathe hex. From my old C64 days, I can still read most hex numbers without thinking. A9, anyone?

1
  • "number x = 255" is more intuitive to the way people are taught maths than "number x = #f". and to people who aren't even mathematically inclined "255" is even more intuitive. abstracting over the machinery is meant to improve human insight into what's going on. having said that, to me, #fff is just as intuitive as rgb(255,255,255). and because im lazy i'll use #fff :) Aug 26, 2010 at 13:59
4

Various things will accept a single hex value where they may have different ways of entering three decimal values. There's also the fact that it's always 6 characters (or 3, admittedly - plus the #) which makes it easier to scan down a list of them.

Just a couple of random thoughts to add to the mix...

1
  • 3
    Well, it's usually 6 characters. It can also be 3 characters.
    – tnyfst
    Jul 23, 2009 at 12:50
2

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.

2
  • 3
    I don't get the down vote.. rgb(255,255,255) is way longer than #fff. This is the touch of speed I was talking about. Jul 24, 2009 at 20:23
  • 1
    A touch of speed that is so unlikely to be significant in any practical situation that it is hardly worth mentioning, especially as the leading reason. Jun 19, 2017 at 21:01
2

HEX is most common due to historical reasons.

Before CSS was common in web development, colors were specified within HTML tags and the most commonly used and supported way to specify a color was to use HEX values.

1

no valid reason, other than personal preference.

1

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.

1
  • 4
    The shortened format doesn't automatically give you web safe colors. You have to limit the component values to 0,3,6,9,C and F to get the 216 web safe colors.
    – Guffa
    Jul 23, 2009 at 13:09
1

I have always preferred HEX in comparison to RGB or HSL simply due to it being easier for me to read while styling.

When it comes to dynamic editing, I would like to use RGB because of the ease of cycling through different colors. This also helps a little when doing CSS gradients.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.