Converting HEX to RGBa

Question

I want to convert HEX color in RGB, but searching on the web I understood that I can do it with SASS but only with RGBa.

So consider this code:

@mixin hex-rgba($hexcolor, $opacity) {
  background-color: rgba($hexcolor, $opacity); 
}

div {
  @include hex-rgba(#333333, .3);
}

It returns:

div {
  background-color: rgba(51, 51, 51, 0.3);
}

But if i set alpha to 1 (or 100%) it returns the hex value:

div {
  @include hex-rgba(#333333, 1);
}

div {
  background-color: #333333;
}

How can I obtain the rgba value even if alpha is 100%?

In a way like

div {
  background-color: rgba(51, 51, 51, 1);
}

SOLVED

@function rgb($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgb(#{$red},#{$green},#{$blue})");
}

:root {
  --color: #{rgb(#ffffff)};
}

If someone provides an answer to your question, you should accept their answer instead of updating the question with the solution. — Ryan Wheale, Jan 08 '21 at 18:24

Chandra Shekhar · Answer 1 · 2019-03-23T05:26:17.120

2

Try This Code

 @mixin hex-rgba($hexcolor, $opacity) {
  @if $opacity == 1 or $opacity == 100% {

  background-color:hex($hexcolor);
  }
  @else {
   background-color: rgba($hexcolor, $opacity);
  }
}


@function hex($hexcolor){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
}

div {
  @include hex-rgba(#333333, 0.2);
}

TRY THIS UPDATED CODE

@function hex($hexcolor,$opacity){
  $red:red($hexcolor);
  $green:green($hexcolor);
  $blue:blue($hexcolor);
  $alpha:alpha($hexcolor);
  @if $opacity == 1 or $opacity == 100% {
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$alpha})");
  }
  @else{
    @return unquote("rgba(#{$red},#{$green},#{$blue},#{$opacity})");
  }
}

body {
  background-color:#{hex(#333333,0.5)};
}

:root {
  --color: #{hex(#ff0000,1)};
}
div{
  height:50px;
  width: 50px;
  background-color: var(--color);
}

Working Fiddle For Updated Code

Also You can try on Sassmeister

Working Fiddle OLD

Sassmeister

edited Mar 23 '19 at 05:26

answered Mar 21 '19 at 09:50

Chandra Shekhar

3,550
2
14
22

What if I want to use the function for a CSS var declaration? https://codepen.io/acespace90/pen/zbyKNz – antonio matera Mar 22 '19 at 11:35
@antoniomatera, Please Find the updated code block. Is this what you need? – Chandra Shekhar Mar 23 '19 at 05:27
Based on your function, I tried to use with variables, but without success. Could you help with this example number "four": https://jsfiddle.net/Allan_Andrade/ws4kmyj5/20/ – Allan Andrade Jan 05 '22 at 12:13
@AllanAndrade check this post https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables – Chandra Shekhar Jan 05 '22 at 15:10

score 1 · Answer 2 · edited Jan 08 '21 at 18:21

In case anyone is looking to switch color theme with scss.

NEW METHOD (no need for functions or new variables.)

credits: https://stackoverflow.com/a/56951626/11685855

.div {
  background-color: var(--body-color);
}

.div::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  background-color: var(--body-color);
  opacity: 0.5;
}

OLD METHOD(using function)

// To convert hex to RGB codes.
@function hexToRGB($hex) {

      @return red($hex), green($hex), blue($hex); // Plain comma seperated RGB values.
     
}

$body-color: #fefbfb; // Light Theme
$body-color-d: #0f111a; // Dark Theme

:root {
  --body-color-rgb: #{hexToRGB($body-color)}; // Calling 
}

body.dark{
  --body-color: #{$body-color-d};
}

body {
  background-color: var(--body-color);
}

.div {
  background-color: rgba(var(--body-color-rgb), 0.9);
}

Credits: https://medium.com/techhive-io/how-to-use-css-variables-with-sass-mixins-671e1f6067b3

Summary: Alpha doesnt work with root hex variables in rgba. Eg: rgba(var(--body-color) ,1) but rgba(#fefbfb, 1) does. But theme switching isn't possible this way. Read the above article for more information.

score 0 · Answer 3 · answered Mar 21 '19 at 09:52

0

If you want only RGB, try to use this

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

color: toRGB(#ffffff); /* returns color: rgb(255, 255, 255)*/

answered Mar 21 '19 at 09:52

TOMBA

205
1
11

This looks good but what if I want to use this function for css var? See here https://codepen.io/acespace90/pen/zbyKxN – antonio matera Mar 22 '19 at 11:26
Why would you like to use CSS variables when you can use variables from SASS ? All you have to do is: `$primary: toRGB(#ffffff);` and then for example `background: $primary` – TOMBA Mar 22 '19 at 13:05
1

because i want to switch color theme of my web app ;-) – antonio matera Mar 22 '19 at 13:40

Converting HEX to RGBa

3 Answers3

NEW METHOD (no need for functions or new variables.)

OLD METHOD(using function)