Skip to content

Instantly share code, notes, and snippets.

@dave-kennedy
Created April 20, 2018 16:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dave-kennedy/ce8cf967eb108cc08b5ffa334d33c321 to your computer and use it in GitHub Desktop.
Save dave-kennedy/ce8cf967eb108cc08b5ffa334d33c321 to your computer and use it in GitHub Desktop.
Color palette randomizer
$(function () {
// http://www.colourlovers.com/palettes/most-loved/all-time/meta
let colorPalettes = [
['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900'],
['#FE4365', '#FC9D9A', '#F9CDAD', '#C8C8A9', '#83AF9B'],
['#ECD078', '#D95B43', '#C02942', '#542437', '#53777A'],
['#CFF09E', '#A8DBA8', '#79BD9A', '#3B8686', '#0B486B'],
['#556270', '#4ECDC4', '#C7F464', '#FF6B6B', '#C44D58'],
['#774F38', '#E08E79', '#F1D4AF', '#ECE5CE', '#C5E0DC'],
['#E8DDCB', '#CDB380', '#036564', '#033649', '#031634'],
['#D1F2A5', '#EFFAB4', '#FFC48C', '#FF9F80', '#F56991'],
['#490A3D', '#BD1550', '#E97F02', '#F8CA00', '#8A9B0F'],
['#594F4F', '#547980', '#45ADA8', '#9DE0AD', '#E5FCC2'],
['#00A0B0', '#6A4A3C', '#CC333F', '#EB6841', '#EDC951'],
['#E94E77', '#D68189', '#C6A49A', '#C6E5D9', '#F4EAD5'],
['#3FB8AF', '#7FC7AF', '#DAD8A7', '#FF9E9D', '#FF3D7F'],
['#D9CEB2', '#948C75', '#D5DED9', '#7A6A53', '#99B2B7']
];
function randomColorPalette() {
let palette = colorPalettes[randomNumber(0, colorPalettes.length - 1)],
bgColorIndex = randomNumber(0, 4),
textColorIndex = randomNumber(0, 4),
headerColorIndex = randomNumber(0, 4),
linkColorIndex = randomNumber(0, 4);
while (textColorIndex == bgColorIndex) {
textColorIndex = randomNumber(0, 4);
}
while (headerColorIndex == bgColorIndex
|| headerColorIndex == textColorIndex) {
headerColorIndex = randomNumber(0, 4);
}
while (linkColorIndex == bgColorIndex
|| linkColorIndex == textColorIndex
|| linkColorIndex == headerColorIndex) {
linkColorIndex = randomNumber(0, 4);
}
return {
bgColor: palette[bgColorIndex],
textColor: palette[textColorIndex],
headerColor: palette[headerColorIndex],
linkColor: palette[linkColorIndex]
};
}
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function setColorPalette(palette) {
console.log(palette);
$('body').css({
backgroundColor: palette.bgColor,
color: palette.textColor
});
$('h2').css('color', palette.headerColor);
$('a').css('color', palette.linkColor);
}
setColorPalette(randomColorPalette());
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment