JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="//raw.githubusercontent.com/lokesh/color-thief/master/dist/color-thief.min.js"></script>
<div style="background-color: #dddddd">test</div>
<div style="background-color: #121212">test</div>
<div style="background-color: #3857ae">test</div>
<div style="background-color: #9f9f9f">test</div>
<div style="background-color: #ff0000">test</div>
<div style="background-color: #00ff00">test</div>
<div style="background-color: #0000ff">test</div>
<div style="background-color: #ff00f0">test</div>

<div class="bg">
    <p>Some text</p>
</div>

CSS

.bg{
    width:200px;
    height:200px;
    margin:0 auto;
    background-image: url('http://lorempixel.com/220/220/');
    line-height:200px;
    vertical-align:middle;
    text-align:center;
}

JavaScript

function isDark( color ) {
    var match = /rgb\((\d+).*?(\d+).*?(\d+)\)/.exec(color);
    return ( match[1] & 255 )
         + ( match[2] & 255 )
         + ( match[3] & 255 )
           < 3 * 256 / 2;
}

$('div').each(function() {console.log($(this).css("background-color"))
    $(this).css("color", isDark($(this).css("background-color")) ? 'white' : 'black');
});

var colorThief = new ColorThief();
colorThief.getColor('http://lorempixel.com/220/220/');