The Perfect Sunset, Part II: Luminous Colors With Sass

Posted

This is a continuation of The Perfect Sunset series. Before you read this, be sure you’ve read part one: Better Colors With Sass.

There are a lot of effects that designers use to add depth and create dimension in their designs. Shadows, borders, and gradients can give a 3-dimensional texture to an otherwise flat design. If you’re a designer, of course you’ll have known this for a long time, but until now, that’s about as far as we could practically take it. With the new tools we have today, however, we can finally take the next step in melding design with art. This article is all about light and color.

And superheroes.

This is a painting by Alex Ross. It’s very characteristic of his style. He paints his subjects as if they have been bathed in a bright, holy light, or perhaps like a photograph that’s been overexposed by one or two stops. I’m not debating the man’s talent, but as far as taste goes, I often feel like it’s a little too pure, too sterile.

On the other hand, here is a painting by Greg & Tim Hildebrandt. Now this is something that catches my attention. Their paintings are lit with incredibly vibrant light sources, and they vary greatly in hue. The highlights are firey yellows, and the shadows are cool blue and deep purple. This style captured my imagination as a child, and I spent a lot of time (and allowance) trying to collect all 140 paintings in their Marvel Masterpieces trading card set.

The Perfect Sunset Palette

It’s not just painters, either. Comic book colorists are as much artists as the pencillers whose lines they’re filling in. In that way, each colorist also has his or her own style. There are some good visceral comparison shots over on What Colorists Do that show just how much a colorist can affect the mood on a book. For a more in depth look at what it takes to color a comic book, I found this great critique by Bon Alimagno, in which he recounts his time as an editor at Marvel Comics:

From my time at Marvel, the editors valued colorists with warmer palettes rooted in playing off reds and oranges and lighter yellows and blues. Led by Richard Isanove, Laura Martin and Justin Ponsor, this style set the tone for the entire line and gave Marvel’s comics a much more inviting look and feel than most of the DC Comics line.

The Ultimates, colored by Justin Ponsor.

Alimagno describes this as “the perfect sunset palette”, and he’s right about it being more appealing. This is the same reason that photographers, too, will often prefer to light their subjects in this sunset palette. When the sun is high in the sky, highlights and shadows are too harsh, and the color of the light is less interesting. The best time of day to shoot a photograph, called “the golden hour”, is about an hour before sunset.

So far, on the web we’ve given highlights and shadows the Alex Ross treatment. When we design three-dimensional objects like buttons and forms, we default to the same properties: white highlights on top of the button and a black shadow cast below. We can make things more interesting, though, by learning from the Brothers Hildebrandt: let’s try taking cues from our surroundings by looking at real lighting and cast shadows.

Using Sass To Create Highlights And Shadows

It used to be hard to meld colors together consistently on the web. You’d have to fire up Photoshop, put a gradient over your base color, set it to the Screen blending mode, then use the eyedropper and click roughly on the pixels you like and hope it’s close enough to the rest of your color scheme to work. Once you had your color, you’d write down the hex code and memorize it or be forever referencing your color tables. What a pain! But now, you can do this more accurately and way more intuitively with Sass.

In part one, I demonstrated three of Sass’s color mixing functions: lighten, darken, and mix. Remember, we don’t want to use lighten and darken, because they’re too unpredictable for real-world use. Instead, I showed how using mix(white…) and mix(black…) were better alternatives for tinting and shading.

We could attempt to streamline this a little bit by writing a mixin or using the tint() and shade() mixins already included in Bourbon, a popular Sass library, but I have two issues with this:

  • Writing out mix(white, $color, 50%); is still shorter than writing out @include tint($color, 50%);, and it’s one less layer of abstraction.
  • More importantly, we can actually do one better and abstract the mix color to allow more than just white and black for our highlights and shadows.

If we make the first value of the mix() function reference a constant, you can set any color as your highlight color. Your color declaration might look like this: mix($highlight, $color, 50%). If you decide you want to change the atmosphere of your site from Ross to Hildebrandt, all you have to do is change the $highlight and $shadow colors once at the top of your Sass file. You don’t have to go in and modify every individual color declaration to update your theme.

I’ll show you what I mean. Let’s take our color palette from part one and add a couple more colors to it: a highlight and a shadow. You’ll notice that the highlight is not perfect white; instead it has more of an eggshell hue. Nor is the shadow perfect black; in fact, it’s a somewhat vibrant dark violet.

Hulkberry Crunch Color Palette
$hulk $berry $crunch $highlight $shadow
hsl(113, 100%, 70%); hsl(267, 100%, 35%); hsl(38, 100%, 50%); hsl(37, 100%, 95%); hsl(282, 35%, 26%);

Here’s what our colors look like when we tint them with our eggshell highlight:

Tinting Hulkberry Crunch with a Highlight Color
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                 
                     

And here is what they look like when we shade them with mix($shadow, $color, XX%);:

Shading Hulkberry Crunch with a Shadow Color
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                     
                     

If I decide I don’t like this highlight and shadow color, I can simply change the values for those two constants, and the next time the Sass is compiled into CSS, the colors will automatically reflect the new changes. With this next scheme, I’m starting again with the same Hulkberry Crunch color palette, but now the highlight is bright pink, while the shadow is a quite dark, desaturated green. It totally changes the atmosphere of the color palette.

Different Highlight and Shadow Colors
$highlight $shadow
hsl(335, 100%, 78%); hsl(165, 11%, 14%);
Tinting Hulkberry Crunch with a New Highlight Color
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                 
                     
Shading Hulkberry Crunch with a New Shadow Color
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                     
                     

With the power of Sass, you now have the ability to better manage your colors with less work, less cognitive overhead, and more flexibility. You’re also able to bump your color game up a notch by pulling inspiration from master painters, photographers, and mother nature herself. If you really want to give your designs some polish, I have one more post that demonstrates how you can finesse your color palette in different real-world contexts and give it a nice finishing touch.

Comments

No comments allowed at this time. Read my commenting policy.

← Older Newer →