Smashing Newsletter: Issue #305

Editorial

Color may seem to be one of the quite obvious things in the world, but how do you pair them efficiently? How do you define colors in CSS to build up a color system? How do we use them for data visualization in order to prevent accessibility issues? In this newsletter, we’re taking a closer look at color from different perspectives, and provide a few handy tools for you to use everyday.

In case you’re looking for further useful tools and resources, we’ve prepared a couple of handy guides for you recently — they are being updated regularly, so that’s a good couple of bookmarks to keep close:

On another note, we are very proud and honored to invite you to our new Smashing meetup on everything CSS: Smashing Meets will be taking place on July 8th with sessions by Miriam Suzanne and Ahmad Shadeed on CSS container queries and CSS in general. We’d love to see you there, of course!

For now, though, let’s take a closer look at colors — and happy coloring, everyone! :–)

— Vitaly (@smashingmag)

1. CSS Variables And HSLA

How do you usually define colors in CSS? With HEX? RGBA? Or do you use HSLA? Maxime Heckel used a mix of HEX and RGBA, until he came across a clever pattern that helped him clean up the mess and lighten his codebase. The foundation: HSLA and CSS variables.

The Power of Composition with CSS Variables

HSLA stands for Hue Saturation Lightness Alpha, the four main components necessary to define a color. When you use similar colors — different shades of blue, for example, — you will notice that they share the same hue and saturation. With Maxime’s approach, you can define a part of the hue and saturation through a CSS variable and reuse it to define your other color values — to build a color scale from scratch, for example. A fantastic example of how powerful CSS can be. (cm)

2. A Super-Fast Color Schemes Generator

Do you need to create a color palette? A handy tool to help you do this — and more — is Coolors. At the heart of Coolors is a sleek color palette generator: To start off, it suggests you a random palette that you can adjust by playing with shades or, if you prefer, change it completely by introducing new colors.

Coolors also lets you pick a palette from a photo and create collages, gradients, and gradient palettes. A contrast checker calculates the contrast ratio of text and background colors for you to ensure your color combinations are accessible. And if you just need a bit of inspiration, there are thousands of color themes waiting to be explored, too — just click the colors you like, and the hex values will be copied to your clipboard. Enjoy! (cm)

3. Color Scales For Data Visualizations

Different kinds of data visualizations have different needs when it comes to color. When you’re designing pie charts, grouped bar charts, or maps, for example, it might be a good idea to choose a series of colors that are visually equidistant. This ensures that they can be easily distinguished and compared to the key. The Data Color Picker powered by Learn UI Design helps you create such visually equidistant palettes based on two endpoint colors that you specify.

For those instances when you want to show the value of a single variable in your visualization and, thus, only need a color scale based on one color (with a darker variation representing a higher value and a neutral color a value closer to zero), there’s the Single Hue Scale generator.

Last but not least, divergent colors are most useful for visualizations where you’re showing a transition from one extreme through a neutral middle to an opposite extreme (a common example is a “how Democrat/Republican is each state in the US” map). The Divergent Color Scale generator helps you find the best scale for occasions like these. A powerful trio to take your data visualizations to the next level. (cm)

4. Upcoming Smashing Online Events

Direct from the Smashing family, we are very proud and honored to invite you to our upcoming online event — Smashing Meets — the CSSummer edition. The event will take place online, on July 8th, with sessions by Miriam Suzanne and Ahmad Shadeed on what’s happening in CSS — with a particular focus on CSS container queries. We’d love to see you there, as it will be good fun, of course!

In general, useful tooling is pretty much at the heart of the online workshops that we run here at Smashing — whether it’s around accessibility, design or front-end.

For the next workshops, we have coming up:

Creating & Maintaining Successful Design Systems Dev
with Brad Frost. June 29 – July 13.
Level-Up With Modern CSS Dev
with Stephanie Eckles. July 8–22.
Designing Websites That Convert UX
with Paul Boag. July 22–30.
The TypeScript Masterclass Dev
with Stefan Baumgartner. August 5–19.
Designing The Perfect Navigation UX
with Vitaly Friedman. August 26–27.
Vue.js: The Practical Guide Dev
with Natalia Tepluhina. September 14–28.
Building Modern HTML Emails Dev
with Rémi Parmentier. September 16–24.
Architecting Design Systems Workflow
with Nathan Curtis. September 2–10.
Accessible Front-End Patterns Dev
with Carie Fisher. Sept. 30 – Oct. 14.
Jump to all online workshops →

5. Color Shades Generator

Another useful tool for dealing with color is the color shades generator that Vitaly Rtishchev and Vlad Shilov built. You can enter a hex value and the tool will show you a series of lighter and darker shades.

To customize the shade series, simply adjust the percentage by which you want to lighten/darken the original color and change the saturation shift. Once you’re happy with the result, you can copy the hex values of a color or the entire palette with one click. (cm)

6. CSS Gradient Generator And Resources

CSS gradients are a quick way to give your design a fresh and friendly touch. A fantastic little tool to help you generate and implement both linear and radial gradients is CSS Gradient. Once you’ve entered the colors you’d like to include in your gradient, you can adjust the position of the transitions on a slider. The CSS code mirrors the changes in realtime and can be copied to the clipboard with just a click.

But there’s more than just the gradient generator, the site also features helpful content all around gradients: technical articles, gradient examples from real-life projects, tutorials, and references like collections of shades, gradient swatches, and more inspiration. A comprehensive look at gradients and how to use them. (cm)

7. Real-World Color Palette Inspiration

There are a lot of fantastic sites out there that help you find inspiring color palettes. However, once you have decided on a palette you like, the biggest question is still left unanswered: How should you apply the colors to your design? Happy Hues is here to help.

Happy Hues gives you color palette inspiration while acting as a real-world example for how the colors could be used in your design. Just change the palette, and the Happy Hues site changes its colors to show you what your favorite palette looks like in an actual design. Clever! (cm)

8. From Our Smashing Friends

We love supporting wonderful community efforts, and we are happy to share articles and resources from lovely folks in the web community. This week, we’d like to give a huge shout out to the UX Design Weekly and RWD Weekly newsletters. Community matters. 🧡

UX Design Weekly
Staying on top of what’s happening in the community can be hard. The UX Design Weekly newsletter has your back with a hand-picked list of the best user experience design articles, resources, portfolios, and more every week.
RWD Weekly Newsletter
A free, once–weekly round-up of responsive design articles, tools, tips, tutorials and inspirational links. Justin spends hours curating the best content, interview industry leaders and send it to you every Friday.

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next week!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

June 15, 2021 Smashing Newsletter: Issue #305

Previous Issues