Skip to content

Instantly share code, notes, and snippets.

@the-ge
Forked from deeperton/rgba-to-hex.sass
Created March 28, 2025 13:18
Show Gist options
  • Save the-ge/56c8adbdd1eb5307ef3d381833b3c00f to your computer and use it in GitHub Desktop.
Save the-ge/56c8adbdd1eb5307ef3d381833b3c00f to your computer and use it in GitHub Desktop.
Converter RGBA() to #HEX color with applying alpha-channel + additional opacity
// converter rgba(r, g, b, a) color to #HEX string without alpha channel,
// with optional applying afterwards opacity ($opacity)
// by default alpha channel for rgba-color is applying against white background,
// but you can change it by setting third argumnet ($background)
@function rgba-to-rgb($rgba, $opacity: 0, $background: #fff) {
@if $opacity > 0 {
@if $opacity < 1 {
$opacity: $opacity * 100
}
@return mix(mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%), rgb(255,255,255), $opacity)
}
@return mix(rgb(red($rgba), green($rgba), blue($rgba)), $background, alpha($rgba) * 100%)
}
// by this function you can calc next color composition to real colors:
// opacity: 0.12;
// background-color: rgba(0, 0, 0, 0.87);
p {
$rgba-color: rgba(0, 0, 0, .87) ;
color: rgba-to-rgb($rgba-color); // #212121
// applying 12% opacity to that color
background-color: rgba-to-rgb($rgba-color, 12); //E4E4E4
// is also possible to use .12
background-color: rgba-to-rgb($rgba-color, .12); //E4E4E4
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment