Created
October 9, 2014 13:18
-
-
Save cybear/9dcc20fa2382cfef92a3 to your computer and use it in GitHub Desktop.
one-color.js and js arrays in chrome dev console
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment