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.

Some colors have established semantic uses — green for positive feedback, red for errors, and yellow for warnings. But what happens if your brand is based on one of them? Molly looks at how Netflix & Lego, Spotify & Quickbooks, and Hertz & McDonald’s handle this challenge. Her takeaway: either embrace the situation and use the brand color for semantic values, or introduce a new distinct color shade (i.e. orange for errors), but do not use two similar colors for different needs.

Alexey Ardov built a new app to explain color spaces visually. Make sure to enable DCI-P3 in Gamuts to compare it with sRGB, and drag an indicator to transform spaces from one to another. A really powerful tool for understanding different models and spaces.

A new plugin from Designer Advocate Hiroki Tani for generating color variables from the palette on canvas. It creates a collection from the section name, modes from nested frames, and variables from rectangles.

Luis wonders whether variables scoping provides enough semantic modification to justify removing explicit ​“background”, ​“border”, and ​“text” color variables. ​“What’s stopping us from maintaining a single, primitive set of variables, named as such (e.g. red-300) to match your developer’s framework, relying on scoping alone to bridge this gap?” (See the discussion in this thread on X.)

I also like this take from Nate Baldwin — primitive color palettes are inherently semantic because every lightness stop is knowingly created to be used for specific use cases. He supports this idea with examples from his work on Adobe’s Spectrum color palette.

The new page from Figma nicely explains different ways to build a color scheme (see also the book ​“Interaction of Color” by Josef Albers) but falls flat when it comes to color models and contrast — I wish this discussion didn’t stop at physics and involved human perception and modern tools. The generator also exists as a plugin, and that’s where it comes handy.

Great idea, but I wish this plugin would suggest the nearest color for a fill of the selected object and not just for the hex value. With some polish, this could be an essential linting step before handing mockups off to a developer.

Great thread explaining the ​“weirdness” of OkLCH by one of the authors of the new Harmony color palette. Here is something I never thought about: ​“In electronic displays, yellow, cyan, and magenta are products of shining two lamps – subpixels. The more light is emitted, the brighter we perceive the color. It means the max lightness of the yellow is much higher than the blue’s.”