2023-02-26
🔗 A technique for generating beautiful color gradients
There is only one non-black-and-white piece in the whole UI which is the color gradient circle in the homepage and in the header of the posts. I thought adding a small piece of color would be a fun highlight given the whole website is set in neutral shades.
But I didn't want to commit to a specific brand color, also there are many nice color gradients! So I experimented with the idea to generate a new gradient every time the page is loaded. I remember I liked the gradients generated from this nice online gradient generator, by reading through the generated css I found out that a technique to generate nice looking gradients is to combine radial-gradient and linear-gradient.
background-image: radial-gradient(
100% 100% at 0% 50%,
#d53a42 19%,
rgba(204, 58, 78, 0.75) 39.25%,
rgba(194, 57, 86, 0.5) 59.5%,
rgba(177, 56, 94, 0) 100%
), linear-gradient(180deg, #ffffb5 0%, #fef372 7.33%, #f6d860 22%, #f3bf59
27.67%, #ed894b 39%, #e47346 45%, #d53a42 57%, #c93a51 63.33%, #b1385e 76%, #97385d
82%, #6a324f 94%);
# Generate the colors
The first step is to generate a pleasing palette of 4/5 colors for the linear-gradient, to achieve this I learned from the technique used in this repository meodai/farbvelo:
- it picks a series of color stops ℕ0 hues at a user defined minimum angle ∠ generated by the hsluv/hsluv library, a human-friendly alternative to HSL.
- it interpolates between color stops in CIE L*a*b* by using gka/chroma.js, a library for color manipulations.
I then pick a middle value in the color palette to generate the radial-gradient color stops. In gradient.js I do those steps and then export the result as a css string:
function setColors(array) {
let gradient = `radial-gradient(100% 100% at 0% 50%, ${array[2]} 19%, rgba(0, 0, 0, 0) 100%), linear-gradient(180deg, ${array[0]}, ${array[1]}, ${array[2]}, ${array[3]}, ${array[4]}, ${array[5]})`;
document.querySelectorAll(".gradient").forEach((el) => {
el.style.background = gradient;
});
}
# Let the user choose
With the gradient generator working, I really liked the outcomes, but I also wish any reader of this website could find their favorite gradient and have it persist across page loads. So I made the coloured circle in the homepage a clickable button that generates a new gradient and store the result in the browser localStorage.
Some nice gradients
