JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="colors">
		#19226f dark
        #4c439e purple
        #1973a7 blue
        #91999c gray
        #eebe2e yellow
        #ffffff white
	</div>

CSS

a, abbr, address, article, aside, audio, b, blockquote, body, canvas, cite,
		code, dd, div, dl, dt, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6,
		header, html, hr, i, iframe, img, label, li, nav, object, ol, p, pre, section,
		span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul, video {
			border: 0;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
			box-sizing: border-box;
			font-size: 100%;
			font: inherit;
			margin: 0;
			outline: 0;
			padding: 0;
			vertical-align: baseline;
		}

		.color {
			font-family: arial;
			font-size: 12px;
			float: left;
			padding: 4px;
			box-sizing: border-box;
			width: 50%;
			cursor: pointer;
		}

		.color:before {
			content: '';
			padding-top: 100%;
			float: left;
		}

		.color span {
			opacity: .5;
		}

		.color.light {
			color: #000;
		}
		.color.dark {
			color: #fff;
		}

		@media only screen and (min-width: 300px) {
			.color {
				width: 25%;
			}
		}

		@media only screen and (min-width: 600px) {
			.color {
				width: 12.5%;
			}
		}

JavaScript

$('.colors').each(function() {
			var $this = $(this);
			var colors = $(this).text().split('#');
			
			var cssOverrides = $('<style type="text/css"/>').appendTo('body');
			
			$this.empty();
			
			$(colors).each(function() {
				if (this.trim() == '') return;
				var words = this.split(' ');
				var h = words.shift();
				var brightness = "dark";
				var textColor = "rgba(255,255,255,.5)";
				var val = parseInt(h[0] + h[1], 16)
				+ parseInt(h[2] + h[3], 16) * 2
				+ parseInt(h[4] + h[5], 16);
				if (val > 509) {
					brightness = "light";
				}
				
				$('<div class="color ' + brightness + '" />')
				.css('background-color', '#' + h)
				//.html(words.join(' ') + '<br />#' + h)
				.html('<span>#' + h + '</span>')
				.appendTo($this);
			});
			$('.color').click(function() {

				var range = document.createRange();
				range.selectNode(this.children[0]);
				
				if ($(this).is('.dark')) {
					cssOverrides.html("::selection { background: #fff; color: #000; }\n::selection { background: #fff; color: #000; }");
				} else {
					cssOverrides.html("::selection { background: #000; color: #fff; }\n::-moz-selection { background: #000; color: #fff; }");
				}
				window.getSelection().addRange(range);
			}); 
		});