CI Colors - Notice Yellow (Shade vs Darken)

SassMeister-input-HTML.html

<div class="wrapper">
  
<div class="color">&nbsp;</div> 
<div class="color2">&nbsp;</div> 

</div>

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

//$gray: rgb(140, 142, 144);
//$light-gray: tint($gray, 30%);
//$dark-gray: shade($gray, 60%);

$notice-yellow: rgb(255, 210, 0);

$darken-yellow: darken($notice-yellow, 30%);
$shade-yellow: shade($notice-yellow, 30);

.wrapper {
  background-color: $notice-yellow;
  border: 1px solid black;
  height: 200px;
  margin: 25vh auto 0;
  width: 200px;
  > div {
    height: 99px;
    width: 99px;
  }
}

.color {
  background: $darken-yellow;
  display: block;
}

.color2 {
  background: $shade-yellow;
  display: block;
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

.wrapper {
  background-color: #ffd200;
  border: 1px solid black;
  height: 200px;
  margin: 25vh auto 0;
  width: 200px;
}

.wrapper > div {
  height: 99px;
  width: 99px;
}

.color {
  background: #665400;
  display: block;
}

.color2 {
  background: #b39300;
  display: block;
}

SassMeister-rendered.html

<div class="wrapper">
  
<div class="color">&nbsp;</div> 
<div class="color2">&nbsp;</div> 

</div>