Smashing Newsletter #305: Color Palettes Generators and Tools

With CSS variables, HSLA, color generators, color combinations and color scales for data visualizations. Issue #305 June 15, 2021 View in the browser 💨

Smashing Newsletter

Ciao Amici,

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

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)


From our sponsor

Watch Gavin Strange’s Series Of Design Classes On Editor X

Watch Gavin Strange’s Series Of Design Classes On Editor X
Designer Gavin Strange puts his heart and soul into every detail of his unconventional creations. Learn how he brings his creative genius to the canvas with advanced features like header scrolls, VideoBox and hover interactions. Watch now.


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.

Data  Color Picker

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 Meetsthe 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!

Smashing Online Events
Web dev and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with personal and inclusive events.

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:


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.

Color 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)


From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.


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.

CSS Gradient

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

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.

9. New On Smashing Job Board


10. Popular Articles


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 time!


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


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

Smashing Newsletter #304: Front-End Boilerplates and Starter Kits

Tuesday, June 8, 2021

With reliable CSS/JavaScript boilerplates for all kinds of projects, from static site templates to React/Vue starter kits.Issue #304 • June 8, 2021 • View in the browser 💨 Smashing Newsletter Unjani

Smashing Newsletter #303: VS Code Extensions

Tuesday, June 1, 2021

With useful VS Code extensions and little tools to help you save time and avoid headache when writing code. Issue #303 • June 1, 2021 • View in the browser 💨 Smashing Newsletter Namaste Smashing

Smashing Newsletter #302: Figma Plugins and Tools

Tuesday, May 25, 2021

With new features in Figma, useful Figma plugins, a template for Figma wayfinding, simpler annotations and integration with Vue.js, and how to manage design systems in Figma. Issue #302 • May 25, 2021

Smashing Newsletter #301: Front-End Boilerplates

Tuesday, May 18, 2021

With front-end boilerplates: global CSS reset, favicons, HTML email template and VS code snippets for React, Vue, Angular and TypeScript.Issue #301 • May 18, 2021 • View in the browser 💨 Smashing

Next Online Workshops on CSS, Design Systems and UX

Friday, May 14, 2021

Boost your skills online, with workshops on everything from front-end to design. Meet our new live workshops on front-end & design. • View in the browser 💨 SmashingConf Newsletter Howdy Smashing

✏ Top 8 Design System Examples, WP Pros and Cons, Website Load Testing,  and more...

Friday, July 23, 2021

Northwestern Online MS in Information Design [ad] SPS.NORTHWESTERN.EDU Making your Mark: 6 Tips for Infusing Brand Essence into your Website WEBDESIGNERDEPOT.COM COMMENTS Top 8 Design System Examples

How to Attract Your Dream Clients

Friday, July 23, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

17 Outdoor Pendant Lights Sure to Brighten Your Next Project

Friday, July 23, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and

Color Tools, Lazy-Loading, Loan Calculator, UI/UX Tips, Internet Archive

Friday, July 23, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar July 23 2021 Color Tools And Resources smashingmagazine.com Do

✏ Turning Designs Into Code, Voice Interfaces 101, Hexcolorpedia, and more...

Thursday, July 22, 2021

Northwestern Online MS in Information Design [ad] SPS.NORTHWESTERN.EDU A Step-By-Step Process for Turning Designs into Code CSS-TRICKS.COM COMMENTS Voice Search and Voice Interfaces 101 ADAMFARD.COM

Catherine Zeta-Jones and Michael Douglas List Their Manhattan Pad + More Real Estate News

Thursday, July 22, 2021

Plus, a first look at the new office of STUDIOpractice (image) Architectural Digest AD PRO Logo Essential interior design books 8 Essential Books Every Interior Design Lover Should Read Read More →

👨🏻‍💼 Professional Job Search App Designs and more

Thursday, July 22, 2021

This Week's UpLabs Freebies, Picked Fresh For You 🌻 Check out these fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize

✏ Issue #496: Designing for the Unexpected, 9 Must-Install Craft Plugins, Freelancer Club, Learn MySQL for Free, and more…

Thursday, July 22, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #496 JULY 22, 2021 Newspaper: Your News & WooCommerce WordPress Theme With over 111000 sales worldwide, the best-selling Newspaper WordPress

Now Hiring: Designer at MADE Design (and More!)

Thursday, July 22, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Long-Covid, Everyday Accessibility, Typewriter Animation, Bugherd, Mockups vs Code

Thursday, July 22, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar July 22 2021 How will long-Covid change the accessibility