SASS: convert RGBa back to hex?

Question

I am aware SCSS can convert Hex to RGBa, but is there an option for the opposite?

My situation is this: I am given a colour palette that I am not allow to change. This includes a solid accent colour:

$color-accent: #039B15;

I've been asked to use this as a pale background colour, with 80% opacity. That's easy, I can just use rgba():

$color-accent-bg: rgba($color-accent, .2);

However, there is a situation where I need to nest elements with the same opaque background colour - because the colours are opaque they darken when nested.

Is there a way I can convert $color-accent-bg back to hexidecimal with SASS?

Ps: tried using lighten() but that seems to only work up to 66% light.

Answer 1

Convert RGBa to Hex(transparent. no background, 8-bit color).

Tested solution i have written this code in scss and then converted to sass

In your Scss put:

// convert string to number
@function to-number($value) {
  @if type-of($value) == 'number' {
    @return $value;
  } @else if type-of($value) != 'string' {
    @error 'Value for `to-number` should be a number or a string.';
  }

  $result: 0;
  $digits: 0;
  $minus: str-slice($value, 1, 1) == '-';
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);

  @for $i from if($minus, 2, 1) through str-length($value) {
    $character: str-slice($value, $i, $i);

    @if (index(map-keys($numbers), $character) or $character == '.') {
      @if $character == '.' {
        $digits: 1; 
      } @else if $digits == 0 {
        $result: $result * 10 + map-get($numbers, $character);  
      } @else {
        $digits: $digits * 10;
        $result: $result + map-get($numbers, $character) / $digits;
      }
    }
  }

  @return if($minus, -$result, $result);;
}


@function decimal-round ($number, $digits: 0, $mode: round) {
  $n: 1;
  // $number must be a number
  @if type-of($number) != number {
      @warn '#{ $number } is not a number.';
      @return $number;
  }
  // $digits must be a unitless number
  @if type-of($digits) != number {
      @warn '#{ $digits } is not a number.';
      @return $number;
  } @else if not unitless($digits) {
      @warn '#{ $digits } has a unit.';
      @return $number;
  }
  @if $digits > 0 {
      @for $i from 1 through $digits {
          $n: $n * 10;
      }
  }
  @if $mode == round {
      @return round($number * $n) / $n;
  } @else if $mode == ceil {
      @return ceil($number * $n) / $n;
  } @else if $mode == floor {
      @return floor($number * $n) / $n;
  } @else {
      @warn '#{ $mode } is undefined keyword.';
      @return $number;
  }
}


@function rgba-to-hex($rgba){
  $colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F');
  
  // 255 / 100 = 2.55
  // 10 / 16 = 0.625

  $alpha: alpha($rgba);

  // ============================================= RED ================================
  $redStr: ''+(red($rgba) / 16);

  $index: str-index($redStr, ".");
  // add decimal number incase it does not have and update index
  @if $index == null { $redStr: $redStr+'.0'; $index: str-index($redStr, ".");};

  // @debug $redStr '========================================================';

  $redInteger :  to-number(str-slice($redStr, 0, $index - 1));
  $redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1,  $index + 1)) / 0.625);


  // ============================================= GREEN ============================
  $greenStr: ''+(green($rgba) / 16);


  $index: str-index($greenStr, ".");
  // add decimal number incase it does not have and
  @if $index == null { $greenStr: $greenStr+'.0'; $index: str-index($greenStr, ".");};

  $greenInteger :  to-number(str-slice($greenStr, 0, $index - 1));
  $greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1,  $index + 1)) / 0.625);



  // ============================================= BLUE ============================  
  $blueStr: ''+(blue($rgba) / 16);

  $index: str-index($blueStr, ".");
  // add decimal number incase it does not have and
  @if $index == null { $blueStr: $blueStr+'.0'; $index: str-index($blueStr, ".");};

  $blueInteger :  to-number(str-slice($blueStr, 0, $index - 1));
  $blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1,  $index + 1)) / 0.625) ;

  
  // if interger is 16 sent decimal should be 0

  //@debug 'blue: '+ $blueStr +'  interter: '+ $blueInteger +' decimal: '+ $blueDecimal;
  // $blue:  blue($rgba) / 2.55;

  // ============================================= ALPHA ============================  
  $alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16) ;

  $index: str-index($alphaStr, ".");
  
  @if $index == null { $alphaStr: $alphaStr+'.0'; $index: str-index($alphaStr, ".");};

  //@debug 'alphaStr: '+ decimal-round(to-number($alphaStr))  ;

  $alphaInteger :  ''+to-number(str-slice($alphaStr, 0, $index - 1));

  $index: str-index($alphaInteger, ".");
  @if $index == null { $alphaInteger: $alphaInteger+'.0'; $index: str-index($alphaInteger, ".");};
  $alphaInteger :  to-number(str-slice($alphaStr, 0, $index - 1));

  $alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2)) ;


  // @debug 'Integer: ==== '+$alphaInteger;
  // @debug 'Decimal: ==== '+$alphaDecimal;
  

  @return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1));
};

Usage

$result : rgba-to-hex( rgba(192, 84, 84, 0.582));
@debug $result;

.my-class{
  background-color: rgba-to-hex( rgba(192, 84, 84, 0.582));
}

OutPut

Terminal:

#C0535390

css build file:

.my-class{
  background-color: #C0535390;
}

In your sass file put:

