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.

This is a topic near and dear to my heart. Ana discusses the benefits of using color scales — consistency, accessibility, and efficiency.

In addition to setting a single color with the plugin above, this one defines color scales: ​“Use this Plugin to generate Color Palettes with Variations in the OKLCH Color Space. The shades can vary across Lightness, Chroma, Hue. The ability to control these individual parameters makes it perfect for building palettes to be used in interface design, because you can use the shades that vary in these parameters to establish hierarchy, contrast, attention, etc.”

Finally, a solid color picker that lets you control color in LCH for both fills and strokes! ​“This simple color picker allows you to use the LCH color space in your designs with ease. The LCH color space is perceptually uniform and significantly simplifies creating and modifying color systems.”

Minor but helpful change to the color picker — limit the options only to the current page.

Cool little app for generating a consistent color palette from Lightness, Chroma, and a given number of Hue steps using OKLCH.

A new plugin by Vijay Verma for generating pleasant color palettes and gradients in one click.

Designer Advocate Ana Boyer takes us on a deep dive into typography and gradient variables, sharing best practices for leveraging these new features in your design system.

Jacob Miller, a Product Manager for Design Systems at Figma, gives an overview of everything launched at Framework — Code Connect for developers, typography and gradient variables, and the new Library Analytics API. All of the above is designed to drive design system adoption across the teams because ​“building a design system is only half the battle — the real challenge is getting it adopted by both designers and developers.” If you missed the event, that’s one summary you need.

Color variables can now be bound to gradient stops and saved as a style.

Free plugin for generating linear, radial, and conic gradients interpolated in a variety of color spaces, yielding richer, more brilliant gradients. Live updating so you can easily view and tweak the results.

Ridd with a step-by-step process for nailing dark and light modes in Figma. Love his way of thinking about counterpart colors on the opposite ends of the spectrum for specific use cases — texts, backgrounds, borders, and icons.

What an incredible introduction to color spaces! It starts by stating an important point that ​“color spaces are all constructs”, then proceeds to explain how useful one particular color space from 1931 is: ​“CIE XYZ turns color mixing problems and color matching problems into math problems. This has proven so useful that every modern color space is defined in terms of CIE XYZ. When we say that a system is ​“color managed” what we’re saying is: it’s built on top of CIE XYZ.”

Later it covers my favorite topic of perceptual uniformity and explains why it’s so hard to achieve — communicating meaning in data visualization, storing colors digitally, measuring contrast to ensure accessibility, and rendering even-looking gradients are all highly desirable use cases. Both CIE XYZ and sRGB can’t do it: ​“sRGB, the web’s dominant, default color space, was constructed in order to model a typical 1990s cathode-ray tube display.” On the first attempt to create a perceptually uniform space: ​“Whereas every color theorist before Albert Munsell (and many, after him) worked from the ​“frame in”, trying to cram all visible colors into a regular shape like a wheel or a sphere or whatever, Munsell instead worked from the ​“content out”, trying to create even intervals between adjacent colors and letting each ​“branch” extend as far as it could before he reached some limit of saturation. The resulting solid resembles a lumpy, lopsided spinning top.”

In the end, he explains why and how the Oklab color space proposed by Björn Ottosson in 2020 became rapidly adopted by the web platform and tools. (Not all tools yet — wink-wink!) Lab parameters in ​“a” and ​“b” are hard to work with, so OKLCH offers a user-friendly way to navigate the color space through Lightness, Hue, and Chroma. That’s the color space I rely on the most in my work.

Think you’re good at picking colors? Test your skills with this fun little game.