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: 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.