@function to-number($value) 
  @if type-of($value) == 'number' 
    @return $value
  @else if type-of($value) != 'string' 
    @error 'Value for `to-number` should be a number or a string.'
  

  $result: 0
  $digits: 0
  $minus: str-slice($value, 1, 1) == '-'
  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9)

  @for $i from if($minus, 2, 1) through str-length($value) 
    $character: str-slice($value, $i, $i)

    @if (index(map-keys($numbers), $character) or $character == '.') 
      @if $character == '.' 
        $digits: 1 
      @else if $digits == 0 
        $result: $result * 10 + map-get($numbers, $character)  
      @else 
        $digits: $digits * 10
        $result: $result + map-get($numbers, $character) / $digits
      
  @return if($minus, -$result, $result)




@function decimal-round ($number, $digits: 0, $mode: round) 
  $n: 1

  @if type-of($number) != number
      @warn '#{ $number } is not a number.'
      @return $number
  
  // $digits must be a unitless number
  @if type-of($digits) != number 
    @warn '#{ $digits } is not a number.'
    @return $number
  @else if not unitless($digits) 
    @warn '#{ $digits } has a unit.'
    @return $number
  
  @if $digits > 0 
    @for $i from 1 through $digits 
        $n: $n * 10
      
  
  @if $mode == round
    @return round($number * $n) / $n
  @else if $mode == ceil 
    @return ceil($number * $n) / $n
  @else if $mode == floor 
    @return floor($number * $n) / $n
  @else
    @warn '#{ $mode } is undefined keyword.'
    @return $number
  



@function rgba-to-hex($rgba)
  $colorCode: ( '0','1', '2','3','4','5','6','7','8','9','A','B','C','D','E', 'F')
  
  // 255 / 100 = 2.55
  // 10 / 16 = 0.625

  $alpha: alpha($rgba)

  // ============================================= RED ================================
  $redStr: ''+(red($rgba) / 16)

  $index: str-index($redStr, ".")
  // add decimal number incase it does not have and update index
  @if $index == null  
    $redStr: $redStr+'.0' 
    $index: str-index($redStr, ".")



  $redInteger :  to-number(str-slice($redStr, 0, $index - 1))
  $redDecimal: decimal-round(to-number(str-slice($redStr, $index + 1,  $index + 1)) / 0.625)


  // ============================================= GREEN ============================
  $greenStr: ''+(green($rgba) / 16)


  $index: str-index($greenStr, ".")
  // add decimal number incase it does not have and
  @if $index == null 
    $greenStr: $greenStr+'.0' 
    $index: str-index($greenStr, ".")

  $greenInteger :  to-number(str-slice($greenStr, 0, $index - 1))
  $greenDecimal: decimal-round(to-number(str-slice($greenStr, $index + 1,  $index + 1)) / 0.625)



  // ============================================= BLUE ============================  
  $blueStr: ''+(blue($rgba) / 16)

  $index: str-index($blueStr, ".")
  @if $index == null  
    $blueStr: $blueStr+'.0' 
    $index: str-index($blueStr, ".")

  $blueInteger :  to-number(str-slice($blueStr, 0, $index - 1))
  $blueDecimal: decimal-round(to-number(str-slice($blueStr, $index + 1,  $index + 1)) / 0.625) 



  // ============================================= ALPHA ============================  
  $alphaStr: ''+ decimal-round((($alpha*100)*2.55) /16) 

  $index: str-index($alphaStr, ".")
  
  @if $index == null 
    $alphaStr: $alphaStr+'.0' 
    $index: str-index($alphaStr, ".")
 

  $alphaInteger :  ''+to-number(str-slice($alphaStr, 0, $index - 1))

  $index: str-index($alphaInteger, ".")
  @if $index == null  
    $alphaInteger: $alphaInteger+'.0' 
    $index: str-index($alphaInteger, ".")

  $alphaInteger :  to-number(str-slice($alphaStr, 0, $index - 1))

  $alphaDecimal: to-number(str-slice(''+to-number(str-slice($alphaStr, $index + 1, str-length($alphaStr))) / 0.625, 0, 2)) 

  @return unquote("#"+nth($colorCode, $redInteger + 1)+nth($colorCode, $redDecimal + 1)+nth($colorCode, $greenInteger + 1)+nth($colorCode, $greenDecimal + 1) +nth($colorCode, $blueInteger + 1)+nth($colorCode, $blueDecimal + 1)+nth($colorCode, $alphaInteger + 1)+nth($colorCode, $alphaDecimal + 1))



  $result : rgba-to-hex( rgba(192, 84, 84, 0.582))
  @debug 'peter =='+$result

I didn't test the sass file i just remove the semicolon, '{' and '}'.

Answer 2

IMO simple rgba($color-accent-bg, 1) would do the trick - it returns same color as $color-accent.

Otherwise, you can use #ie_hex_str($color). It converts colors to hex string in #AARRGGBB format.

Converts a color into the format understood by IE filters.

Examples:
...
ie-hex-str(rgba(0, 255, 0, 0.5)) => #8000FF00

Since it returns string, you can remove AA part like in last line in following snippet:

$color-accent: #039B15;
$color-accent-bg: rgba($color-accent, .2);
$ie-hex: ie_hex_str($color-accent-bg);    //#33039B15
$back-to-color-accent: unquote('#' + str_slice($ie-hex, 4));    //#039B15

Answer 3

You could try #039B1580 but i believe this method doesn't work on all browsers