cybear/colors.html

## colors.html
<html>
<head>
	<title>Color development console</title>
	<script src="http://cdn.jsdelivr.net/one-color/2.4.0/one-color-all.js"></script>
	<script type="text/javascript">
function logColor(oneColor) {
  var c = oneColor.hex();
  console.log( '%c'+c, 'background:' + c);
  return oneColor;
}

function originalToOne(item) {
	return one.color(item.color);
}
function huePlusHalfHour(color) {
	return color.hue(1/24, true);
}
function hueMinusHalfHour(color) {
	return color.hue(-1/24, true);
}
function colorToHex(color) {
  return color.hex();
}
function colorsToLog(colors) {
	function colorCode (color) {
		return '%c ' + color;
	}
	function backgroundColor (color) {
		return 'background: ' + color;
	}
	var text = colors.map(colorCode).join(' ');
	var css = colors.map(backgroundColor);
	var argz = css;

	argz.unshift(text);
	console.log.apply(console, argz);
}

var greys = [
	{'name': 'capish_color_grey_lightest', color: '#e1e1e1'},
	{'name': 'capish_color_grey_lighter', color: '#bbbbbb'},
	{'name': 'capish_color_grey_light', color: '#949494'},
	{'name': 'capish_color_grey', color: '#6e6e6e'},
	{'name': 'capish_color_grey_dark', color: '#484848'},
	{'name': 'capish_color_grey_darker', color: '#222222'}
];

var blues = [
	{'name': 'capish_color_blue_lighter', color: '#7edfff'},
	{'name': 'capish_color_blue_light', color: '#57b8d9'},
	{'name': 'capish_color_blue', color: '#3192b3'},
	{'name': 'capish_color_blue_dark', color: '#0b6c8d'},
	{'name': 'capish_color_blue_darker', color: '#004667'}
];


var oranges = [
	{'name': 'capish_color_orange_lighter', color:'#ffb172'},
	{'name': 'capish_color_orange_light', color: '#ff8a4b'},
	{'name': 'capish_color_orange', color:'#e76425'},
	{'name': 'capish_color_orange_dark', color: '#c13e00'}
];

var greyColors = greys.map(originalToOne);
var blueColors = blues.map(originalToOne);
var orangeColors = oranges.map(originalToOne);

console.log('Blues:');
colorsToLog(blueColors.map(colorToHex));
console.log('Blues minus half hour:');
colorsToLog(blueColors.map(hueMinusHalfHour).map(colorToHex));
console.log('Blues plus half hour:');
colorsToLog(blueColors.map(huePlusHalfHour).map(colorToHex));

console.log('Oranges:');
colorsToLog(orangeColors.map(colorToHex));
console.log('Oranges minus half hour:');
colorsToLog(orangeColors.map(hueMinusHalfHour).map(colorToHex));
console.log('Oranges plus half hour:');
colorsToLog(orangeColors.map(huePlusHalfHour).map(colorToHex));

console.log('Greys:');
colorsToLog(greyColors.map(colorToHex));

</script>
</head>
<body>

</body>
</html>
	<html>
	<head>
	<title>Color development console</title>
	<script src="http://cdn.jsdelivr.net/one-color/2.4.0/one-color-all.js"></script>
	<script type="text/javascript">
	function logColor(oneColor) {
	var c = oneColor.hex();
	console.log( '%c'+c, 'background:' + c);
	return oneColor;
	}

	function originalToOne(item) {
	return one.color(item.color);
	}
	function huePlusHalfHour(color) {
	return color.hue(1/24, true);
	}
	function hueMinusHalfHour(color) {
	return color.hue(-1/24, true);
	}
	function colorToHex(color) {
	return color.hex();
	}
	function colorsToLog(colors) {
	function colorCode (color) {
	return '%c ' + color;
	}
	function backgroundColor (color) {
	return 'background: ' + color;
	}
	var text = colors.map(colorCode).join(' ');
	var css = colors.map(backgroundColor);
	var argz = css;

	argz.unshift(text);
	console.log.apply(console, argz);
	}

	var greys = [
	{'name': 'capish_color_grey_lightest', color: '#e1e1e1'},
	{'name': 'capish_color_grey_lighter', color: '#bbbbbb'},
	{'name': 'capish_color_grey_light', color: '#949494'},
	{'name': 'capish_color_grey', color: '#6e6e6e'},
	{'name': 'capish_color_grey_dark', color: '#484848'},
	{'name': 'capish_color_grey_darker', color: '#222222'}
	];

	var blues = [
	{'name': 'capish_color_blue_lighter', color: '#7edfff'},
	{'name': 'capish_color_blue_light', color: '#57b8d9'},
	{'name': 'capish_color_blue', color: '#3192b3'},
	{'name': 'capish_color_blue_dark', color: '#0b6c8d'},
	{'name': 'capish_color_blue_darker', color: '#004667'}
	];


	var oranges = [
	{'name': 'capish_color_orange_lighter', color:'#ffb172'},
	{'name': 'capish_color_orange_light', color: '#ff8a4b'},
	{'name': 'capish_color_orange', color:'#e76425'},
	{'name': 'capish_color_orange_dark', color: '#c13e00'}
	];

	var greyColors = greys.map(originalToOne);
	var blueColors = blues.map(originalToOne);
	var orangeColors = oranges.map(originalToOne);

	console.log('Blues:');
	colorsToLog(blueColors.map(colorToHex));
	console.log('Blues minus half hour:');
	colorsToLog(blueColors.map(hueMinusHalfHour).map(colorToHex));
	console.log('Blues plus half hour:');
	colorsToLog(blueColors.map(huePlusHalfHour).map(colorToHex));

	console.log('Oranges:');
	colorsToLog(orangeColors.map(colorToHex));
	console.log('Oranges minus half hour:');
	colorsToLog(orangeColors.map(hueMinusHalfHour).map(colorToHex));
	console.log('Oranges plus half hour:');
	colorsToLog(orangeColors.map(huePlusHalfHour).map(colorToHex));

	console.log('Greys:');
	colorsToLog(greyColors.map(colorToHex));

	</script>
	</head>
	<body>

	</body>
	</html>