CSS color names + alpha transparency
No. As of 2020, the CSS Colors specification only allows colors to be specified as:
- Named colors
- There's a set of 16 colors based on 4-bit color systems. This set is very limited and ugly to look at today.
- CSS2 added X11+SVG named colors which are prettier, but don't allow you to specify an opacity value associated with the color.
- There's also the named "System colors" but these are deprecated since modern OSes don't tend to use a single simple color for UI elements anymore.
- RGB colors using:
- 6-digit hex notation (
#rrggbb
) - 3-digit hex notation (
#rgb
) rgb( r, g, b )
notation (using percentages or 0-255 numbers)
- 6-digit hex notation (
- RGBA colors using:
- 8-digit hex notation (
#rrggbbaa
) rgba( r, g, b, a )
notation (Note that CSS4 requiresrgb
to accept 4 arguments but not all browsers support this), note thata
is in the range0-1.0
instead of0-255
.
- 8-digit hex notation (
- HSL and HSLA colors:
hsl( h, s, l )
hsla( h, s, l, a )
Each of these are mutually-exclusive.
Color-names are less useful now than they were in the days of CSS1.x because the named colors (with the exception of orange
) are all members of the old "16-color" display palette and generally look ugly today.
If you want to use color names to improve readability then use comments, like so:
color: rgb(0,0,0,0.5); /* semi-transparent black */
(put the comment after the semi-colon because many CSS editors only preserve comments when they're located outside of property declarations).
CSS3 adds more named-colors, including the 24-bit X11 color set, as well as the hsl(h,s,l)
function, but still does not allow the mixing of named-colors and opacity values: http://www.w3.org/TR/css3-color/
You can achieve the result you want this way:
#mytext{
color: red;
opacity: 0.5;
}
Note that opacity will affect the whole element, not just the text, so for example, if the #mytext element had a background color, that would also receive the opacity value of 0.5
However, I agree with Dai, using color names instead of hex or rgb codes isn't something you should rely on too much. It's an ugly color palette to work with.