dash-website/_sass/_colors.scss

// brand colors
$black:		#2f2f2f;
$white:		#ffffff;
$blue:		#1c75bc;

// site colors
$red:		#ec2227;
$green:		#1dd68a;
$gray:		#f0f0f0;
$dark-blue:	#0b3b5a;

// for the style guide:

@function contrast-color($color, $dark, $light) {
  @if (lightness(scale-color($color, $green: 50%)) > 50) { // Green is perceptually about twice as bright as other primary colors
    @return $dark; // Lighter backgorund, return dark color
  } @else {
    @return $light; // Darker background, return light color
  }
}

$color:
  ('black', $black),
  ('white', $white),

  ('blue', $blue),
  ('red', $red),
  ('green', $green),

  ('gray', $gray),
  ('dark-blue', $dark-blue);

@each $name, $bgcolor in $color {
  .color__tile--#{$name}-bg {
    background-color: $bgcolor;
    color: contrast-color($bgcolor, #000, #fff);
    box-shadow: 0 0 10px -4px contrast-color($bgcolor, #000, #fff);
  }
}