JSFiddle - React, Tailwind, and code Playground

by OjisanSeiuchi

HTML

<div id="bitch">
dog
</div>
<div id="monkey">
ape
</div>

CSS

#bitch {
    color: #A144D3;
}

JavaScript

function getStyle(el, styleProp) {
  if (el.currentStyle)
    return el.currentStyle[styleProp];

  return document.defaultView.getComputedStyle(el, null)[styleProp];
}

function getLowestMiddleHighest(rgbIntArray) {
  let highest = {
    val: -1,
    index: -1
  };
  let lowest = {
    val: Infinity,
    index: -1
  };

  rgbIntArray.map((val, index) => {
    if (val > highest.val) {
      highest = {
        val: val,
        index: index
      };
    }
    if (val < lowest.val) {
      lowest = {
        val: val,
        index: index
      };
    }
  });

  if (lowest.index === highest.index) {
    lowest.index = highest.index + 1;
  }

  let middle = {
    index: (3 - highest.index - lowest.index)
  };
  middle.val = rgbIntArray[middle.index];
  return [lowest, middle, highest];
}

function lightenByTenth(rgb) {

  const rgbIntArray = rgb.replace(/ /g, '').slice(4, -1).split(',').map(e => parseInt(e));
  // Grab the values in order of magnitude 
  // This uses the getLowestMiddleHighest function from the saturate section
  const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);

  if (lowest.val === 255) {
    return rgb;
  }

  const returnArray = [];

  // First work out increase on lower value
  returnArray[lowest.index] = Math.round(lowest.val + (Math.min(255 - lowest.val, 100)));

  // Then apply to the middle and higher values
  const increaseFraction = (returnArray[lowest.index] - lowest.val) / (255 - lowest.val);
  returnArray[middle.index] = middle.val + (255 - middle.val) * increaseFraction;
  returnArray[highest.index] = highest.val + (255 - highest.val) * increaseFraction;

  // Convert the array back into an rgb string
  return (`rgb(${returnArray.join()})`);
}

let el = document.getElementById('bitch');
let c = getStyle(el, "color");
let c1 = lightenByTenth(c);

let el2 = document.getElementById('monkey');
el2.style.color = c1;