An interesting take from The Culturist on why color is vanishing from our world: ​“The underlying theory in all of these cases is that while color is sensory, unstable, and chaotic, form is rational, stable, and pure. Once you see this bias, you begin to notice how deeply it has shaped the modern world — and how it helps explain our current retreat into colorlessness.”

Always happy to support an argument for adopting OKLCH and Display P3: ​“Many design systems use hex values to represent colours. As far as I’m aware, there’s currently no way to provide a colour space with a hex value in CSS. That’s okay though — the color() function includes a parameter for the colour space. color(display-p3 1 0 0) is bright red in Display P3. In fact, color(1 0 0) is not allowed. A colour space must be provided. Are you noticing a trend? Colour spaces will be required in the future.” 

See if color contrast meets accessibility standards right within the color picker. I’m glad this is now built-in and the UI looks great (see an X thread from Billy Sweeney), but as a color nerd and creator of Accessible Palette, I wish Figma went a step further and supported APCA. I wrote about issues with the WCAG 2 back in 2021 (see the last section), and Arthur Objartel made a strong case for supporting it as well.

Roman noticed that Figma natively converts OKLCH to HEX in the color field. I held my breath for a moment, but the conversion is inaccurate in files using the P3 color profile. For those curious about why this is a tricky problem to solve, I wrote an in-depth thread a while ago.

Dev Mode users can now see variables used in gradients. Binding variables to gradients was also added to the plugin API so plugin developers can offer variables support out-of-the-box.

Marcus Farrell prepared a community resource with the new P3 color library used by Tailwind 4.

Luis considers using opacity to decrease the volume of variables in the design system.

“The Pinwheel Plugin exports variables as Design Tokens JSON, and can use mode names to create groups for light mode, dark mode, and high contrast variants. It also has support for sRGB and Display P3, allowing colors to maintain correct appearance when being moved from Figma to Pinwheel.” Pinwheel is a new Mac app for color conversions and design systems from Bjango, the company behind the popular app iStat Menus.

Tailwind CSS v4 beta includes a modernized P3 color palette. In this thread, Gleb Stroganov explores and compares the new OKLCH palette to the old one in v3. Tailwind’s adoption of P3 colors might be the tipping point in popularizing wide gamut colors on the web.

Justin Jay Wang experimented with different methods for generating random gradient images, including those used by OpenAI visual identity. He explains the difference between heightmaps, layered radials, and AI-generated gradients. Loved this part: ​“In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.”

A new plugin from Daniel Destefanis for creating mesh gradients either by hand or by using the colors from an image. Available on Figma Community or as a standalone tool.

A fully redesigned eyedropper for UI3 now supports color variables and styles! Rotate between color formats with the Tab key — previously, that could have been changed only in the color panel. Switch between picking the raw color value or a variable/​style with a Shift key or creating and applying a new color variable/​style by using the shortcut Command-Shift. See an in-depth demo from Ana.

This update is near and dear to my heart, as I talked about color formats and working around a lack of support for styles in an eyedropper back in 2023 at Config. Love that both features are now so straightforward to use!

The talented design team at Evil Martians makes a strong case for adopting opacity as a core component of your color system: ​“Transparent colors are a staple of modern operating systems, yet, for some reason, web apps still underutilize this marvel of modern interface design. And what happens when you properly integrate transparent colors into your design toolkit? You can minimize the number of design tokens, styles, and component variations — making your workflow more efficient and flexible.”

Smashing Magazine interviewed Björn Ottosson, the Swedish engineer who created Oklab color space, about developing an effective model with good hue uniformity that handles lightness and saturation well, and how it spread across the ecosystem.

One of the most common problems that Oklch solves: ​“One problem with sRGB is that in a gradient between blue and white, it becomes a bit purple in the middle of the transition. That’s because sRGB really isn’t created to mimic how the eye sees colors; rather, it is based on how CRT monitors work. That means it works with certain frequencies of red, green, and blue, and also the non-linear coding called gamma. It’s a miracle it works as well as it does, but it’s not connected to color perception.”

Jake made a plugin that brings the power of CSS color-mix() into Figma. Use it to generate swatches, variable ramps, and solid or gradient fills. I highly recommend watching Jake’s video if you’re unfamiliar with this CSS notation.

I look forward to the next release of Supa Palette with support for OKLCH and reusable configs!

It was a great episode of the ​“In the File” series, where Luis Ouriach talks to the designer Yann-Edern Gillet and engineer Andreas Eldh from Linear about the recent update of their design system. I love their use of the LCH color space to generate a consistent palette and tight collaboration between design and engineering.

Loren Baxter shares at Sneak Peek how to use Figma variables to design a dynamically colored UI for light and dark modes.

A day before Config, teams from GitHub and Figma hosted a dev community event with lightning talks. The recordings are finally available.

In the first talk, Katie Langerman, Staff Systems Designer at GitHub, shares how designing, testing, and shipping new design tokens at scale without disrupting users requires meticulous planning and care. She discusses how the Primer design system team revamped Primer Primitives with a new naming convention and build process, connecting core Figma libraries with code.

Recolor and remove colors from raster images with a solid color fill, like the Color Overlay effect in Photoshop.