Sass/Compass - Convert Hex, Rgb, or Named Color to Rgba

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

SASS Simple function to convert HEX color into RGB as a string without alpha

You can write the function like this:

@use "sass:color";
@function hex2rgb($hex) {
  @return red($hex), green($hex), blue($hex);
}

But the problem is sass could not parse the variables for html custom properties.
So this line --color-body-bg-light: $color-bg-light; won't work.

At the end, you will get this:

:root {
  --color-body-bg-light: $color-bg-light;
  --color-body-bg-light-rgb: $color-bg-light-rgb;
}

how to stop compass for converting rgba format to hex format

Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.
If you want to absolute format, then you have to turn into string
For example : -
In scss variable file

$mercury-grey: #{'rgba(230, 230, 230, 1)'};

Input

.class {
    color: $mercury-grey;
}

Output:-
.class {
    color: rgba(230, 230, 230, 1);
}

Sass/Compass Mixin For Determining Color After Opacity/RGBA

To ensure that you're always working with positive numbers, you want to use the abs() function:

@return rgba(abs($r1), abs($g1), abs($b1), $desiredAlpha);

Why does Sass change the format of my colors?

How Sass treats colors varies depending on what version you're using. But there are a few common behaviors:

• Sass will always maximize backwards compatibility whenever possible. Since keyword, hex, and rgba have the broadest browser support, all colors will be converted to one of those 3 formats, prioritizing towards either the keyword or hex. The rgba format will only be used if the color has alpha transparency (if you specify rgba(0, 0, 0, 100), Sass will convert it to either black or #000)
• If Sass has to choose between using the keyword or hex formats, the one it will use will depend on the output settings. The compact or compressed modes will always convert to hex, the other formats will use the keyword.
• Sass will convert hex colors to their 3-digit format in compressed mode (eg. #000000 will be output as #000).

Sass 3.3 and older

Sass only converts colors when they are used as variables or if they are not in one of the 3 formats as described above:

$color-hex: #000000;
$color-keyword: black;
$color-rgb: rgb(0, 0, 0);
$color-hsl: hsl(0, 0, 0);

.box-hex {
    color: $color-hex;
    background: #000000;
}

.box-keyword {
    color: $color-keyword;
    background: black;
}

.box-rgb {
    color: $color-rgb;
    background: rgb(0, 0, 0);
}

.box-hsl {
    color: $color-hsl;
    background: hsl(0, 0, 0);
}

Output:

.box-hex {
  color: black;
  background: #000000;
}

.box-keyword {
  color: black;
  background: black;
}

.box-rgb {
  color: black;
  background: black;
}

.box-hsl {
  color: black;
  background: black;
}

Sass 3.4 and later

The only change from 3.3 to 3.4 is that when using variables, Sass will preserve the format of your color... unless it is in something other than the keyword, hex, or rgba formats.

.box-hex {
  color: #000000;
  background: #000000;
}

But what if I really need a specific format?

If you absolutely must have a specific format, you can turn it into a string:

$color: #{'#F00'}; // or `unquote('#F00')`
.foo {
    color: $color;
}

Output:

.foo {
  color: #F00;
}

Just keep in mind that when you do this, your "color" will not work with color manipulation functions like lighten() or darken().

Print out current color hex value and variable name in sass color map

You can't. Variables don't work that way (not in Sass or any other language I am aware of). A variable is just a reference to a value, it doesn't understand what its name is. The only thing you can do is use a mapping (or list of lists for Sass versions older than 3.3).

$colors-list: (
  brand: yellow,
  secondary: blue,
  accent: green,
  base: orange,
  alert: purple,
  error: red
  );

@each $name, $color in $colors-list {
    .color-#{$name} { 
        background-color: $color;
        color: white;
        float: left;
        height: 100px;
        margin: 5px;
        position: relative;
        width: 100px;
      &:after {
          content: "hex value is #{$color} var name is #{$name}";
          position: absolute;
          top: 0;
          left: 0;
          z-index: 9999;
        }
    }
}

Can I turn off SASS RGB - Color Name

By default, Sass will not convert literal color values from their hex values unless you are forcing Sass to interpolate with #{} or a variable.

Using interpolation will return the "to_sass" version of the value you're interested in. For example, #{ #fff } will interpolate to "white". This also happens during variable replacements: color literals are translated to Color objects when used as variables, then "to_sass"ed into your stylesheet.

Furthermore, you may specify the style option compressed, which will return the less byte-length version (i.e. red instead of #f00). Since white is 5 characters long and #fff is only 4, your rule will replace with #fff instead.

There is no way to turn off the reverse HTML4 color name conversion when using variables. As a work-around, you can declare color variables as a string, then use then in styles with the unquote() function.

$color: '#fff';
.white { color: unquote($color) }

---

Related Topics