Defining colour themes of gradient scales: should I use hex or RGBA?

Question

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., not 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: https://ux.stackexchange.com/questions/105503/why-isnt-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.

Related StackOverflow Posts:

Difference between hex colour, RGB, & RGBA and when should each they be used? Explains the technical purpose of the two options but doesn't address the UX purposes, in particular using which one for base colours in a core framework of colour themes

Use HEX or RGBA Likewise, although with it being an older post, also talks about browser support. My project requires users to use newer browsers, so I'm more interested in the benefits of both solutions.

Answer 1

Okay, I built a fiddle to study these ideas in context: https://jsfiddle.net/marniea/1q9adxo6/

It shows how the same colour expressed as opaque RGB behaves differently when expressed in RGBA. I'm using RGBA and RGB (rather than HEX) since the discussion is really about using partially-transparent color in place of opaque.

The colour values used:

• RGB: rgb(128, 128, 128)
• RGBA: rgba(0, 0, 0, .54)

The colours look the same on a white background (Example 1).

RGBA says, “mix 54% of my colour” – which is black in this case – “with whatever the background is”.

So for example 2, the RBGA value mixes 54% of its black with the grey background. 54% black + grey is darker than 54% black + white. The RGB value looks the same as in example 1. Because it's nearly the same colour as the background grey, so we don’t see it in example 2.

For example 3, it mixes 54% of its black with the black background. 54% black + black is just black, which is why you don’t see the RGBA text or box in example 3.

The RGB colour is predictable; it always looks the same. The RGBA colours are not so predictable. RGBA sometimes adapts better (as in example 2) and sometimes doesn’t (as in example 3).

If we are looking at defining a known number of app skins, defining one set of colours using RGBA and hoping they adapt to the background colours leaves things to chance (or a lot of testing, especially to check contrast ratios). I feel it's best to know ahead of time what the colours will be every time, regardless of background colour. If the colours are meant to be opaque, why not make them?

The only advantage I can see with RGBA so far is to ensure an exact colour gradient / saturation scale. But the primary use case is using the colours; defining the colours is the secondary use case.

So until I come across an argument to the contrary, I feel opaque colours (i.e., RGB or hex) are best used for opaque use cases.

Answer 2

Hex is more traditional, but for a long time it was not possible to define an alpha channel with it.

rgba was introduced to allow people to create semitransparent colors.

However, an addition to the CSS spec means that hex colors can include an alpha channel, when they have 4 or 8 characters.

So #00000055 is the same as to rgba(0,0,0,0.33). #0005 is similar.

So rgba used to be required for alpha blending, but it is no longer necessary. It doesn't matter which one you use.