Skip to content

Instantly share code, notes, and snippets.

@ozcanzaferayan

ozcanzaferayan/color_palette_generator.html

Last active March 4, 2020 18:03
Show Gist options
  • Save ozcanzaferayan/ee0f6dce4c6e54019660f8bb35ae372c to your computer and use it in GitHub Desktop.
Save ozcanzaferayan/ee0f6dce4c6e54019660f8bb35ae372c to your computer and use it in GitHub Desktop.
Download ZIP
Creates color palette from existing color array in JavaScript and HTML. You can get website colors from http://colorhound.net/ by entering css or js text.
Raw
color_palette_generator.html
<!DOCTYPE html>
<html>
<body>
<script>
function hexToHSV(hex) {
hex = hex.replace(/^#/, '');
hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
var red = parseInt(hex.substr(0, 2), 16) / 255,
green = parseInt(hex.substr(2, 2), 16) / 255,
blue = parseInt(hex.substr(4, 2), 16) / 255;
var cMax = Math.max(red, green, blue),
delta = cMax - Math.min(red, green, blue),
saturation = cMax ? (delta / cMax) : 0;
switch (cMax) {
case red:
return [60 * (((green - blue) / delta) % 6) || 0, saturation, cMax];
case green:
return [60 * (((blue - red) / delta) + 2) || 0, saturation, cMax];
case blue:
return [60 * (((red - green) / delta) + 4) || 0, saturation, cMax];
}
}
</script>
<script>
var colors = ['#000000', '#041722', '#050505', '#096633', '#0e1012', '#10171e', '#121517', '#14171a', '#141d26', '#15181c', '#15202b', '#17bf63', '#182430', '#192734', '#1b2836', '#1b95e0', '#1da1f2', '#1da1f2', '#202327', '#244052', '#253341', '#264a9d', '#2f3336', '#325d7d', '#38444d', '#3b4c5c', '#3d4145', '#3d5466', '#512892', '#657786', '#66d397', '#68e090', '#697987', '#6b7d8c', '#6e767d', '#6e767d', '#70c8ff', '#71c9f8', '#794bc4', '#79500b', '#8899a6', '#929ca6', '#929ca6', '#92a4b3', '#97e3ff', '#99350d', '#9f0c3a', '#a37ced', '#a5f2aa', '#aab8c2', '#b8cbd9', '#bea8e2', '#c7b4fa', '#ccd6dd', '#d9d9d9', '#e0245e', '#e6ecf0', '#eaf5fd', '#f098b3', '#f45d22', '#f5f8fa', '#f6809a', '#f89a75', '#ff8d57', '#ffad1f', '#ffb8c2', '#ffbe78', '#ffcb70', '#ffd03f', '#ffe76e', '#ffffff', '#ffffff', '#000000', '#0000ff', '#008000', '#add8e6', '#90ee90', '#ffffe0', '#0000cd', '#9370db', '#ffa500', '#800080', '#ff0000', '#657786', '#657786', '#657786', '#8899a6', '#8899a6', '#8899a6', '#121517', '#141d26', '#d9d9d9', '#d9d9d9', '#e6ecf0', '#ffffff', '#ffffff', '#ffffff', '#ffff00'];
colors = colors.filter((el,i) => colors.indexOf(el) == i);
colors = colors.sort(function(a, b) {
var hsva = hexToHSV(a);
var hsvb = hexToHSV(b);
console.log(hsva)
return hsva[0] - hsvb[0];
});
var size = 50;
colors.forEach(v => {
var elem = document.createElement('div');
elem.style.cssText = 'width:50px;height:50px;background-color:'+ v +';display:inline-block;';
document.body.appendChild(elem);
})
</script>
</body>
</html>
Raw
color_palette_generator_with_text.html
<!DOCTYPE html>
<html>
<body>
<script>
function hexToHSV(hex) {
hex = hex.replace(/^#/, '');
hex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
var red = parseInt(hex.substr(0, 2), 16) / 255,
green = parseInt(hex.substr(2, 2), 16) / 255,
blue = parseInt(hex.substr(4, 2), 16) / 255;
var cMax = Math.max(red, green, blue),
delta = cMax - Math.min(red, green, blue),
saturation = cMax ? (delta / cMax) : 0;
switch (cMax) {
case red:
return [60 * (((green - blue) / delta) % 6) || 0, saturation, cMax];
case green:
return [60 * (((blue - red) / delta) + 2) || 0, saturation, cMax];
case blue:
return [60 * (((red - green) / delta) + 4) || 0, saturation, cMax];
}
}
function hexToRgb(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
</script>
<script>
var colors = ['#000000', '#041722', '#050505', '#096633', '#0e1012', '#10171e', '#121517', '#14171a', '#141d26', '#15181c', '#15202b', '#17bf63', '#182430', '#192734', '#1b2836', '#1b95e0', '#1da1f2', '#1da1f2', '#202327', '#244052', '#253341', '#264a9d', '#2f3336', '#325d7d', '#38444d', '#3b4c5c', '#3d4145', '#3d5466', '#512892', '#657786', '#66d397', '#68e090', '#697987', '#6b7d8c', '#6e767d', '#6e767d', '#70c8ff', '#71c9f8', '#794bc4', '#79500b', '#8899a6', '#929ca6', '#929ca6', '#92a4b3', '#97e3ff', '#99350d', '#9f0c3a', '#a37ced', '#a5f2aa', '#aab8c2', '#b8cbd9', '#bea8e2', '#c7b4fa', '#ccd6dd', '#d9d9d9', '#e0245e', '#e6ecf0', '#eaf5fd', '#f098b3', '#f45d22', '#f5f8fa', '#f6809a', '#f89a75', '#ff8d57', '#ffad1f', '#ffb8c2', '#ffbe78', '#ffcb70', '#ffd03f', '#ffe76e', '#ffffff', '#ffffff', '#000000', '#0000ff', '#008000', '#add8e6', '#90ee90', '#ffffe0', '#0000cd', '#9370db', '#ffa500', '#800080', '#ff0000', '#657786', '#657786', '#657786', '#8899a6', '#8899a6', '#8899a6', '#121517', '#141d26', '#d9d9d9', '#d9d9d9', '#e6ecf0', '#ffffff', '#ffffff', '#ffffff', '#ffff00'];
colors = colors.filter((el,i) => colors.indexOf(el) == i);
colors = colors.sort(function(a, b) {
var hsva = hexToHSV(a);
var hsvb = hexToHSV(b);
console.log(hsva)
return hsva[0] - hsvb[0];
});
var size = 50;
colors.forEach(v => {
var rgb = hexToRgb(v);
var elem = document.createElement('div');
var text = document.createElement('span');
text.style.cssText = 'font-size:22px;font-weight:bold;font-family:monospace;-webkit-text-stroke-width: 0.3px;-webkit-text-stroke-color: white;';
text.innerText = v + ` (${rgb.r}, ${rgb.g}, ${rgb.b})`;
elem.appendChild(text);
elem.style.cssText = 'width:100%;background-color:'+ v +';display:block;';
document.body.appendChild(elem);
});
</script>
</body>
</html>
Raw
color_palette_generator_with_text_1.png
color_palette_generator_with_text_1.png
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment