Colors

What are these colors?

You may have noticed the animated colors on my site. The JavaScript is intentionally not minified so you can inspect how it works.

Most computer programs and interfaces use RGB color spaces. Creating a smoothly flowing color gradient in RGB would be complex, but this implementation is quite simple. The key is using HSL, an alternative color space that makes this effect possible.

The technique requires two additional components: time and sine waves.

A sine wave oscillates between -1 and 1:

When you use this sine wave as the hue value in HSL (converted to 0-360 range), you get a smoothly animated rainbow with all hues at one saturation and one luminosity:

This creates a rotating color that changes based on the current time. The seamless loop is possible because the hue values for 359° and 1° are adjacent in the color wheel.

By applying this technique to create a background: linear-gradient (which interpolates between 2 colors), you get an inexpensive continuously changing background. When you create two colors offset by a small time difference, you achieve a continuously changing background gradient.