c0bra / color-scheme-js

Generate pleasant color schemes in JavaScript

Home Page:http://c0bra.github.com/color-scheme-js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Can't make the complement options work

nickbe opened this issue · comments

commented

I just tried to make the complement option work like this, but it won't work. Could you help me out here?

<html>
	<head>
		<style>
			.card {
				width:25%;
				height:40px;
				float:left;
			}
		</style>
		<script src="color-scheme.min.js"></script>
		
		

		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>
		<div class="card"></div>

		<script>
			var scheme = new ColorScheme;
			var dist = 1;

			dist.toFixed(2);
			scheme.from_hue(21)   		 // Schemes and numner of colors
					.scheme('analogic')    // mono (4), contrast (8), triade (12), tetrade (16), analogic (12)
					.variation('hard')   // default (no change), pastel, soft, light, hard, pale
					//.distance(0.16) 		 // from 0 to 1, only works with triade, tetrade, analogic
					.complement(true);  	// only with analogic
					;
			var colors = scheme.colors();
			
			var divs = document.getElementsByClassName("card");

			var text="";
			while (divs.length > 0) {
				var i = Math.floor(Math.random() * colors.length);
				divs[0].style.backgroundColor = colors[i];
				colors.splice(i, 1);
				divs = [].slice.call(divs, 1);
			}
		
		</script>

</html>
commented

Oh and btw. Is there an option to overlay/blend the resulting colors with another color with a distinct transparency to make the palette for pleasingly equal among the colors?

commented

Ah well I took the source from your website and changed complement to .add_complement. :)
Now it works.

The second question regarding blending/tinting remains though.