March 4, 2025 Smashing Newsletter: Issue #497
This newsletter issue was sent out to 191,778 subscribers on Tuesday, March 4, 2025.
Editorial
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!
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 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)
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.
As always, here’s a quick overview:
- Building Modern HTML Emails dev
with Rémi Parmentier. Mar 3–11 - Figma Workflow Masterclass design
with Christina Vallaure. Mar 4–12 - Smart Interface Design Patterns — UX Training UX
with Vitaly Friedman. Mar 7 – Apr 7 - Design System Planning and Process workflow
with Nathan Curtis. Mar 20–28 - Cognitive Biases 101: How They Impact Users, Research, and Teams free
with Stéphanie Walter. Apr 10 - Theming Design Systems workflow
with Samantha Gordashko. Apr 8–23 - The Secrets of Web Performance dev
with Ryan Townsend. May 7–21 - How To Measure UX & Design Impact ux
with Vitaly Friedman. Video course + live UX training - Jump to all workshops →
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)
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?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.