I am more and more using rgba color codes for text in my stylesheets as it easily sets a lighter or darker variation of the color I need (white 80%, black 40%, etc.).
Is there a downside in using rgba color codes as opposed to hexa codes for text? If I want a text to be grey, is rgba(0,0,0,.5) heavier to render than #898989?
Thanks!
I think this is more of a personal option. To me, using hexa codes is easier. It's the same thing at the end of it all. I think it really doesn't matter which one you choose, and won't make any noticeable difference concerning the performance. So, use what makes you more productive! :)
Related
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.
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.
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.
Often I get a sketch file where a designer put the opacity on a colored text. This in itself isn't that awful thing, since I can just use rgba for color on my text in css.
But the problem is that this is a taxing function, and there really is no need for text to be opaque unless there is an image underneath it.
I can use a tool like http://marcodiiga.github.io/rgba-to-rgb-conversion
But I'd like to instruct the designers not to do that in the future. Now, knowing them, they probably won't use the above link, so I was wondering if there is a way in sketch to set the opacity of the text and just 'convert' it to rgb or hex color, depending on the background?
This would make my job a bit faster and easier :)
Is there a functionality like that in sketch?
normally #AARRGGBB is used for hex color with opacity. When you set AA to FF its fully opaque. But in some applications there may be a control that restricts number of digits when you enter hex color (probably there is one and limited to 6).
I didn't find anything easier than using a color picker to sample the value of the rasterized pixel. I use Affinity Designer but there are many other options out there.
For some reason, when I set the background color in a Windows 8 app to either #0D0D0D or #EEEEEE it displays as #111111 or #F2F2F2 respectively.
Is this a bug, or is there a reason for this? It seems fine for random other colors, but for some reason when I set it to something between black and white it demands that it changes. I've tried switching to RGB colors, too, and it still isn't working.
It's really not that big of a deal, but I'm a perfectionist and it's frustrating that the colors are just slightly off of my designs.
i had the same issue, what i did is to change hex value into rgb or if it is exact color name i apply that name to hex value. you can find many online color converters online. hope this helps.
I'm trying to create a button, where the font is bold but it also uses a text-shadow to make the text more readable. For whatever reason the text-shadow is not appearing when its added to the CSS, though in photoshop it makes a dramatic difference using the same values.
Here's the JSFiddle
Thank you for your help
The shadow is there, but it's so faint that it's nigh impossible to perceive, especially with a relatively low alpha value and when superimposed on a background with a similar hue.
I'm going out on a limb and guessing that in Photoshop, your text shadow has a layer style that causes it to have a different effect on the underlying background color. You may need to play around with the eyedropper tool and tweak the alpha value in your text shadow, in order to achieve something that better matches your Photoshop comp.
I want to try and get a cross browser gradient effect working with rgb values with fall backs in case the browser doesn't support it.
jsFiddle example: http://jsfiddle.net/HelloJoe/hUxdh/
I believe I've covered the majority of browsers, but I have a few questions:
Are there any other browsers that I have missed which are commonly used, as well as what properties would be needed for devices such as iPads/SmartPhones, or would they render from one of the currently used properties?
If by chance the gradient isn't rendered, is having the original background: rgb(50, 50, 50); enough to generate just a solid colour?
With the filter value, I couldn't get it working by using rgb values and had to resort to using a hex value instead, not that this is a huge problem, but I'm trying to only use rgb values. Is there a way round this or does it just not accept them?
If I was to use rgba instead of rgb would I then need to have a rgba gradient background value, an rgb gradient background value as a fall back for not rendering the alpha transparency and then a solid background fall back in case no gradient was rendered at all? Or would the browser ignore the alpha transparency value and just display the rgb from the rgba without a separate rgb background fall back?
As a final fall back for everything, would having a set hex value at the start of the CSS properties be needed? I guess there is no harm is adding a hex value but the idea of using rgb is if rgba is usable it makes for a quick and easy colour change throughout the site. So having a fall back hex value would make using rgb/rgba pointless for what I'm intending it's used for since I'd need to go through and edit all hex values anyway.
I've done a bit of searching and examples vary, understanding is misinterpreted between different people and I was just try to create an accurate working example of getting the desired outcome.
May i suggest you this website to help you with your Gradients and fallback:
http://www.colorzilla.com/gradient-editor/