SASS Color Variablizer

In this example below you will see how to do a SASS Color Variablizer with some HTML / CSS and Javascript

Takes a list of hexidecimal colors and converts them into a list of abstracted SASS variables.

Thumbnail
This awesome code was written by DeptofJeffAyer, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DeptofJeffAyer ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SASS Color Variablizer</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Plaster|Open+Sans'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <section>
	<header>
		<hgroup>
			<h2>SASS Color</h2>
			<h1>Variablizer</h1>
		</hgroup>
		<p>List your hexidecimal color codes (one per line) and receive a list of SASS adsctracted color vaiables. <a href="https://codepen.io/DeptofJeffAyer/post/more-gooder-sass-color-variables" title="More Gooder SASS Color Variables">Read the article</a> for more infomation about this method.</p>
	</header>
  <div class='input'>
    <h3>Input</h3>
    <textarea id='variablizer'>#fff
#000
#f00
#0f0
#00f
#c0c0c0
#101
#fb1
#c0ff33
#bada55
#606d78
		</textarea>
  </div>
  <div class='output'>
    <h3>Output</h3>
    <div id='output'></div>
  </div>
</section>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DeptofJeffAyer/sass-color-variablizer-LkJOqK */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  width: 100%;
  height: 100%;
  font: 1em/2em 'Open Sans', sans-serif;
  background: #fefefe;
  overflow-x: hidden;
  mix-blend-mode: multiply;
}
body:before, body:after {
  display: block;
  position: absolute;
  top: 50%;
  z-index: -1;
  font-size: 60em;
  font-family: 'Plaster', sans-serif;
  mix-blend-mode: color;
}
body:before {
  content: '#';
  left: -25%;
  color: rgba(0, 0, 255, 0.0075);
}
body:after {
  content: '$';
  right: -25%;
  color: rgba(255, 0, 0, 0.0075);
}

section {
  width: 90%;
  max-width: 1000px;
  padding: 0 1em;
  margin: auto;
}

header {
  margin: 3em 0;
}
header p {
  max-width: 500px;
  margin: 1em auto;
}

hgroup {
  position: relative;
  text-align: center;
}
hgroup h2 {
  margin: 0;
  text-align: center;
  text-transform: lowercase;
}
hgroup h1 {
  display: inline-block;
  margin: 0 0 10px;
  padding: 12px 0 24px;
  font-size: 4em;
  line-height: 1;
  font-family: 'Plaster', sans-serif;
  border-bottom: 3px solid;
  text-shadow: 0 0 0 #000;
}

h3 {
  margin: 0;
  text-transform: uppercase;
}

.input,
.output {
  width: 50%;
  padding: 0 1em;
}

.input {
  float: left;
  padding-left: 0;
}

.output {
  float: right;
  padding-right: 0;
}

textarea {
  width: 100%;
  min-height: 385px;
  margin: auto;
  padding: 0px 1em;
  font: 1em/2em 'Open Sans', sans-serif;
  border: 1px solid lightgray;
  background: #fff;
  resize: vertical;
}

#output {
  width: 100%;
  padding: 0px 20px;
  background: #fff;
  border: 1px solid lightgray;
}
#output div {
  margin: 0 10px 5px;
  padding: 0 8px;
  line-height: 30px;
  border-left-width: 30px;
  border-left-style: solid;
}

a {
  color: #ff69b4;
}


/*Downloaded from https://www.codeseek.co/DeptofJeffAyer/sass-color-variablizer-LkJOqK */
var variablizer = document.getElementById('variablizer'),
		output = document.getElementById('output'),
		timer;

function getColorName(H) {
	if (H >= 0 && H < 15) {
		family = 'red';
	} else if (H >= 15 && H < 45) {
		family = 'orange';
	} else if (H >= 45 && H < 65) {
		family = 'yellow';
	} else if (H >= 65 && H < 155) {
		family = 'green';
	} else if (H >= 155 && H < 195) {
		family = 'cyan';
	} else if (H >= 195 && H < 255) {
		family = 'blue';
	} else if (H >= 255 && H < 295) {
		family = 'purple';
	} else if (H >= 295 && H < 325) {
		family = 'pink';
	} else if (H >= 325 && H <= 360) {
		family = 'red';
	} else {
		family = 'doink';
	}

	return family;
}

function isBlack(S, L) {
	return (S === 0 && L === 0);
}

function isWhite(S, L) {
	return (S === 0 && L === 100);
}

function isGray(S, L) {
	return (L >= 95 || L <= 5 || S <= 10);
}

function getFamily(H, S, L) {
	if (isBlack(S, L)) {
		return 'black';
	} else if (isWhite(S, L)) {
		return 'white';
	} else if (isGray(S, L)) {
		return 'gray';
	} else {
		return getColorName(H);
	}
}

function variablize() {
	var colors = variablizer.value,
			color = colors.split('\n'),
			outputArr = [];

	for (var i in color) {

		var hex = color[i].split('#')[1];

		if (typeof hex !== 'undefined') {

			if (hex.length === 3) {
				hex = hex.split('').map(function(a){ return a + a; }).join('');
			}

			var rgb = hex.match(/.{1,2}/g),
				r = parseInt(rgb[0],16),
				g = parseInt(rgb[1],16), 
				b = parseInt(rgb[2],16),
				R = r / 255,
				G = g / 255,
				B = b / 255,
				max = Math.max(R, G, B),
				min = Math.min(R, G, B),
				family,
				H, h, s, L,
				l = (max + min) / 2;

				if (max == min) {
						h = s = 0;
				} else {
						var d = max - min;
						s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
						switch(max){
								case R: 
									h = (G - B) / d + (G < B ? 6 : 0); 
									break;
								case G: 
									h = (B - R) / d + 2; 
									break;
								case B: 
									h = (R - G) / d + 4; 
									break;
						}
						h /= 6;
				}

				H = (h*360+0.5)|0;
				S = (s*100+0.5)|0;
				L = (l*100+0.5)|0;
	
				family = getFamily(H, S, L);
			

			//testing each of the values
			console.table({
				variable: '$' + family + L + ': #' + hex,
				hex: '#' + hex,
				hsl: H + ', ' + S + ', ' + L,
				rgb: r + ', ' + g + ', ' + b
			});

			family = (family === 'white' || family === 'black') ? family : family + L;

			outputArr.push({
				variable: '$' + family + ': #' + hex + ';',
				hex: '#' + hex,
				H: H,
				S: S,
				L: L,
				R: R,
				G: G,
				B: B
			});

		}

	}

	outputArr.sort(function(a, b) {
		return a.H - b.H;
	});

	output.innerHTML = '';
	output.innerHTML = outputArr.map(function(a) { 
		return '<div style="border-left-color:' + a.hex + ';">' + a.variable + '</div>';
	}).join('');

}

function onKeyDown(e) {
	clearTimeout(timer);
	timer = setTimeout(variablize, 500);
}

variablize();

variablizer.addEventListener('blur', variablize);
variablizer.addEventListener('keydown', onKeyDown);

Comments