SASS: convert RGBa back to hex? - css

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

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 2

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 3

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