Skip to content

Instantly share code, notes, and snippets.

@taupecat taupecat/_get-color.scss
Last active Sep 14, 2019

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

bishless commented Sep 5, 2019

So many fistbumps. This is great work!

@taupecat

This comment has been minimized.

Copy link
Owner 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
You can’t perform that action at this time.