Sass - Converting Hex to Rgba for Background Opacity

Sass - Converting Hex to RGBa for background opacity

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

Is it possible to assign opacity to a SCSS hex color variable, re using that variable?

Here you go...

WRONG:

$first-with-opacity: rgba($color: $first-color, alpha: 0.05);

CORRECT:

$first-with-opacity: rgba($first-color, 0.05);

Converting hex color code, to rgba and fetching the red value

There are some SASS default color functions you could use.

Please check red(), green() and blue().

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

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

How to give opacity to a color with hex value in css?

You may use this way to convert the transparent for your current hex colour

For example, you want to set 40% alpha transparency to #000000 (black colour), you need to add 66 like this #66000000. The format is #AARRGGBB so you could use a format like #1C00ff00.

You could also check the full table hex -> transparent colour here
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

---

Related Topics