Skip to content

Instantly share code, notes, and snippets.

@taupecat
Last active March 15, 2022 21:01
Show Gist options
  • Save taupecat/8bf6adc0fd104d3a8f734534ef20703f to your computer and use it in GitHub Desktop.
Save taupecat/8bf6adc0fd104d3a8f734534ef20703f to your computer and use it in GitHub Desktop.
A Sass color getter that also handles transparency
// Color names come from https://www.color-blindness.com/color-name-hue/
// The color values can be any valid color format: hex, rgb, hsl, CSS color names,
// etc. But probably best _not_ to use CSS color names.
$palette: (
'black': #000,
'cornflower-blue': #55abf2,
'grey': #808080,
'fire-engine-red': #d12118,
'forest-green': #20a037,
'limeade': #56b02c,
'maya-blue': #78bffa,
'nero': #171717,
'pelorous': #2a7dc2,
'rio-grande': #bfce18,
'saffron': #f0c63b,
'silver-sand': #bcbbb8,
'smalt': #004d8d,
'white': #fff,
'wild-sand': #efedea,
);
// Get the named color from our color map, with optional opacity.
// @param string $color A named color found in our $colors map.
// @param number $opacity Desired opacity, defaulting to 1 (full opacity).
// @return color The requested color with the alpha value. Remember that "color" is a value type of its own in Sass.
@function get-color( $color, $opacity: 1 ) {
// Check to make sure the named color we requested exists in our $colors map.
@if map-has-key( $palette, $color ) {
// If so, return the color value along with the alpha channel value.
@return transparentize( map-get( $palette, $color ), 1 - $opacity );
}
// If the requested color name was not found in our map, return magenta instead
// (so it's obvious that something is wrong without completely erroring out).
@return #f0f;
}
// Usage:
a {
color: get-color( 'pelorous' );
}
.semi-transparent-background {
background: get-color( 'forest-green', 0.5 );
}
@bishless
Copy link

bishless commented Sep 5, 2019

So many fistbumps. This is great work!

@taupecat
Copy link
Author

taupecat commented Sep 6, 2019

So many fistbumps. This is great work!

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment