4

I know this has appeared on StackOverflow already:

But I'd like to ask on here since we're probably all more technical with our color selection and might be using it in HEX, RGB, and CMYK. Personally, my preference for the last few years is to use RGBA. I just find it easier to remember. I know certain HEX codes (are they codes?) but I know a ton of RGB codes, and can make fairly good estimates at any color I might need.

The main argument I've seen is Copy and Paste one, vs three. Are there any other differences in the Color Profile?

Is there a reason most programmers still prefer the HEX format?

With modern print techniques what other caveats, if any, might a designer face if they go with HEX and then try to find a similar CMYK color?

9

The browser doesn't really care which format the color is in, performance is negligible. As such, I'll focus on the decision's effects on the developer(s) and the use cases.

A lot of developers find HEX values easier to read than RGB or HSL. As such, I tend to use HEX so that the next developer working on the project may have an easier job, even slightly so. However, if the developers are more familiar with another type it's not a problem to use it.

One of few times that a specific color type is necessary is when changing the alpha level is required. This is because opacity changes stacking order. As such, when the alpha level needs to be something other than one, sometimes it's preferable to use HSLa or RGBa over the opacity property.

When it comes to animating colors, working in RGB or HSL is preferable over HEX simply because numbers are easier to edit dynamically. HSL is great for animations that go through the spectrum because the color is determined by one number - the hue - provided the saturation and lightness don't actually need to be changed.

Ultimately doesn't matter too much, provided it's not a special case. The most important thing is to keep consistent in the type being used each project as much a possible because it helps productivity.

  • Any idea what effect, if any, HEX has when you're going to want to produce printed materials as well with the same branding? – Ryan Oct 10 '14 at 14:23
  • 2
    @Ryan HEX is in the RGB gamut. You can't print the RGB gamut, you must use the CMYK gamut for printing. There's no direct relation between HEX and CMYK. You have to convert everything to CMYK and then possibly adjust colors depending on how much the conversion alters the original colors. Most branding includes at least RGB and CMYK values for this reason. Often brand guidelines will have RGB, HEX, CMYK, and Spot color breakouts to ensure proper color in any medium. – Scott Oct 10 '14 at 15:12
  • 3
    Adding to what was said about opacity changing stacking order, it will also affect the opacity of the the entire element. Using rgba or hsla will only affect the opacity of the property that is receiving color. div{ background: #f00; color: #0f0; opacity: .5} will result in semi-tranparent text. div{ background: rgba(255, 0, 0, .5); color: #0f0} will not. – Gidgidonihah Oct 13 '14 at 22:20
-2

Only write in HSLA. It requires very little mental gymnastics to imagine or modify colours (vs hex or RGBA), is completely equivalent to hex or RGBA in the browser, has great browser support from IE9 onwards, and if you only use HSLA you never have to change the layout of your code when you want to introduce transparency; all you do is take the 1 down to a 0.X number. It's far more consistent and readable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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