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: - [CSS Generators]( - [SVG Generators]( - [Useful Front-End Boilerplates And Starter Kits]( - [Useful VS Code Extensions For Front-End Developers]( - [Accessible Front-End Components]( 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 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! [Smashing Online Workshops]( 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: - [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. [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 [Northwestern: Online Master’s in 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 - [Data Analytics Manager]( at DLH (Silver Spring, MD) - [Senior WordPress Developers, Social Impact Design Firm (FT & Freelance)]( at Constructive (New York) - [Frontend Engineer]( at Giant Swarm GmbH (Remote) --------------------------------------------------------------- #10. Popular Articles - [Spinning Up Multiple WordPress Sites Locally With DevKinsta]( - [When CSS Isn’t Enough: JavaScript Requirements For Accessible Components]( - [Web Design Done Well: Making Use Of Audio]( - [Useful Front-End Boilerplates And Starter Kits]( - [Three Front-End Auditing Tools I Discovered Recently]( - [Meet :has, A Native CSS Parent Selector (And More)]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](