101 lines
3.0 KiB
JavaScript
101 lines
3.0 KiB
JavaScript
import randomColor from "https://cdn.skypack.dev/randomcolor";
|
|
import chroma from "https://cdn.skypack.dev/chroma-js";
|
|
|
|
var names = [
|
|
"red", // 0
|
|
"orange", // 30
|
|
"yellow", // 60
|
|
"lime", // 90
|
|
"green", // 120
|
|
"teal", // 150
|
|
"cyan", // 180
|
|
"blue", // 210
|
|
"indigo", // 240
|
|
"violet", // 270
|
|
"fuschia", // 300
|
|
"pink", // 330
|
|
"red"
|
|
];
|
|
//grab the elements we want to rainbow-ize from the page
|
|
const red = document.getElementById("red");
|
|
const orange = document.getElementById("orange");
|
|
const yellow = document.getElementById("yellow");
|
|
const green = document.getElementById("green");
|
|
const blue = document.getElementById("blue");
|
|
const pink = document.getElementById("pink");
|
|
const purple = document.getElementById("purple");
|
|
|
|
function changeColors() {
|
|
// first we get a base color with a red hue from randomColor
|
|
let seedColor = randomColor();
|
|
// then we use Chroma to analyze it for hue, saturation, and lightness
|
|
const chromaAnalyze = chroma(seedColor).hsl();
|
|
const colorHue = chromaAnalyze[0];
|
|
const colorSat = chromaAnalyze[1];
|
|
const colorLte = chromaAnalyze[2];
|
|
|
|
// we use the createHues function from Palx to create some rainbow hues across the color spectrum
|
|
const NewHues = createHues(colorHue);
|
|
console.log(NewHues);
|
|
// We take our new hues and use Chroma to create a color with the required hue but the same saturation and lightness of our original color
|
|
let colors = {};
|
|
NewHues.forEach(function (hue) {
|
|
var newColor = chroma.hsl(hue, colorSat, colorLte);
|
|
colors[hueName(hue)] = chroma(newColor).hex();
|
|
});
|
|
|
|
// store our colors so can use them to style the background and put a hex code in the html
|
|
const redColor = colors.red;
|
|
const orangeColor = colors.orange;
|
|
const yellowColor = colors.yellow;
|
|
const greenColor = colors.green;
|
|
const blueColor = colors.blue;
|
|
const pinkColor = colors.indigo;
|
|
const purpleColor = colors.violet;
|
|
|
|
// set our rainbow background colors
|
|
red.style.background = redColor;
|
|
orange.style.background = orangeColor;
|
|
yellow.style.background = yellowColor;
|
|
green.style.background = greenColor;
|
|
blue.style.background = blueColor;
|
|
pink.style.background = pinkColor;
|
|
purple.style.background = purpleColor;
|
|
// add the hex code to the rainbow too
|
|
red.innerHTML = redColor;
|
|
orange.innerHTML = orangeColor;
|
|
yellow.innerHTML = yellowColor;
|
|
green.innerHTML = greenColor;
|
|
blue.innerHTML = blueColor;
|
|
pink.innerHTML = pinkColor;
|
|
purple.innerHTML = purpleColor;
|
|
}
|
|
|
|
// run it when we load the page
|
|
changeColors();
|
|
|
|
// tools from palx https://github.com/jxnblk/palx
|
|
function createArray(length) {
|
|
var arr = [];
|
|
for (var i = 0; i < length; i++) {
|
|
arr.push(i);
|
|
}
|
|
return arr;
|
|
}
|
|
|
|
function createHues(base) {
|
|
var hueStep = 360 / 12;
|
|
var hues = createArray(12).map(function (n) {
|
|
return Math.floor((base + n * hueStep) % 360);
|
|
});
|
|
|
|
return hues;
|
|
}
|
|
|
|
function hueName(h) {
|
|
var i = Math.round((h - 2) / 30);
|
|
console.log(names);
|
|
var name = names[i];
|
|
return name;
|
|
}
|
|
document.getElementById("color").addEventListener("click", changeColors); |