270

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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Rick Donohoe
  • 7,081
  • 6
  • 26
  • 38

6 Answers6

501

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" */
Daniel Werner
  • 1,350
  • 16
  • 26
hopper
  • 13,060
  • 7
  • 49
  • 53
  • 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 – Rick Donohoe Jun 08 '12 at 08:11
  • 1
    BUT, what's the hex equivalent of #($color + $opacity)? - this might be useful. doable? – somedirection Dec 10 '14 at 16:56
  • 3
    To the best of my knowledge, RGBA adds *opacity*, meaning you can see elements behind it. With standard `hex`, you can't do this. – Richard Peck Nov 20 '15 at 21:56
  • Thanks. Would've never thought to try hex on **rgb**a ! – RayViljoen Apr 26 '17 at 09:26
  • 4
    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. ;) – lbartolic Jul 14 '17 at 12:30
166

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)

ᴍᴀᴛᴛ ʙᴀᴋᴇʀ
  • 2,754
  • 1
  • 26
  • 39
user3631047
  • 3,256
  • 5
  • 23
  • 34
  • 31
    as a side note: the $amount is how much it will subtract, not the value you want to set – MMachinegun Dec 08 '15 at 12:35
  • 4
    Worked great except the amount seems to be the inverse meaning you want to make it `90%` transparent to get the result `.1` – Patrick Mencias-lewis Dec 31 '15 at 14:51
  • Great answer. This should be the accepted answer. Thanks. `$colorTheme: hsl(289, 65%, 47%); $crossOutColor: transparentize($colorTheme, 0.5);` worked for me. – Ryan Mar 25 '20 at 16:31
70

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.

Reggie Pinkham
  • 11,985
  • 4
  • 38
  • 36
5

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);
m.Elouafi
  • 159
  • 1
  • 4
  • 5
    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 Jun 07 '12 at 10:18
  • @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:"... – Roman M. Koss Sep 30 '13 at 03:25
1

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

  }

}
Vojtech
  • 2,756
  • 2
  • 19
  • 29
0

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

Jean Claveau
  • 1,101
  • 1
  • 13
  • 15