Sass - Converting Hex to RGBa for background opacity

Question

I have the following Sass mixin, which is a half complete modification of an RGBa example:

@mixin background-opacity($color, $opacity: .3) {
    background: rgb(200, 54, 54); /* The Fallback */
    background: rgba(200, 54, 54, $opacity);
} 

I have applied $opacity ok, but now I am a stuck with the $color part. The colors I will be sending into the mixin will be HEX not RGB.

My example use will be:

element {
    @include background-opacity(#333, .5);
}

How can I use HEX values within this mixin?

Solution 1

The rgba() function can accept a single hex color as well decimal RGB values. For example, this would work just fine:

@mixin background-opacity($color, $opacity: 0.3) {
    background: $color; /* The Fallback */
    background: rgba($color, $opacity);
}

element {
     @include background-opacity(#333, 0.5);
}

If you ever need to break the hex color into RGB components, though, you can use the red(), green(), and blue() functions to do so:

$red: red($color);
$green: green($color);
$blue: blue($color);

background: rgb($red, $green, $blue); /* same as using "background: $color" */

Solution 2

There is a builtin mixin: transparentize($color, $amount);

background-color: transparentize(#F05353, .3);

The amount should be between 0 to 1;

Official Sass Documentation (Module: Sass::Script::Functions)

Solution 3

SASS has a built-in rgba() function.

rgba($color, $alpha)

e.g.

rgba(#00aaff, 0.5) // Output: rgba(0, 170, 255, 0.5)

An example using your own variables:

$my-color: #00aaff;
$my-opacity: 0.5;

.my-element {
  color: rgba($my-color, $my-opacity);
}

// Output:
// .my-element {
//   color: rgba(0, 170, 255, 0.5);
// }

To quote the SASS documentation:

The transparentize() function decreases the alpha channel by a fixed amount, which is often not the desired effect.

Solution 4

you can try this solution, is the best... url(github)

// Transparent Background
// From: http://stackoverflow.com/questions/6902944/sass-mixin-for-background-transparency-back-to-ie8

// Extend this class to save bytes
.transparent-background {
  background-color: transparent;
  zoom: 1;
}

// The mixin
@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  @extend .transparent-background;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
}

// Loop through opacities from 90 to 10 on an alpha scale
@mixin transparent-shades($name, $color) {
  @each $alpha in 90, 80, 70, 60, 50, 40, 30, 20, 10 {
    .#{$name}-#{$alpha} {
      @include transparent($color, $alpha / 100);
    }
  }
}

// Generate semi-transparent backgrounds for the colors we want
@include transparent-shades('dark', #000000);
@include transparent-shades('light', #ffffff);

Solution 5

If you need to mix colour from variable and alpha transparency, and with solutions that include rgba() function you get an error like

      background-color: rgba(#{$color}, 0.3);
                       ^
      $color: #002366 is not a color.
   ╷
   │       background-color: rgba(#{$color}, 0.3);
   │                         ^^^^^^^^^^^^^^^^^^^^

Something like this might be useful.

$meeting-room-colors: (
  Neumann: '#002366',
  Turing: '#FF0000',
  Lovelace: '#00BFFF',
  Shared: '#00FF00',
  Chilling: '#FF1493',
);
$color-alpha: EE;

@each $name, $color in $meeting-room-colors {

  .#{$name} {

     background-color: #{$color}#{$color-alpha};

  }

}

View more solutions

Comments

[Rick Donohoe]

Your answer is good but appears to be unnecessarily complicated. I'm guessing the transparent shades is not relevant to my question, although can you explain what the transparent background class is about? I assume I don't need it if im not using the transparent-shades mixin?

[Rick Donohoe]

I swear I tried this AND the r,b,g functions and it didn't work. I was using dynamic colors from a Drupal back-end though which may have broken something. Still, sorted it in the end and the answer I found after further research +1

[Roman M. Koss]

@RickDonohoe, as far as i remember, z-index: 1, and transparent background is a fallback for IE<9. I think that m.Eloutafi putted that into separate class, for futher use in other needs. Watch row in answer where it starts with "From:"...

[somedirection]

BUT, what's the hex equivalent of #($color + $opacity)? - this might be useful. doable?

[Mike Kormendy]

I like this! Great for modern browser implementation.

[Richard Peck]

To the best of my knowledge, RGBA adds opacity, meaning you can see elements behind it. With standard hex, you can't do this.

[MMachinegun]

as a side note: the $amount is how much it will subtract, not the value you want to set

[Patrick Mencias-lewis]

Worked great except the amount seems to be the inverse meaning you want to make it 90% transparent to get the result .1

[RayViljoen]

Thanks. Would've never thought to try hex on rgba !

[lbartolic]

Better to use rgba($color, $alpha) like rgba(#000000, 0.6) as the result is the same and there is no need to reinvent the wheel. ;)

[tobybot]

bizarre. nobody who hadn't read the documentation would ever suspect there's a "transparentize" function. very helpful though, thank you!

[Ryan]

Great answer. This should be the accepted answer. Thanks. $colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5); worked for me.