CODEWITHSUNDEEP
css
themirror
themirror

Reputation: 10287

CSS color names + alpha transparency

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 resorting to rgba like

#mytext { color: rgba(255,0,0,0.5) }

Upvotes: 40

Views: 13928

Answers (4)

mbomb007
mbomb007

Reputation: 4231

Yes, this is now possible in vanilla CSS

background-color: color-mix(in srgb, red 30%, transparent);

// Same as above
background-color: color-mix(in srgb, red, transparent 70%);

// 50% is the default
background-color: color-mix(in srgb, red, transparent);

// You can also mix standard colors
background-color: color-mix(in srgb, #ff0000 40%, #00aaff);

If you're thinking, "wow, that's the coolest thing ever!" Yes. Yes it is.

Runnable snippet

div {
  display: inline-block;
  height: 50px;
  width: 50px;
}
.a {
  background-color: color-mix(in srgb, red 30%, transparent);
}
.b {
  background-color: color-mix(in srgb, red, transparent 70%);
}
.c {
  background-color: color-mix(in srgb, red, transparent);
}
.d {
  background-color: color-mix(in srgb, #ff0000 40%, #00aaff);
}
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>

Documentation

Can I Use (supported by major browsers)

Upvotes: 15

Rayyan
Rayyan

Reputation: 37

No

Though there is such method in sass, prefer converting to hex digit/rgb and then add alpha accordingly

Upvotes: 1

Austris
Austris

Reputation: 21

Try like this:

background-color: rgba($scssNamedColor, 0.5);

Upvotes: 1

daveyfaherty
daveyfaherty

Reputation: 4613

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.

Upvotes: 4

Related Questions