Coloring With Code — A Programmatic Approach To Design

Speaking of George Francis in the previous post, he’s also got a post up on Codrops on color palettes.

Learn to create beautiful, inspiring, and unique color palettes/combinations, all from the comfort of your favorite text editor!

If you’re not into the color palettes themselves, at least give the part where he explains LCH a read.

In short, LCH is a way of representing color just like RGB or HSL, but with a few notable advantages — the most important for this tutorial being its perceptual uniformity.

The color manipulation and conversion is powered by a package named culori, created by Dan Burzo.

Coloring With Code — A Programmatic Approach To Design →
Culori →


Based on his code, I created this interactive demo that dynamically creates a color palette using his createHueShiftPalette method:

See the Pen Coloring With Code — A Programmatic Approach To Design — Interactive Demo by Bramus (@bramus) on CodePen.

💡 Use the color input to change the base color.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.