1

I'm relatively new to CSS. I’m trying to figure out why my UX team sometimes defines colours with hex codes and sometimes uses RGBA.

Context: We build highly technical, management web apps. All of our web apps have a white background and don’t tend to layer elements (e.g., no marketing images as backdrops). Some of the designers feel RGBA helps control colour contrast ratios. Some designers just prefer using RGBA over hex. Some designers use hex. No one has given me a clear reason for their choice. I’d like to know the pros and cons of each technique and in which situations one method is better than the other because I’m building a colour theming solution for our core framework. We want gradient scales for each of our primary and secondary colours. There's no current requirement for transparency, but I suppose one day there could be.

I came across a related UX SE post: Why isn't primary text full opacity? Answers talk about RGBA helping to enforce standard use of colour. That is, if you start with an RGB colour and use the alpha value to adjust light/dark, you could ensure a consistent colour gradient scale. (Note: That post has a good image showing a colour scale using hex and then the equivalent alpha value beside it: https://i.stack.imgur.com/MWust.png)

But then what happens when you have HTML elements overlapping and you don’t want to them to appear partially transparent and yet want to use the appropriate colour? Do you use an equivalent RGB with alpha 1 or a hex code?

As for the contrast ratio theory, here’s what one UX designer told me: RGBA color always maintains the same level of contrast from whatever it's placed on. If you put an #AAA body text on an #FFF background, versus if you put it on a #EEE background, the #AAA text will look lighter on the #EEE background. But if you put rgba(0,0,0,0.33) on an #FFF vs #EEE background, the text will always have a 33% darker contrast on both. Is that true? Using a contrast ratio calculator (https://contrast-ratio.com/) rgba(0,0,0,0.33) on #FFF has a 2.3 ratio whereas rgba(0,0,0,0.33) on #EEE has a 2.26 ratio. Close, but not identical. #DDD goes down to 2.23.

Material UI Color Palettes seems to use hex codes (see https://material.io/design/color/#color-theme-creation ), but I’ve seen other writing to suggest at times Material UI uses RGBA sometimes. Not that Material UI is always right. :)

So again, I'm looking for the pros and cons of hex values vs. RGBA values and when it's best to use which.

closed as off-topic by Shreyas Tripathy, locationunknown, Mayo, Ken Mohnkern, Charles Wesley May 10 at 20:55

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Shreyas Tripathy, locationunknown, Mayo, Ken Mohnkern, Charles Wesley
If this question can be reworded to fit the rules in the help center, please edit the question.

  • I'm still new to Stack Exchange, so certainly share the reasoning behind the -1 vote on my question. – Marnie A. Apr 26 at 13:31
  • I believe the reason behind the downvote is that the question isn't related to user experience as such. The question would be better answered by the folks over at Stack Overflow because you want to figure out which coding standard is better. – Shreyas Tripathy Apr 27 at 12:25
  • Thanks, @ShreyasTripathy. I can see that. I had added it here so that the visual designers could speak to the effects of transparency over different background colours and how to ensure good contrast ratio. Such things should drive what choice is 'better'. – Marnie A. Apr 29 at 12:23
  • Note: I was asked to rewrite the question, and it was easier to post a new one. See ux.stackexchange.com/questions/126067/… where I ask about opacity vs. transparency without much mention of implementation. – Marnie A. Jun 4 at 12:56
1

In terms of CSS, they have a simple difference - RGBA allows you to define the opacity directly to the property while HEX code does not. You may use 'Opacity' with HEX code but that is not applied to that particular CSS property but to the entire HTML element. 'Background-Colour' is a common property used. If we try to define it with some grey at 50% opacity (very commonly used for overlay backgrounds), it will be difficult to achieve with HEX code. Consider this style code below -

.element { background-color:#000; font:bold 16px/22px sans-serif; color:#000; opacity:0.5; }

In the above case, the opacity will be applied to everything including text-styles, which is not what we really want.

To prevent that we need to use RGBA as below -

.element { background-color:rgba(0,0,0,0.5); font:bold 16px/22px sans-serif; color:#000; }

Hope this helps.


Contrast-ratio and other reasons shouldn't be a concern regarding why RGBA and not HEX. Because all colors can be denoted using either RGB, HEX or HSB. 'Why isn't primary text full opacity?' This is only true for pure black (#000000) on a pure white (#ffffff) background.

Personally, I think, text colors defined at partial opacity do not render well and affect the readability of the text on screen, mainly with -Light or -Thin type. Printed version of these texts will also suffer. Then again, results may differ based on the font-family used.

  • 1
    I'm pretty sure you can specify opacity with 4th hex value. I.e. #00000080. Being black with 50% opacity. – SEJBR Apr 26 at 9:37
  • So @Ren it sounds like you're saying that for defining a colour gradient scale without the need for transparency, you would opt to use Hex and not RGBA with A controlling each step in the scale, correct? – Marnie A. Apr 26 at 13:30
  • @MarnieA. Yes, true. Personally, it is easier for me to define colors in HEX value. Therefore, those would be my first try. So whatever system you are comfortable with is good. And lucky you, if RGB is the system you use all the time. – Ren Apr 27 at 16:06
  • @SEJBR That is not a W3C defined standard. It will not be supported by every browser. I will recommend not using it as far as possible. – Ren Apr 27 at 16:22

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