JSFiddle - React, Tailwind, and code Playground

by ramesh valasa

HTML

<p class="lighter">Lighter</p>
<p class="light">Light</p>
<p>Normal</p>
<p class="dark">Dark</p>
<p class="darker">Darker</p>

SCSS

$color: #0f72bd;
$light: lighten($color,10%);
$dark: darken($color,15%);
$lighter: lighten($color,30%);
$darker: darken($color,30%);

body {
  text-align: center;
  padding-top: 1em;
}

p {
  color: $color; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2em;
    
  &.light { 
    color: $light;
  }
  &.dark { 
    color: $dark;
  }
  &.lighter { 
    color: $lighter;
  }
  &.darker { 
    color: $darker;
  }
}

JavaScript

$('p').each(function(){
  var rgb = $(this).css('color');  
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
  rgb = "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
  
  $(this).append(": "+rgb);
});