Pryvit! Smashing Friends,
How difficult can color be? We do have plenty of new color spaces and color formats. We also need to ensure accessibility and consider colorblindness. And then there is a question of color organization — from design tokens to color palettes for dark mode, seasonal campaigns and “snowflake” scenarios.
Color decisions aren’t easy, especially when you have to make color work at scale, fix a broken palette or create accessible palettes that should work for everyone. In this newsletter, we’ll look into how to do just that.
On our end, this week we’re launching Smart Interface Design Patterns UX Training 🍣 — a practical UX training with complex UX challenges — with complex data tables, filters, navigation and dashboards. Only few last tickets left!
Join Smashing Membership and get a free online conference ticket of your choice.
We have a steadily growing Smashing Membership community of people who love useful content, appreciate friendly discounts, and are an active part of our lovely web community. Become a Smashing Member until March 7, and get a free online conference ticket of your choice.
We absolutely can’t wait to see you again, in-person or online, or somewhere between emails and Slack conversations. So with that, let’s dive deep into everything colors!
— Vitaly
1. Color Toolbox
After having spent too much time trying to find the right tools when working with colors, Pascal Bürkle decided to create a simple but useful toolbox with everything one might need to tackle common color-related tasks and problems: hue.tools.
It’s open source and offers plenty of options that make working with colors straightforward — and fun! You can combine and merge multiple colors while visualizing color steps in between, modify and blend colors, and get information about a color, including the color value translated to different color spaces, CSS values, harmonious combinations.
And, in case you need a bit of inspiration, the little helper also has links to creative projects that use the color. A wonderful little helper you might want to keep close. (cm)
2. How To Fix A Broken Color Palette
Too many choices, inconsistencies, inaccessible color combinations, and color names that are difficult to make sense of — fixing a broken color palette can seem like an overwhelming task. So where do we begin? Adam Wilson shares precious insights into how the Skyscanner team refined their color palette, along with process, naming, testing, and explorations to get there.
Skyscanner’s new color palette is split into Brand and Product libraries. They drive from the same primitive values but are used differently to enable both distinctive brand moments and accessible, usable interfaces. The complete process took the Skyscanner team a year and involved dozens of contributors and stakeholders. With lots of practical takeaways, the case study is a must-read for anyone who is about to tackle a similar challenge. (cm)
3. Accessible Color Palettes
Color contrast and color accessibility can be a tricky topic. We all know how important it is, yet many designers fear that color accessibility will limit their color palette and, thus, their creativity. Of course, making colors accessible means that you might not be able to use exactly the colors you had imagined, but this doesn’t mean that you can’t be creative, as Stéphanie Walter shows.
In her article on creating an accessible and contrasted color palette, Stéphanie presents tools and quick tips to help you master the task. Using a practical example, she explains step by step how she checks contrast, tests the palette, and what to do when a color combination doesn’t meet the requirements. Practical tips that show that building an accessible color palette isn’t as hard as it might seem. (cm)
From our sponsor
Pixel-Perfect UIs, Everytime—Without The Guesswork
Tired of visual bugs slipping past functional tests? Meet BrowserStack’s Visual Testing Suite — featuring Percy, App Percy, and Visual Scanner—designed to catch every inconsistency before they impact your users. AI-powered visual testing and seamless CI/CD integration on over 20,000 real devices. Get started for free!
4. Useful Color Tools And Resources
You’re struggling with color and don’t know where to begin? Vitaly compiled useful techniques, guides, and tools that provide a good foundation for mastering all the fine little details of working with color.
In the collection, you’ll find guides on how to set up color palettes in your design system, case studies on building accessible color systems, color palette generators, contrast checkers, naming tools, color space converters, and much more to make dealing with colors easier. One for the bookmarks. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
6. Color Parrot
Beef Noodle Broth, Pineapple Gold, Alaskan Moss. These are just three of the more than 30,200 color names that are part of David Aerne’s Color Names project. The open-source project aims to create a list of color names as large as possible, while guaranteeing a good name quality.
For some quick color inspiration, David also created Color Parrot. Based on his collection of color names, Color Parrot lets you discover colors you might not have had on your radar yet. You can either tweak the saturation, light, and hue on a turning color wheel to get inspired or use the X bot to identify and name the colors in an image. (cm)
From our sponsor
Storyblok Now Supports Richtext!
Storyblok Now Supports Richtext in frontend SDKs for React/Next, Vue, and Nuxt, making it easier for devs to integrate custom components and control content. Features like customizable links and component replacements are available. Read more about the update ↬
7. OKLCH Explained For Designers
With modern browsers embracing OKLCH, the days of RGB might be over soon. The new OKLCH color space offers 30% more colors and is closer to how we actually perceive colors. If you haven’t gotten around to wrapping your head around OKLCH yet, Samuel Wong wrote a quick guide, aimed at designers.
In the guide, Samuel explores why designers should care about OKLCH and how it makes it easier to fine-tune a color scale compared to the good old RGB or HSL. So, as promising as OKLCH is, why are we still using RGB?
As Samuel points out, while modern browsers support the new color space, native app frameworks are still falling behind with RGB and HSL, and even design tools like Figma and Sketch have no native support yet. Also, the majority of home-use desktop monitors still only support the sRGB color space. Nevertheless, with great backward compatibility in modern CSS, we can already start using OKLCH today, as long as we set an RGB fallback. (cm)
8. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.
9. Recent Smashing 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
