The Perfect Sunset, Part III: Dynamic Colors With Sass And Media Queries

Posted

This is the final part of The Perfect Sunset series. Before you read this, be sure you’ve read the first two parts: Better Colors With Sass and Luminous Colors With Sass.

Now you have some tools and concepts for creating richer, fuller color palettes with ease. There are probably a million other places this can go, and if you come up with even better ways to mix colors, I’d love to hear them. Before that, I have a couple more ideas to share. First, I want to look toward the near future to start thinking about a new technology on the horizon that will add one more tool to your color and lighting arsenal. After that, I’ll double back on exploring the art of choosing good lights and darks.

Responsive Lighting With Luminosity Media Queries

In part two, I suggested that we can take our inspiration from the sun to choose more interesting highlights and shadows for our designs, but pretty soon we’ll be able to use the actual sun to influence our palettes. Already, many mobile devices respond to ambient lighting, but they do so mostly on the device level. It’s the reason why when you’re reading indoors or in low light, the screen dims, but when you bring it out into direct sunlight, it suddenly brightens up. Its intended purpose was initially to save battery life; why waste energy on a bright screen if you can read it just fine when it’s dim?

Similarly, apps like TweetBot use this sensor to reverse out the text. This has nothing to do with battery life and everything to do with a more comfortable or convenient reading experience. To date, this useful information hasn’t been accessible by web authors, but now there is a spec under scrutiny at the W3C. Luminosity media queries introduce a way for browsers to use the ambient lighting data and make style changes based on our surroundings.

And once again, we can use Sass to make things easier for us. If you’ve read part two, we’ve already got a color palette and a couple lighting styles that we’re using to mix colors: a highlight and a shadow.

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%)
In a “washed” lighting environment—meaning the lighting is very bright and sucks the contrast out of the screen—we could simply use our existing lighting colors, but boost the mix percentage a bit, to give things more contrast.

.content{
  color: $berry;
  background-color: mix($highlight, $crunch, 80%);

  @media screen and (luminosity: washed){
    background-color: mix($highlight, $crunch, 95%);
  }
}

Another way to approach this problem is that we could use tailored highlights and shadows for each luminosity level. In addition to $highlight and $shadow, let’s add a couple pairs of more extreme lighting schemes. When the light is “washed”, we’ll use $bright-highlight and $deep-shadow. When the light is “dim”, we’ll use $dim-highlight and $dull-shadow:
Dynamic Lighting Options
$bright-highlight $deep-shadow $dim-highlight $dull-shadow
hsl(55, 100%, 98%) hsl(266, 48%, 15%) hsl(36, 35%, 81%) hsl(282, 17%, 31%)

With these colors, you can see the kind of difference you’ll get in each lighting environment. The following table shows the different highlight and shadow mixes for each of our colors. The first set is $highlight, then $bright-highlight, followed by $dim-highlight. After that is $shadow, then $deep-shadow, and finally $dull-shadow:

Tinting And Shading Hulkberry Crunch With Dynamic Lighting
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     
                     

To achieve this kind of dynamic change based on the ambient lighting our Sass might look like this:

.content{
  border-top: mix($highlight, $crunch, 80%);
  border-bottom: mix($shadow, $crunch, 50%);

  @media screen and (luminosity: washed){
    border-top: mix($bright-highlight, $crunch, 80%);
    border-bottom: mix($deep-shadow, $crunch, 50%);
  }
  @media screen and (luminosity: dim){
    border-top: mix($dim-highlight, $crunch, 80%);
    border-bottom: mix($dull-shadow, $crunch, 50%);
  }
}

I like this. The code is still easy to interpret, but you’re given an added layer of flexibility. In this example, the mix percentage doesn’t change at all throughout each of the media queries, only the highlight and shadow constants. Of course you can mix and remix as you see fit.

The Art And Design Of Highlights

There are other reasons to use multiple highlights besides taking advantage of technological features. Take another look at this painting by the Hildebrandts.

Greg & Tim Hildebrandt’s painting of Dash Rendar eagerly speaking with Princess Leia while Luke creeps jealously in the background

Notice how there are a couple sources of light? There’s light coming from above, which gives most of the painting a bluish cast, but there’s another light source coming from below, creating more natural yellow highlights and orange skin tones. These two colors compliment each other, which really ramps up the vibrancy of the piece.

Use this concept to create accents that draw the eye around the page:

Accent Lighting Colors
$accent-highlight $accent-shadow
hsl(16, 100%, 69%) hsl(236, 45%, 27%)
Tinting And Shading Hulkberry Crunch With Accent Lighting
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                     
                     
                     
                     
                     

Conversely, you can set special colors for the background of your page, which allows it to recede, while the rest of your content gets the normal batch of highlights and shadows and really pops!

Background Lighting Colors
$background-highlight $background-shadow
hsl(235, 100%, 87%) hsl(235, 13%, 18%)
Tinting And Shading Hulkberry Crunch With Background Lighting
0% 10% 20% 30% 40% 50% 60% 70% 80% 90% 100%
                     
                     
                     
                     
                     
                     

Whew! So, just how many highlights do we need to have for our sites? The answer is, as many as you need, or as few as you want. There are no hard and fast rules. You’re the designer here, so you get to decide what works and what doesn’t. Maybe you want to use accent highlights to bring certain content to the fore. Maybe your initial highlights and shadows have enough contrast that you don’t need to have a $bright-highlight and $deep-shadow. Maybe you really just want to use black and white to keep things crisp and sanitized. I get it, it’s cool! Don’t mess with the classics. Whatever, man. Just give it some thought and have a good reason.

Hopefully you’re already dreaming up some big ideas or crazy experiments. That’s one of the great things about new and significant technological advances. Sass allows us to easily and intuitively manage colors in general, gives us the freedom to rediscover and explore the lost art of color theory in design, and will help us take advantage of new technology to do things with our websites we’ve never been able to do before.

This is the last part in the Perfect Sunset series, but if you need to see it to believe it, I’ve created a demo site so you can see just how much of a practical difference color mixing can make in your design.

Comments

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

← Older Newer →