Created
April 13, 2018 07:24
-
-
Save hashseed/3bc2844b15e006b380a4566325361b36 to your computer and use it in GitHub Desktop.
new-color-palette
This file contains 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
function rgbToHsl(r, g, b) { | |
r /= 255, g /= 255, b /= 255; | |
var max = Math.max(r, g, b), | |
min = Math.min(r, g, b); | |
var h, s, l = (max + min) / 2; | |
if (max == min) { | |
h = s = 0; // achromatic | |
} 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; | |
} | |
return [h, s, l]; | |
} | |
function SinebowColorGenerator(opt_a, opt_brightness) { | |
this.a_ = (opt_a === undefined) ? 1 : opt_a; | |
this.brightness_ = (opt_brightness === undefined) ? 1 : opt_brightness; | |
this.colorIndex_ = 0; | |
this.keyToColor = {}; | |
} | |
SinebowColorGenerator.prototype = { | |
colorForKey(key) { | |
if (!this.keyToColor[key]) { | |
this.keyToColor[key] = this.nextColor(); | |
} | |
return this.keyToColor[key]; | |
}, | |
nextColor() { | |
const components = SinebowColorGenerator.nthColor(this.colorIndex_++); | |
return SinebowColorGenerator.calculateColor( | |
components[0], components[1], components[2], | |
this.a_, this.brightness_); | |
} | |
}; | |
SinebowColorGenerator.PHI = (1 + Math.sqrt(5)) / 2; | |
SinebowColorGenerator.sinebow_ = function(h) { | |
h += 0.5; | |
h = -h; | |
let r = Math.sin(Math.PI * h); | |
let g = Math.sin(Math.PI * (h + 1 / 3)); | |
let b = Math.sin(Math.PI * (h + 2 / 3)); | |
r *= r; | |
g *= g; | |
b *= b; | |
// Roughly correct for human perception. | |
// https://en.wikipedia.org/wiki/Luma_%28video%29 | |
// Multiply by 2 to normalize all values to 0.5. | |
// (Halfway between black and white.) | |
const y = 2 * (0.2989 * r + 0.5870 * g + 0.1140 * b); | |
r /= y; | |
g /= y; | |
b /= y; | |
return [256 * r, 256 * g, 256 * b]; | |
}; | |
SinebowColorGenerator.nthColor = function(n) { | |
return SinebowColorGenerator.sinebow_(n * this.PHI); | |
}; | |
function lerp(percentage, lo, hi) { | |
const range = hi - lo; | |
return lo + percentage * range; | |
} | |
function normalize(value, lo, hi) { | |
return (value - lo) / (hi - lo); | |
} | |
SinebowColorGenerator.calculateColor = function(r, g, b, a, brightness) { | |
if (brightness <= 1) { | |
r *= brightness; | |
g *= brightness; | |
b *= brightness; | |
} else { | |
r = lerp(normalize(brightness, 1, 2), r, 255); | |
g = lerp(normalize(brightness, 1, 2), g, 255); | |
b = lerp(normalize(brightness, 1, 2), b, 255); | |
} | |
r = Math.round(r); | |
g = Math.round(g); | |
b = Math.round(b); | |
return [r, g, b]; | |
}; | |
const old = [ | |
[122, 98, 135], | |
[150, 83, 105], | |
[44, 56, 189], | |
[99, 86, 147], | |
[104, 129, 107], | |
[130, 178, 55], | |
[87, 109, 147], | |
[111, 145, 88], | |
[81, 152, 131], | |
[142, 91, 111], | |
[81, 163, 70], | |
[148, 94, 86], | |
[144, 89, 118], | |
[83, 150, 97], | |
[105, 94, 139], | |
[89, 144, 122], | |
[105, 119, 128], | |
[96, 128, 137], | |
[145, 88, 145], | |
[88, 145, 144], | |
[90, 100, 143], | |
[121, 97, 136], | |
[111, 160, 73], | |
[112, 91, 142], | |
[86, 147, 86], | |
[63, 100, 170], | |
[81, 152, 107], | |
[60, 164, 173], | |
[143, 72, 161], | |
[159, 74, 86] | |
]; | |
old.sort((a, b) => rgbToHsl(...a)[0] - rgbToHsl(...b)[0]); | |
for (var rgb of old) { | |
var div = document.createElement('div'); | |
div.style.cssText = | |
`width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`; | |
console.log(div.style.cssText); | |
document.body.appendChild(div); | |
} | |
var div = document.createElement('div'); | |
div.style.cssText = `width:20px;height:20px;`; | |
document.body.appendChild(div); | |
const numGeneralPurposeColorIds = 23; | |
const generalPurposeColors = new Array(numGeneralPurposeColorIds); | |
const sinebowAlpha = 1.0; | |
const sinebowBrightness = 1.5; | |
const sinebowColorGenerator = | |
new SinebowColorGenerator(sinebowAlpha, sinebowBrightness); | |
for (let i = 0; i < numGeneralPurposeColorIds; i++) { | |
generalPurposeColors[i] = sinebowColorGenerator.nextColor(); | |
console.log(generalPurposeColors[i]) | |
} | |
generalPurposeColors.sort((a, b) => rgbToHsl(...a)[0] - rgbToHsl(...b)[0]); | |
for (var rgb of generalPurposeColors) { | |
var div = document.createElement('div'); | |
div.style.cssText = | |
`width:20px;height:20px;background-color: rgb(${rgb.join(',')});float:left`; | |
console.log(div.style.cssText); | |
document.body.appendChild(div); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment