The Paint Palette

A color palette is an incredible tool for traditional artists. A thoughtful, intentional limitation almost guarantees a result with good harmony. This is because you're either working with the colors in their pure form, or some blend of them.

With just 3 or maybe 4 colors you can produce an entire range of hue and it will generally work together, because it is inherently related to its parts. Careful selection of those few pigments allows an artist to control the overall mood of the piece. This is in fact a necessary procedure as there are only so many pigments available to an artist.

Digital artists have no such limitation.

Digital Art Is Different

This is not how we tend to do things with computers, as developers nor as artists, unless we're conscious of this in some way. We do select a palette, in the beginning, but we blend each color of it deliberately for each individual element with a whole spectrum of other colors as options - rather than treating our palette as the harmonic spectrum that it is. I'd like to explore that as an alternative method.

The Role Of Color

The function color serves in perception is to indicate the existence of a feature (a 'figure') within an environment (a 'ground'). For example, if you want to indicate a circle in a red space, you wouldn't want to make the circle red.

It is further used to distinguish between separate features, sometimes relatively and sometimes not. It is not the only tool in the designer's toolbelt, but it is a big one.

When we're selecting color palettes, we likely have these roles in mind at least subconsciously. We understand that we'll need to squeeze a little bit of a spectrum out of the palette, and select colors (and their potential blends) accordingly. But we can make this explict, simply by selecting colors continuously instead of discretely from the beginning.

For the curious, this summary of color's role in design is directly lifted from Gestalt psychology.

What is a gradient?

Traditional artist may know a gradient to be "Ombré." Mathematicians might know them as continuous functions. Programmers might know them as interpolated data. In the end, the result is the same. A gradient, in this context, is just a set of colors that smoothly (continuously) transition into the next. They're carefully selected to work well together in a medium, with a purpose, and in a context.

This makes their relationship and how well they mix apparent immediately when choosing them. You can think of a gradient as a incremental blend of one color with quantities of another, until the original color is no longer distinguishable. Add 1 part red to 1 part blue and you get purple. Add 1 part red to 300 parts blue and you just get blue.

Discrete vs Continuous Palettes

Let's look at some examples to get a better idea.

A Rainbow Of Possibilities

Below you can preview two rainbows: One discrete, and one continous. Because the latter is continous you can immediately tell that these colors work well together. You can blend them at any point and expect a relatively good looking color.

This is actually the palette I use on this website, although shifted a bit. I use it to denote a gradient of "accentiness," or maybe "emphasis."

Red is urgent, blue is non-critical information. Purple is mostly there because I'm not skipping the best color (in my opinion). While choosing this palette I was trying to select colors with roughly the same luminosity and intensity, but that's a topic for another time.

Go ahead and hover or tap below to see the difference between continuous and discreet colors.

It's Black And White

Even when it comes to light/dark contrast you can easily control the level of brightness by just plucking a mid-value. This is great for example as a measure of "depth." The background might be on the left hand side of the gradient, and the foreground might be on the right.

I use this technique on the website too, although I break it into 2 gradients: One for ground, one for figures. This is how the light mode toggle switch works! All I needed to do is invert the gradient, and shift the hue 180 degrees to get light/dark mode basically for free.

Go ahead and hover or tap below to see the difference.

Design Language Is Composition

Establishing rules for your design ahead of time is a useful practice. Your color choices serve functions, and so I like to think of it as something akin to harmonic function in music.

Music has a lot of notes, computers have a lot of colors. Tone is continuous, and so is color. So we reduce the options to a "scale" of colors with known harmonic relationships.

Just like the tonic chord is a stable "home base," your ground should be relatively neutral and calm - serving as an environment for content. The dominant chord might be your figure, the point of most contrast and tension (emphasis, dissonance) from that tonic. The others serving mostly as accents, a bit of flavor to navigate between the two.

This is all purely hypothetical of course, and mainly demonstrative, but it's what lead me to think through ways of laying out my gradients.

Defining The Language

I pick 3 continuous palettes, primarily. The colors within them are chosen to maintain contrast with the other continuous palettes, while working nicely as a scale of functional intensity within themselves.

I classify them like this:

Your needs here may vary, but this is approach follows the 60/30/10 rule (tl;dr: 60% dominant [neutral], 30% secondary [contrasting neutral], 10% accent) and is generally a very flexible solution that covers most cases.

But How?

I use Sass to work easily with gradients. It's not even that much code, really, and it's worked wonders for me. This code is literally clipped from the SCSS files used on this website.

// import the necessary modules
@use 'sass:list' as list;
@use 'sass:math' as math;
@use 'sass:color' as color;

// groundiness -> figuriness (maintaining ground state)
$ground: #18181c, #2c2b39, #383355, #473355, #582a51;
// accent -> figure (while maintaining contrast against ground)
$figure: #fd82c2, #d1bcfc, #e7e7e3;
// accentiness, from calm to urgent
$accent: #af87ff, #66d9ef, #5ad79b, #d7d787, #d75a9a;

// interpolates betweeen colors in a palette
@function interpolate-gradient($colors, $percentage) {
    // ensure the percentage is between 0 and 1
    $percentage: math.max(0, math.min(1, $percentage));

    // calculate the number of color stops
    $num-colors: list.length($colors);
    $step: 1 / ($num-colors - 1);

    // find the two colors to interpolate between
    $index: math.floor($percentage / $step);
    $index: math.min($index, $num-colors - 2); // ensure we don't go out of bounds

    // calculate the local percentage between the two colors
    $local-percentage: ($percentage - ($index * $step)) / $step;

    // get the two colors to interpolate between
    $color1: list.nth($colors, $index + 1);
    $color2: list.nth($colors, $index + 2);

    // interpolate
    @return color.mix($color2, $color1, $local-percentage * 100%);
}

Light/Dark Mode For Free?

Yup! Just invert the palettes and rotate hue by 180 degrees, like so:

// flips a palette's brightness while maintaining its hue
@function flip-palette-brightness($colors) {
    $inverted-colors: ();

    @each $color in $colors {
        $inverted-colors: append($inverted-colors, adjust-hue(invert($color), 180));
    }

    @return join($inverted-colors, (), comma);
}

// flip the colors for light mode
$ground: flip-palette-brightness($ground);
$figure: flip-palette-brightness($figure);
$accent: flip-palette-brightness($accent);

Conclusion

I hope you'll consider this mildly different approach next time you're looking to overthink a design way past the point of reason. It's pretty fun to play around with, and offers a lot of flexible possibilities.