<div class="primary-box">
  This is primary box
</div>
<div class="secondary-box">
  This is Secondary box
</div>
@function text-contrast($n, $w, $b) {
  $color-brightness: round((red($n) * 299) + (green($n) * 587) + (blue($n) * 114) / 1000);
  $light-color: round((red(#ffffff) * 299) + (green(#ffffff) * 587) + (blue(#ffffff) * 114) / 1000);
  
  @if abs($color-brightness) < ($light-color/2){
    @return $w;
  }

  @else {
    @return $b;
  }
}

$color-primary: #cde8e7;
$color-secondary: #368fa4;
$text-light: #e8e6e6;
$text-dark: #03525b;

$text-primary: text-contrast($color-primary, $text-light, $text-dark);
$text-secondary: text-contrast($color-secondary, $text-light, $text-dark);

@mixin primary() {
  background: $color-primary;
  color: $text-primary;
}

@mixin secondary() {
  background: $color-secondary;
  color: $text-secondary;
}

.primary-box {
  @include primary;
  height: 100px;
  width: 250px;
}

.secondary-box {
  @include secondary;
  height: 100px;
  width: 250px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.