Skip to content

Instantly share code, notes, and snippets.

@daisy1754
Last active November 12, 2015 05:42
Show Gist options
  • Save daisy1754/ffeb5b9e999baf1c7373 to your computer and use it in GitHub Desktop.
Save daisy1754/ffeb5b9e999baf1c7373 to your computer and use it in GitHub Desktop.
Extract dark/light color from Google's material spec https://www.google.com/design/spec/style/color.html#color-color-palette
function parseRgb(color) {
red = parseInt("0x" + color.substr(1, 2));
green = parseInt("0x" + color.substr(3, 2));
blue = parseInt("0x" + color.substr(5, 2));
return [red, green, blue];
}
// YUV
function calcBrightness(color) {
var rgb = parseRgb(color);
return Math.floor(0.299 * rgb[0] + 0.587 * rgb[1] + 0.114 * rgb[2]) / 255.0;
}
// HSP
function calcBrightnessHSP(color) {
var rgb = parseRgb(color);
return Math.sqrt(
0.299 * (rgb[0]/255.0) * (rgb[0]/255.0)
+ 0.587 * (rgb[1]/255.0) * (rgb[1]/255.0)
+ 0.114 * (rgb[2]/255.0) * (rgb[2]/255.0));
}
// luminance http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
function calcLuminance(color) {
var rgb = parseRgb(color);
return 0.2126 * normalizeForLuminance(rgb[0])
+ 0.7152 * normalizeForLuminance(rgb[1])
+ 0.0722 * normalizeForLuminance(rgb[2]);
}
function normalizeForLuminance(colorUnit) {
var c = colorUnit / 255.0;
if (c / 255.0 <= 0.03928) {
return c / 255.0 / 12.92;
} else {
return Math.pow(((c + 0.055) / 1.055), 2.4)
}
}
dark_color_luma = $.map(dark_color, calcBrightness);
bright_color_luma = $.map(bright_color, calcBrightness);
dark_color_hsp = $.map(dark_color, calcBrightnessHSP);
bright_color_hsp = $.map(bright_color, calcBrightnessHSP);
dark_color_luminance = $.map(dark_color, calcLuminance);
bright_color_luminance = $.map(bright_color, calcLuminance);
console.log("luma range of dark color: " + Math.min.apply(null, dark_color_luma) + " to " +Math.max.apply(null, dark_color_luma));
console.log("luma range of bright color: " + Math.min.apply(null, bright_color_luma) + " to " +Math.max.apply(null, bright_color_luma));
// luma range of dark color: 0 to 0.6470588235294118
// luma range of bright color: 0.47843137254901963 to 1
console.log("p range of dark color: " + Math.min.apply(null, dark_color_hsp) + " to " +Math.max.apply(null, dark_color_hsp));
console.log("p range of bright color: " + Math.min.apply(null, bright_color_hsp) + " to " +Math.max.apply(null, bright_color_hsp));
// p range of dark color: 0 to 0.7124371371258077
// p range of bright color: 0.5449534580439543 to 0.9999999999999999
console.log("luminance range of dark color: " + Math.min.apply(null, dark_color_luminance) + " to " +Math.max.apply(null, dark_color_luminance));
console.log("luminance range of bright color: " + Math.min.apply(null, bright_color_luminance) + " to " +Math.max.apply(null, bright_color_luminance));
// luminance range of dark color: 0 to 0.00019392803196674772
// luminance range of bright color: 0.00015732196356962018 to 0.0003035269835488375
// load jQuery
var script = document.createElement('script');
script.src = "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js";
document.head.appendChild(script);
// ---
dark_color = []
bright_color = []
$(".color").each(function(i, e) {
var $e = $(e)
var hex = $e.find(".hex")
if (hex.length > 0) {
var text_dark = $e.attr("class").indexOf("dark") >= 0 || $e.find(".dark").length > 0
if (text_dark) {
bright_color.push(hex.text())
} else {
dark_color.push(hex.text())
}
}
})
function unique(array) {
return $.grep(array, function(el, index) {
return index === $.inArray(el, array);
});
}
dark_color = unique(dark_color)
bright_color = unique(bright_color)
bright_color: [#ffebee, #ffcdd2, #ef9a9a, #e57373, #ff8a80, #fce4ec, #f8bbd0, #f48fb1, #ff80ab, #f3e5f5, #e1bee7, #ce93d8, #ea80fc, #ede7f6, #d1c4e9, #b39ddb, #b388ff, #e8eaf6, #c5cae9, #9fa8da, #8c9eff, #e3f2fd, #bbdefb, #90caf9, #64b5f6, #42a5f5, #82b1ff, #03a9f4, #e1f5fe, #b3e5fc, #81d4fa, #4fc3f7, #29b6f6, #80d8ff, #40c4ff, #00b0ff, #00bcd4, #e0f7fa, #b2ebf2, #80deea, #4dd0e1, #26c6da, #00acc1, #84ffff, #18ffff, #00e5ff, #00b8d4, #e0f2f1, #b2dfdb, #80cbc4, #4db6ac, #26a69a, #a7ffeb, #64ffda, #1de9b6, #00bfa5, #4caf50, #e8f5e9, #c8e6c9, #a5d6a7, #81c784, #66bb6a, #b9f6ca, #69f0ae, #00e676, #00c853, #8bc34a, #f1f8e9, #dcedc8, #c5e1a5, #aed581, #9ccc65, #7cb342, #ccff90, #b2ff59, #76ff03, #64dd17, #cddc39, #f9fbe7, #f0f4c3, #e6ee9c, #dce775, #d4e157, #c0ca33, #afb42b, #9e9d24, #f4ff81, #eeff41, #c6ff00, #aeea00, #ffeb3b, #fffde7, #fff9c4, #fff59d, #fff176, #ffee58, #fdd835, #fbc02d, #f9a825, #f57f17, #ffff8d, #ffff00, #ffea00, #ffd600, #ffc107, #fff8e1, #ffecb3, #ffe082, #ffd54f, #ffca28, #ffb300, #ffa000, #ff8f00, #ff6f00, #ffe57f, #ffd740, #ffc400, #ffab00, #fff3e0, #ffe0b2, #ffcc80, #ffb74d, #ffa726, #ff9800, #fb8c00, #f57c00, #ffd180, #ffab40, #ff9100, #ff6d00, #fbe9e7, #ffccbc, #ffab91, #ff8a65, #ff7043, #ff9e80, #ff6e40, #efebe9, #d7ccc8, #bcaaa4, #fafafa, #f5f5f5, #eeeeee, #e0e0e0, #bdbdbd, #9e9e9e, #eceff1, #cfd8dc, #b0bec5, #90a4ae, #ffffff]
dark_color: [#f44336, #ef5350, #e53935, #d32f2f, #c62828, #b71c1c, #ff5252, #ff1744, #d50000, #e91e63, #f06292, #ec407a, #d81b60, #c2185b, #ad1457, #880e4f, #ff4081, #f50057, #c51162, #9c27b0, #ba68c8, #ab47bc, #8e24aa, #7b1fa2, #6a1b9a, #4a148c, #e040fb, #d500f9, #aa00ff, #673ab7, #9575cd, #7e57c2, #5e35b1, #512da8, #4527a0, #311b92, #7c4dff, #651fff, #6200ea, #3f51b5, #7986cb, #5c6bc0, #3949ab, #303f9f, #283593, #1a237e, #536dfe, #3d5afe, #304ffe, #2196f3, #1e88e5, #1976d2, #1565c0, #0d47a1, #448aff, #2979ff, #2962ff, #039be5, #0288d1, #0277bd, #01579b, #0091ea, #0097a7, #00838f, #006064, #009688, #00897b, #00796b, #00695c, #004d40, #43a047, #388e3c, #2e7d32, #1b5e20, #689f38, #558b2f, #33691e, #827717, #ff9800, #ef6c00, #e65100, #ff5722, #f4511e, #e64a19, #d84315, #bf360c, #ff3d00, #dd2c00, #795548, #a1887f, #8d6e63, #6d4c41, #5d4037, #4e342e, #3e2723, #9e9e9e, #757575, #616161, #424242, #212121, #607d8b, #78909c, #546e7a, #455a64, #37474f, #263238, #000000]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment