Specifying colour tints in CSS: RGB vs RGBA

Question

I need to specify a number of variants for black and white colors. I've been given the variants as a percentage of the solid color.

As a non-designer, the question I have is, should I simply specify them as RGBA, or should I use something like photoshop to get the actual #hex RGB value and use that.

The reason I ask is because some of the variants have very low opacity and will naturally take on the background tone, rather than be a true solid grey.

If you go here on the side it has shades -- http://www.w3schools.com/html/html_colornames.asp — Tasos, Apr 10 '15 at 10:05
Why on hold? This is a straightforward question about how to specify colours in css. — Richard Inglis, Apr 10 '15 at 23:39

score 3 · Answer 1 · edited May 23 '17 at 11:43

If you have a background colour other than white, then as you say the background colour will show through where your RGBA colours are partially transparent. To avoid this you need to use fully opaque colours - so you need to calculate rgb equivalents.

For 'variants of black and white' (ie shades of grey), this is pretty easy, since grey shades have equal R, G and B values:

100% grey (ie black) = (0, 0, 0) = #000000
50% grey = (128,128,128) = #808080
0% grey (white) = (255,255,255) = #FFFFFF

See here for more examples.

EDIT:

If you need tints of colours other than grey (not entirely clear from your question), it's a similar process (scaling your R, G and B values towards 255 as you approach white), which is described in the answers to a previous question: 'Given an RGB value, how do I create a tint (or shade)?'

enter image description here

Specifying colour tints in CSS: RGB vs RGBA

1 Answers1