A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.

Somehow I missed that deep dive into color theory, perception of contrast, and human physiology by Andrew Somers, author of APCA and a co-author of the future WCAG 3 accessibility guidelines. ​“This new method directly considers perceptual lightness/​darkness differences of text against a background, and generates a ​“lightness contrast” value, noted as Lc. From here, we can determine the minimum size and weight of a font that is going to be fluently readable, and together these calculated predictions can guide our design choices.” He provides some practical guidelines for the transitional period, where we know that existing guidelines are expected to be revised or replaced. (Worth mentioning that my tool Accessible Palette supports both WCAG 2 and APCA contrast algorithms. Also, see the new Polychrom plugin below.)

Molly shares the best practices for working with color that she learned from the Adobe Spectrum design system.

The introduction of wide gamut Display P3 colors to the design tools ​“broke” the familiar hex notation that all of them have been relying on. The transition to modern notations will be painful and take time. I share some context in this thread, but the main takeaway is to NOT use the #RRGGBB values for hand-off or external tools when working with P3 colors.

Andrey Sitnik (author of PostCSS and Autoprefixer, used on pretty much every website) goes a little deeper into platform-independent (CSS) vs. platform-specific (Figma, Photoshop) implementation of P3. He also added ​“Figma P3 hex” as one of the accepted formats to OkLCH Color Picker, which makes using Figma values in OkLCH much easier.

Christine Vallaure reminds us of using Selection Colors for applying variables to multiple objects.

An interesting challenge from Miguel Solorio — how to make nested icons in a component inherit color overrides when switching between outline and solid styles without having to outline the strokes? Two solutions that surfaced in comments are using a mask or a union.

So excited about this release! I spent a good chunk of my Config talk discussing workarounds for using wide gamut colors in Figma, and this update addresses them all. See this thread by Qi Linzhi on the engineering challenges of implementing support for Display P3.

The next thing I hope for is a more precise way to select colors. Figma relies on hex values in the UI, but they’re supposed to be limited to sRGB and aren’t representative of what you’ll see in the browser. The Dev Mode uses the correct color(display-p3 R G B) syntax as an output, but that doesn’t help much with input. Besides that, I’d like to see when the color is outside of the sRGB range and what is its closest fallback. OkLCH isn’t the easiest color space to use, but OkLCH picker gets that part right.

Jan Toman made an unofficial Figma library of variables and styles that use the default Tailwind CSS configuration.

Library with all colors from Radix Colors, an open-source color system for designing beautiful, accessible websites and apps. Also made by Jan using variables and light/​dark modes.

Luis shares good tips and thoughts on using, naming, and organizing color variables, as well as setting up modes for themes. Additionally, he summed up all of the above into a Variable starter kit on the Figma Community.

Did you know that you can use math inside color values in Figma? Really cool.

Denislav Jeliazkov from UI Learn shows quick ways to improve the use of colors in interfaces.

You know I love color tooling! GitHub has been doing some excellent work on its color system, which is the foundation of the Primer design system. Last year they wrote about building internal color tooling for theme building, and in the new post, they share their process for making contrast changes in both default light and dark modes as part of GitHub’s larger accessibility strategy.

So happy to see that this geeky tool hit 2nd place as a Product of the Day at ProductHunt last week! Its author Roman Shamin collaborated with me on Accessible Palette in the past and built a few other projects featured in this newsletter. While the UI of the color picker may seem complicated at first, its guiding principle was educating and demonstrating new concepts underlying the OKLCH and LCH color spaces. It’s my go-to tool for working with these color spaces and wide-gamut P3 colors.

For additional context, see an in-depth article OKLCH in CSS: why we moved from RGB and HSL by Roman’s co-author on using OKLCH color space in code, as well as my article Accessible Palette: stop using HSL for color systems on using perceptually uniform color spaces as a foundation for design systems.

Figma always supported #RGB and #RRGGBB CSS syntaxes in color fills, but now you can also use rgb(), rgba(), hsl(), and hsla(). Pretty neat!

This new color palette generator took ​“design Twitter” by storm last week, and for a good reason! ​“Poline is an enigmatic color palette generator, that harnesses the mystical witchcraft of polar coordinates. Its methodology, defying conventional color science, is steeped in the esoteric knowledge of the early 20th century. This magical technology defies explanation, drawing lines between anchors to produce visually striking and otherworldly palettes.”

While Figma doesn’t have native support for color tokens yet, Luis kicks off a discussion of how they might work in the future. His approach is similar to how I usually organize color tokens in CSS, so hopefully that will be the direction they take!

A preview of a new Figma plugin that offers Paper-like paint mixing. That demo brought so many memories! Paper used to be my go-to drawing app on the iPad a decade ago. Love to see some of its smart UI elements getting a second life as Figma plugins.

Dan Hollick with a great thread on light and dark modes, perceived contrast, APCA, and why we tend to tint dark backgrounds blue.