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?

Merari

Answer 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" */

Demurrer

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 – Merari

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

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

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

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. ;) – Puberty

I tried this things for box-shadow but it not working, can you suggest solution for that – Celiotomy

Answer 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)

Hooch

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

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

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

Answer 3

Use SASS’s 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.

Wheelock

Answer 4

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

// Transparent Background
// From: https://mcmap.net/q/110470/-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);

Deodorant

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? – Merari

@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:"... – Malayan

Answer 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};

  }

}

Sawn

Answer 6

You can use PostCSS with its postcss-rgb plugin which enables hex support in rgba() rules: arpadHegedus/postcss-rgb

Fronde