Color Playground

My website doesn't use any colors because frankly, picking colors is difficult! Surpisingly difficult. And not just difficult for me, it seems!

I once asked my friend who is a stellar front-end developer if she had a personal website. She replied that she didn't because everytime she starts to build one she quickly gets overwhelmed with color picking and gives up!

About this playground

I'm beginning an exploration into the process of systematically generating a beautiful color palette. A perfect solution is I'll pick one starting color and then boom a spectacular n-color palette is generated.

In this most simple implementation I'm using CSS properties ( variables ), the calc() function and the mathematics of color theory to generate monochrome, analagous, complimentary, triadic, tetradic and split complementary colors. It all starts with a base color's components stored in a CSS variable, like this:

      
      :root {
        --base-lightness: 71%;
        --base-chroma: 0.17;
        --base-hue: 158;
      }
      
    

Then, we apply calc() to those variables. For example to generate a monochrome palette we alter the lightness of the base color:

      
      .base {
        background-color: oklch(
          var(--base-lightness) var(--base-chroma) var(--base-hue)
        );
      }
      
      .lighter {
        background-color: oklch(
          calc(var(--base-lightness) + 10%) var(--base-chroma)
            var(--base-hue)
        );
      }
      
      .lightest {
        background-color: oklch(
          calc(var(--base-lightness) + 20%) var(--base-chroma)
            var(--base-hue)
        );
      }
      
    

Note: This playground uses OKLCH colors. If you aren't yet familiar with OKLCH colors I highly recommend this blog post from Evil Martians along with their OKLCH color picker. Here's some sample output.