SCSS

by khamer

HTML

<div class="white">white</div>
<div class="lightgray">lightgray</div>
<div class="gray">gray</div>
<div class="darkgray">darkgray</div>
<div class="charcoal">charcoal</div>
<div class="black">black</div>

SCSS

$hint-color: #229ab7;

@function hint($color, $hint-color: $hint-color, $saturation: 20%) {
  @return adjust-color($color, $saturation: $saturation, $hue: hue($hint-color));
}

$white: hint(#fff);
$lightgray: hint(#ddd);
$gray: hint(#808080);
$darkgray: hint(#4a4a4a);
$charcoal: hint(#191919);
$black: hint(#000);

$white: hint(#fff);
$lightgray: hint(#dedede);
$gray: hint(#9f9f9f);
$darkgray: hint(#606060);
$charcoal: hint(#212121);
$black: hint(#000);

div {
  font-size: 32px;
  padding: .5rem;
}

.white {
  color: $white;
  background: $charcoal;
}
.lightgray {
  color: $lightgray;
}
.gray {
  color: $gray;
}
.darkgray {
  color: $darkgray;
}
.charcoal {
  color: $charcoal;
}
.black {
  color: $black;
}

JavaScript

$(function() {
  $('div').each(function() {
    $(this).html(
      $(this).html() + ': ' +
      rgb2hex(getComputedStyle(this).getPropertyValue('color'))
    );
  })
})


function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");