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)
  • RGBA colors using:
    • 8-digit hex notation (#rrggbbaa)
    • rgba( r, g, b, a ) notation (Note that CSS4 requires rgb to accept 4 arguments but not all browsers support this), note that a is in the range 0-1.0 instead of 0-255.
  • 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.

Tags:

Css