Possible to Set Hex Color Opacity Independently

Possible to set hex color opacity independently?

In the near future and thanks to "relative color syntax" You can do the following

:root {
  --set1: #abc;
  --set1-1: rgb(from var(--set1) r g b / 80%);
  --set1-3: rgb(from var(--set1) r g b / 50%);
  --set1-5: rgb(from var(--set1) r g b / 30%);
}

You transform the color into an rgb() value then you set the transparency.

---

There is no browser support for the above. Until then, you have to manually write the colors or use Sass to generate them.

Related: How to create color shades using CSS variables similar to darken() of SASS?

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

Is it possible to change only the alpha of a rgba background colour on hover?

This is now possible with custom properties:

.brown { --rgb: 118, 76, 41; }
.green { --rgb: 51, 91, 11; }

a { display: block; position: relative; }
div { position: absolute; bottom: 0; background-color: rgba(var(--rgb), 0.8); }
a:hover div { background-color: rgba(var(--rgb), 1); }

To understand how this works, see How do I apply opacity to a CSS color variable?

If custom properties are not an option, see the original answer below.

---

Unfortunately, no, you'll have to specify the red, green and blue values again for each individual class:

a { display: block; position: relative; }

.brown { position: absolute; bottom: 0; background-color: rgba(118, 76, 41, 0.8); }
a:hover .brown { background-color: rgba(118, 76, 41, 1); }

.green { position: absolute; bottom: 0; background-color: rgba(51, 91, 11, 0.8); }
a:hover .green { background-color: rgba(51, 91, 11, 1); }

You can only use the inherit keyword alone as a value for the property, and even then the use of inherit isn't appropriate here.

Can you set a border opacity in CSS?

Unfortunately the opacity property makes the whole element (including any text) semi-transparent. The best way to make the border semi-transparent is with the rgba color format. For example, this would give a red border with 50% opacity:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

For extremely old browsers that don't support rgba (IE8 and older), the solution is to provide two border declarations. The first with a fake opacity, and the second with the actual. If a browser is capable, it will use the second, if not, it will use the first.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

The first border declaration will be the equivalent color to a 50% opaque red border over a white background (although any graphics under the border will not bleed through).

I've added background-clip: padding-box; to the examples above to ensure the border remains transparent even if a solid background color is applied.

Add alpha channel to a given color

I believe there is no way to do it.

Css is very limited by itself, and there isn't much you can do with it.

The only way you could add opacity is:

opacity: 0.5

But the above would also affect the text itself, not only background.

However, you could wrap it in way that would separate the background blocks from the text, so that would keep the color of the text untouched.

EDIT: See the fiddle: http://jsfiddle.net/YfSn7/30/

But that may look somewhat ridiculous, so I wouldn't much advice using it.

Guess you would have to accept that this is impossible, if you do actually want to make things simpler instead of over-complicating them.

---

Related Topics