JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<div style="background-color:red;">red</div>
<div style="background-color:black;">black</div>
<div style="background-color:white;">white</div>
<div style="background-color:#220000;">220000</div>
<div style="background-color:#ee9999;">ee9999</div>
<div style="background-color:#e4d92a ;">e4d92a </div>
<div style="background-color:#5eeed4 ;">5eeed4 </div>
<div style="background-color:#956df8 ;">956df8 </div>
<div style="background-color:#6728a4 ;">6728a4 </div>
JavaScript
// TinyColor text example for http://stackoverflow.com/questions/28687534/finding-dark-light-colors
//
// Uses https://github.com/bgrins/TinyColor
//
$(function() {
$('div').each(function(e) {
var c = tinycolor($(this).css('background-color'));
if (c.isDark()) {
$(this).css('color',c.lighten(50));
$(this).text($(this).text() + ' (dark)');
} else {
$(this).css('color',c.darken(50));
$(this).text( $(this).text() + ' (light)');
}
});
});