<div id="root"></div>
body {
	background-color: #f8f8f8;
	display: flex;
	padding: 40px;
}

div {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 8px;
	font-family: "Inter", sans-serif;
	font-size: 24px;
	letter-spacing: .5px;
	margin-bottom: 16px;
	padding: 24px;
}
function getContrastYIQ(hexcolor){
	var r = parseInt(hexcolor.substr(0,2),16);
	var g = parseInt(hexcolor.substr(2,2),16);
	var b = parseInt(hexcolor.substr(4,2),16);
	var yiq = ((r*299)+(g*587)+(b*114))/1000;
	return (yiq >= 128) ? 'black' : 'white';
}

const colors = ["26a69a", "23d160", "2196f3", "ffee58", "191919", "f8f8f8"]

const App = () => {
	const resultHtml = []
	
	colors.forEach(color => {
		resultHtml.push(<div style={{"background": `#${color}`, "color": `${getContrastYIQ(color)}`}}>#{color}</div>)
	})
	
  return(
    <>
      {resultHtml}
    </>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js