You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
2.7 KiB
199 lines
2.7 KiB
// TODO make separate npm module
|
|
|
|
// https://stackoverflow.com/a/4382138/6519037
|
|
const allColors = [
|
|
'hsl(42, 100%, 50%)',
|
|
'hsl(310, 34%, 37%)',
|
|
'hsl(24, 100%, 50%)',
|
|
'hsl(211, 38%, 74%)',
|
|
'hsl(350, 100%, 37%)',
|
|
'hsl(35, 52%, 59%)',
|
|
'hsl(22, 11%, 45%)',
|
|
'hsl(145, 100%, 24%)',
|
|
'hsl(348, 87%, 71%)',
|
|
'hsl(203, 100%, 27%)',
|
|
'hsl(11, 100%, 68%)',
|
|
'hsl(265, 37%, 34%)',
|
|
'hsl(33, 100%, 50%)',
|
|
'hsl(342, 63%, 42%)',
|
|
'hsl(49, 100%, 47%)',
|
|
'hsl(5, 81%, 27%)',
|
|
'hsl(68, 100%, 33%)',
|
|
'hsl(26, 61%, 21%)',
|
|
'hsl(10, 88%, 51%)',
|
|
'hsl(84, 33%, 12%)',
|
|
];
|
|
|
|
// https://digitalsynopsis.com/design/beautiful-color-ui-gradients-backgrounds/
|
|
const gradientColors = [
|
|
[
|
|
'#ff9aac',
|
|
'#ffa875',
|
|
],
|
|
[
|
|
'#cc2b5e',
|
|
'#753a88',
|
|
],
|
|
[
|
|
'#42275a',
|
|
'#734b6d',
|
|
],
|
|
[
|
|
'#bdc3c7',
|
|
'#2c3e50',
|
|
],
|
|
[
|
|
'#de6262',
|
|
'#ffb88c',
|
|
],
|
|
[
|
|
'#eb3349',
|
|
'#f45c43',
|
|
],
|
|
[
|
|
'#dd5e89',
|
|
'#f7bb97',
|
|
],
|
|
[
|
|
'#56ab2f',
|
|
'#a8e063',
|
|
],
|
|
[
|
|
'#614385',
|
|
'#516395',
|
|
],
|
|
[
|
|
'#eecda3',
|
|
'#ef629f',
|
|
],
|
|
[
|
|
'#eacda3',
|
|
'#d6ae7b',
|
|
],
|
|
[
|
|
'#02aab0',
|
|
'#00cdac',
|
|
],
|
|
[
|
|
'#d66d75',
|
|
'#e29587',
|
|
],
|
|
[
|
|
'#000428',
|
|
'#004e92',
|
|
],
|
|
[
|
|
'#ddd6f3',
|
|
'#faaca8',
|
|
],
|
|
[
|
|
'#7b4397',
|
|
'#dc2430',
|
|
],
|
|
[
|
|
'#43cea2',
|
|
'#185a9d',
|
|
],
|
|
[
|
|
'#ba5370',
|
|
'#f4e2d8',
|
|
],
|
|
[
|
|
'#ff512f',
|
|
'#dd2476',
|
|
],
|
|
[
|
|
'#4568dc',
|
|
'#b06ab3',
|
|
],
|
|
[
|
|
'#ec6f66',
|
|
'#f3a183',
|
|
],
|
|
[
|
|
'#ffd89b',
|
|
'#19547b',
|
|
],
|
|
[
|
|
'#3a1c71',
|
|
'#d76d77',
|
|
],
|
|
[
|
|
'#4ca1af',
|
|
'#c4e0e5',
|
|
],
|
|
[
|
|
'#ff5f6d',
|
|
'#ffc371',
|
|
],
|
|
[
|
|
'#36d1dc',
|
|
'#5b86e5',
|
|
],
|
|
[
|
|
'#c33764',
|
|
'#1d2671',
|
|
],
|
|
[
|
|
'#141e30',
|
|
'#243b55',
|
|
],
|
|
[
|
|
'#ff7e5f',
|
|
'#feb47b',
|
|
],
|
|
[
|
|
'#ed4264',
|
|
'#ffedbc',
|
|
],
|
|
[
|
|
'#2b5876',
|
|
'#4e4376',
|
|
],
|
|
[
|
|
'#ff9966',
|
|
'#ff5e62',
|
|
],
|
|
[
|
|
'#aa076b',
|
|
'#61045f',
|
|
],
|
|
];
|
|
|
|
/* const lightGradients = [
|
|
[
|
|
'#ee9ca7',
|
|
'#ffdde1',
|
|
],
|
|
[
|
|
'#2193b0',
|
|
'#6dd5ed',
|
|
],
|
|
]; */
|
|
|
|
function getRandomColor(colors = allColors) {
|
|
const index = Math.floor(Math.random() * colors.length);
|
|
const remainingColors = [...colors];
|
|
remainingColors.splice(index, 1);
|
|
return { remainingColors, color: colors[index] || allColors[0] };
|
|
}
|
|
|
|
function getRandomColors(num) {
|
|
let colors = allColors;
|
|
const out = [];
|
|
for (let i = 0; i < Math.min(num, allColors.length); i += 1) {
|
|
const { remainingColors, color } = getRandomColor(colors);
|
|
out.push(color);
|
|
colors = remainingColors;
|
|
}
|
|
return out;
|
|
}
|
|
|
|
function getRandomGradient() {
|
|
return gradientColors[Math.floor(Math.random() * gradientColors.length)];
|
|
}
|
|
|
|
module.exports = {
|
|
getRandomColors,
|
|
getRandomGradient,
|
|
};
|