CSS color names + alpha transparency

Question

Is it possible to define a color in CSS by its name plus an alpha transparency value?

I.e.:

#mytext { color: red 0.5 }

rather than reso

Answer 1

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.

Answer 2

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/