Skip to main
Colored circles in a flow chart

Color Theory for Coders

from Natalya Shelburne

If you write code and you want to delve into design, Natalya Shelburne’s Practical Color Theory for Coders will get you up and running with a beautiful, cohesive, and accessible color palette using Sass color functions, and teach you why her palettes work so well, all at the same time.

Color Theory Demo

So you write code, but design intrigues you and you’d like to delve deeper. Where to start? The sheer number of tools and tutorials is overwhelming. Later this week, I’ll be publishing an article with my recommendations for how to get started, but while you’re waiting, check out Natalya Shelburne’s [Practical Color Theory for People WhoCode][].

Natalya is a fine artist, speaker, and front-end developer. Her Sass color functions make it easy to create beautiful color palettes. Start with any HSL color – for example, your client’s primary brand color. Use Natalya’s color functions to find a complimentary color. Mix and lighten your primary and secondary colors to create neutral colors. Darken and lighten these colors even further to create black and white. Voila! You’re designing with color.

In the physical world, colors that appear next to one another experience similar lighting conditions: the bright light of morning or the dim yellow glow of a desk lamp. Using Natalya’s color functions, you can mix your primary and secondary colors to establish the same type of color relationship on the web. Check out Natalya’s demo for detailed instructions. If you’re that person who’s always asking why, she’s even provided a special toggle for you!

Have some color theories of your own? Let’s discuss. Send us a message via Twitter.

Recent Articles

  1. Article post type

    Generating Frontend API Clients from OpenAPI

    API changes can be a headache in the frontend, but some initial setup can help you develop and adapt to API changes as they come. In this article, we look at one method of using OpenAPI to generate a typesafe and up-to-date frontend API client.

    see all Article posts
  2. Stacks of a variety of cardboard and food boxes, some leaning precariously.
    Article post type

    Setting up Sass pkg: URLs

    A quick guide to using the new Node.js package importer

    Enabling pkg: URLs is quick and straightforward, and simplifies using packages from the node_modules folder.

    see all Article posts
  3. Article post type

    Testing FastAPI Applications

    We explore the useful testing capabilities provided by FastAPI and pytest, and how to leverage them to produce a complete and reliable test suite for your application.

    see all Article posts