Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

Question

This may be Compass 101, but has anyone written a mixin which sets the alpha value of a color? Ideally, I would like the mixin to take any form of color definition, and apply transparency:

@include set-alpha( red, 0.5 );          //prints rgba(255, 0, 0, 0.5);
@include set-alpha( #ff0000, 0.5 );      //prints rgba(255, 0, 0, 0.5);
@include set-alpha( rgb(255,0,0), 0.5 ); //prints rgba(255, 0, 0, 0.5);

score 197 · Accepted Answer · edited Jan 05 '17 at 06:23

197

Use the rgba function built into Sass

Sets the opacity of a color.

Examples:

rgba(#102030, 0.5) => rgba(16, 32, 48, 0.5)
rgba(blue, 0.2) => rgba(0, 0, 255, 0.2)

Parameters:
(Color) color
(Number) alpha — A number between 0 and 1

Returns:
(Color)

Code:

rgba(#ff0000, 0.5); // Output is rgba(255,0,0,0.5);

edited Jan 05 '17 at 06:23

Hossein

3,755
2
29
39

answered Feb 14 '12 at 18:51

maxbeatty

9,050
3
33
36

@jon can you elaborate on what was confusing about my answer so I can improve it? – maxbeatty May 22 '13 at 00:01
@maxbeatty i'm not sure what happened to my comment but i was confused by the "==>" ... it seems obvious in hindsight, but when you're feeling lost it's really hard to tell required code from comments. i guess it could be made more clear by only include actual usable code in the code blocks. – jon May 25 '13 at 20:24
@jon the blockquote is directly from the Sass documentation. Instead of just linking to the relevant built-in function. I thought it would be helpful to include the related documentation in the answer. Sorry this was confusing. – maxbeatty May 26 '13 at 17:44
1

Note that this doesn't work if you use an alpha value of 255. `rgba(#123456, 255)` results in `#123456` and doesn't convert the color to the rgba format. – Axel Montini Sep 21 '18 at 14:53
A more semantic way of doing this is to use `change-color()` ([docs](https://sass-lang.com/documentation/functions/color#change-color)), e.g.: `change-color( red, $alpha: 0.5 )`. Note that this will *set* the alpha to 50% (to increase or decrease the alpha of a color that already has some amount of transparency, use `scale-color` which takes a percentage.) This is my preferred notation because I don't like to design with RGB. – Fabien Snauwaert Jun 14 '19 at 07:52

score 14 · Answer 2 · answered Feb 18 '19 at 15:14

The rgba function doesn't work on color with no transparency, it returns an hex again. After all, it's not meant to transform hex to rgba, we're just making profit out of hex doesn't allow alpha (yet).

rgba(#fff, 1) // returns #fff

So, I made al little functions that buils the rgb string. I don't need to deal with transparencies for now.

@function toRGB ($color) {
    @return "rgb(" + red($color) + ", " + green($color) + ", " + blue($color)+ ")";
}

score 8 · Answer 3 · answered Feb 14 '12 at 18:58

I use the rgbapng compass plugin

rgbapng is a Compass plugin for providing cross-browser* compatible RGBA support. It works by creating single pixel alpha-transparent PNGs on the fly for browsers that don't support RGBA. It uses the pure Ruby ChunkyPNG library resulting in hassle-free installation and deployment.

Install

gem install compass-rgbapng

Usage

@include rgba-background(rgba(0,0,0,0.75));

Compiles to:

background: url('/images/rgbapng/000000bf.png?1282127952');
background: rgba(0, 0, 0, 0.75);

score 2 · Answer 4 · answered Jun 20 '13 at 03:59

2

There's also ie-hex-str() for IE's ##AARRGGBB format:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str(#fdfdfd)}', endColorstr='#{ie-hex-str(#f6f6f6)}',GradientType=0); /* IE6-9 */

answered Jun 20 '13 at 03:59

mikespainhower

29
1

score 2 · Answer 5 · edited Jul 15 '14 at 14:07

2

from_hex(hex_string, alpha = nil);

From the documentation:

Create a new color from a valid CSS hex string. The leading hash is optional.

edited Jul 15 '14 at 14:07

Andrew Schuster

3,229
2
21
32

answered Jul 15 '14 at 14:00

user776411

76
2

1

The link is broken :-( I got 404 – KargWare Sep 20 '22 at 17:37

score 1 · Answer 6 · answered Jan 11 '22 at 23:13

SASS scale-color() will do this in a flexible way: e.g. color: #{scale-color( $primary, $alpha: -50% )};. Full reference here.

Note that if the initial color ($primary in this example) is a solid color (with no transparency), then the $alpha value must be a negative value (up to -100%) to add transparency.

score 1 · Answer 7 · answered Jul 07 '22 at 01:59

1

In my case, rgba doesn't allow hex.

So, I use a transparentize which decreases the alpha channel.

.blue-background {
  background: transparentize(var.$color-my-blue, .8);
}

answered Jul 07 '22 at 01:59

yeop

29
7

This answer should be higher up. Transparentise is the only solution that works for me. – Tesla Apr 26 '23 at 06:56

Sass/Compass - Convert Hex, RGB, or Named Color to RGBA

7 Answers7

Linked

Related