Skip to content

Instantly share code, notes, and snippets.

Last active March 15, 2022 21:01
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
A Sass color getter that also handles transparency
// Color names come from
// 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 );
Copy link

bishless commented Sep 5, 2019

So many fistbumps. This is great work!

Copy link

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