yckart/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <a class="button button--gold">Pushy</a>
  <a class="button button--crimson">Hazey</a>
  <hr>
  <a class="button button--gold">Gold</a>
  <a class="button button--crimson">Crimson</a>
  <a class="button button--indigo">Indigo</a>
  <a class="button button--yellowgreen">Yellowgreen</a>
  <a class="button button--deepskyblue">Deepskyblue</a>
</body>
</html>

## index.scss
/**
 * Compute the brightness of a color.
 *
 * @param color $color
 * @see http://compass-style.org/reference/compass/utilities/color/brightness/
 */
@function brightness($color) {
  @return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
}


/*
 * Calculates the sRGB luma of a colour.
 *
 * Math nicked from a great Thoughtbot article by Reda Lemeden:
 * http://robots.thoughtbot.com/closer-look-color-lightness
 */
@function luma($c) {
  $-local-red: red(rgba($c, 1.0));
  $-local-green: green(rgba($c, 1.0));
  $-local-blue: blue(rgba($c, 1.0));

  @return (0.2126 * $-local-red  +
           0.7152 * $-local-green +
           0.0722 * $-local-blue) / 255;
}


/**
 * Picks a colour from two options based on which one is more visible
 * on the given background colour.
 *
 * @param color $bg Elements background color
 * @param color $c1 Primary color
 * @param color $c2 Secondary color
 * @example pick-visible-color($bg-color, $color-1, $color-2);
 * @see https://lnikki.la/articles/sass-better-colour-based-on-brightness/
 */
@function pick-visible-color($bg, $c1, $c2) {
  $bg-luma: luma($bg);
  $c1-luma: luma($c1);
  $c2-luma: luma($c2);

  $c1-diff: abs($bg-luma - $c1-luma);
  $c2-diff: abs($bg-luma - $c2-luma);

  @return if($c1-diff > $c2-diff, $c1, $c2);
}


@function pick-scaled-color($color, $scale: 65%) {
  @return pick-visible-color($color,
    scale-color($color, $lightness: $scale),
    scale-color($color, $lightness: -$scale)
  );
}


// variables/_colors.scss
$colors: gold, crimson, indigo, yellowgreen, deepskyblue;


// elements/_buttons.scss
.button {
  display: inline-block;
  padding: 0.5em;

  @each $color in $colors {
    &--#{$color} {
      color: pick-scaled-color($color);
      background-color: $color;
    }
  }
}


// index.scss
body {
  padding: 0;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<a class="button button--gold">Pushy</a>
	<a class="button button--crimson">Hazey</a>
	<hr>
	<a class="button button--gold">Gold</a>
	<a class="button button--crimson">Crimson</a>
	<a class="button button--indigo">Indigo</a>
	<a class="button button--yellowgreen">Yellowgreen</a>
	<a class="button button--deepskyblue">Deepskyblue</a>
	</body>
	</html>
	/**
	* Compute the brightness of a color.
	*
	* @param color $color
	* @see http://compass-style.org/reference/compass/utilities/color/brightness/
	*/
	@function brightness($color) {
	@return (red($color) * 0.299 + green($color) * 0.587 + blue($color) * 0.114) / 255 * 100%;
	}


	/*
	* Calculates the sRGB luma of a colour.
	*
	* Math nicked from a great Thoughtbot article by Reda Lemeden:
	* http://robots.thoughtbot.com/closer-look-color-lightness
	*/
	@function luma($c) {
	$-local-red: red(rgba($c, 1.0));
	$-local-green: green(rgba($c, 1.0));
	$-local-blue: blue(rgba($c, 1.0));

	@return (0.2126 * $-local-red +
	0.7152 * $-local-green +
	0.0722 * $-local-blue) / 255;
	}


	/**
	* Picks a colour from two options based on which one is more visible
	* on the given background colour.
	*
	* @param color $bg Elements background color
	* @param color $c1 Primary color
	* @param color $c2 Secondary color
	* @example pick-visible-color($bg-color, $color-1, $color-2);
	* @see https://lnikki.la/articles/sass-better-colour-based-on-brightness/
	*/
	@function pick-visible-color($bg, $c1, $c2) {
	$bg-luma: luma($bg);
	$c1-luma: luma($c1);
	$c2-luma: luma($c2);

	$c1-diff: abs($bg-luma - $c1-luma);
	$c2-diff: abs($bg-luma - $c2-luma);

	@return if($c1-diff > $c2-diff, $c1, $c2);
	}


	@function pick-scaled-color($color, $scale: 65%) {
	@return pick-visible-color($color,
	scale-color($color, $lightness: $scale),
	scale-color($color, $lightness: -$scale)
	);
	}


	// variables/_colors.scss
	$colors: gold, crimson, indigo, yellowgreen, deepskyblue;


	// elements/_buttons.scss
	.button {
	display: inline-block;
	padding: 0.5em;

	@each $color in $colors {
	&--#{$color} {
	color: pick-scaled-color($color);
	background-color: $color;
	}
	}
	}


	// index.scss
	body {
	padding: 0;
	}