JSFiddle - React, Tailwind, and code Playground

Auto contrast text

by tonytlwu

HTML

<div id="box_container"></div>

CSS

body {
  background: #202731;
  margin: 0;
  font-family: sans-serif;
}

#box_container > div {
  height: 16px;
  line-height: 16px;
  padding: 5px;
}

JavaScript

Trendy = {};
Trendy.brightness = function(r, g, b) {
  // return (r + g + b) / 3
  return (r * 299 + g * 587 + b * 114) / 1000
};
Trendy.brighterThan = function(r, g, b, x) {
  return (this.brightness(r, g, b) > x);
};

for (var i = 0; i < 255; i += 5) {

  var r = Math.floor(Math.random() * 255);
  var g = Math.floor(Math.random() * 255);
  var b = Math.floor(Math.random() * 255);
  var $div = $('<div></div>');

  var text_color = "rgb(0,0,0)";

  var brightness = Trendy.brightness(r, g, b);

  if (brightness < 123) {
    text_color = "rgb(255,255,255)";
  }

  $div
    .css({
      backgroundColor: "rgb(" + r + "," + g + "," + b + ")",
      color: text_color
    })
    .html("rgb(" + r + "," + g + "," + b + "); brightness: " + brightness)
    .appendTo('#box_container');
}