BDM Color Scheme

SassMeister-input-HTML.html

<div class="box primary  "></div>
<div class="box secondary"></div>
<div class="box bprimary "></div>
<div class="box bsecondary "></div>
<div class="box btertiary"></div>
<div class="box danger   "></div>
<div class="box light    "></div>
<div class="box dark     "></div>
<div class="box pureWhite"></div>
<div class="box favorite "></div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

@function text-color($color) {
  @if (lightness($color) > 50) {
    @return #000000; // Lighter backgorund, return dark color
  } @else {
    @return #ffffff; // Darker background, return light color
  }
}

$colors: (
  primary:    #FF0080,  // bright pink  db017c??
  secondary:  #B12576,  // dark pink
  bprimary:   #2196F3,  // bright blue
  bsecondary: #1565C0,  // dark blue
  btertiary:  #64B1FF,   // also bright blue
  danger:     #de4f5d,  // red
  light:      #f4f4f4,
  dark:       #081A3D,
  pureWhite:  #ffffff,
  favorite:   #FFD800,
  medGray:    #818181,  // med gray
);

@each $name, $bgcolor in $colors  {
   .#{$name}  {
      background: $bgcolor;
      &:after {
        content: "#{$name}";
        color: text-color($bgcolor);
      }
    }
 }
 .box {
   padding: 10px;
   width: 100px;
   float: left;
   margin-right: 10px;
 }
 

SassMeister-output.css

.primary {
  background: #FF0080;
}
.primary:after {
  content: "primary";
  color: #ffffff;
}

.secondary {
  background: #B12576;
}
.secondary:after {
  content: "secondary";
  color: #ffffff;
}

.bprimary {
  background: #2196F3;
}
.bprimary:after {
  content: "bprimary";
  color: #000000;
}

.bsecondary {
  background: #1565C0;
}
.bsecondary:after {
  content: "bsecondary";
  color: #ffffff;
}

.btertiary {
  background: #64B1FF;
}
.btertiary:after {
  content: "btertiary";
  color: #000000;
}

.danger {
  background: #de4f5d;
}
.danger:after {
  content: "danger";
  color: #000000;
}

.light {
  background: #f4f4f4;
}
.light:after {
  content: "light";
  color: #000000;
}

.dark {
  background: #081A3D;
}
.dark:after {
  content: "dark";
  color: #ffffff;
}

.pureWhite {
  background: #ffffff;
}
.pureWhite:after {
  content: "pureWhite";
  color: #000000;
}

.favorite {
  background: #FFD800;
}
.favorite:after {
  content: "favorite";
  color: #ffffff;
}

.medGray {
  background: #818181;
}
.medGray:after {
  content: "medGray";
  color: #000000;
}

.box {
  padding: 10px;
  width: 100px;
  float: left;
  margin-right: 10px;
}

SassMeister-rendered.html

<div class="box primary  "></div>
<div class="box secondary"></div>
<div class="box bprimary "></div>
<div class="box bsecondary "></div>
<div class="box btertiary"></div>
<div class="box danger   "></div>
<div class="box light    "></div>
<div class="box dark     "></div>
<div class="box pureWhite"></div>
<div class="box favorite "></div>