A few solid tips and tricks on working with colors in Figma.

Dan Hollick explains how every color blending mode in graphic editors works.

Fons Mans shows how to create rich gradients without any plugins — like this one, for example.

Molly Hellmuth gives a few practical recommendations on creating a bulletproof color system.

I was looking for a plugin to clean up my file and convert all color values to matching color styles, and this plugin got the job done perfectly. Thanks to Dave Kover for the recommendation!

As you may have noticed, I have a soft spot for color tools supporting perception-based color spaces. Taras Brizitsky writes about the plugin Generator that he built with Alex Bourt. It’s a really cool idea and implementation — start with a color, apply a set of visual modifications and conversions, and generate an entire palette from it. Change the starting color or modifiers to update all generated colors. Awesome!

USWDS is an open-source design system for building accessible and mobile-friendly government websites. There is no official support for Figma yet, so Patrick Morgan added the color library to the Community and explained why he settled on this design system for his projects.

A new gradient generator inspired by Apple’s gradients.

Never noticed this before, but it’s such a nice touch! 👏

Cool update to a LottieFiles plugin: ​“Instantly change the colors of your animation. Apply your own custom colors, or try out our carefully curated preset color palettes.”

Rasmus, who used to work on this at Figma, shares his workflow for designing in P3 color space and exporting assets in sRGB. Sadly, it’s still a very tricky process.

Supa Palette is an all-in-one palette editor and generator. Love that it supports modern color modes like LCH and Oklab, as well as correcting lightness for balanced palettes.

If you’ve ever used my tool Accessible Palette, one of its core features is support for Advanced Perceptual Contrast Algorithm (APCA) — a great alternative to a basic contrast algorithm in WCAG 2 and the current recommendation in WCAG 3 Draft. This plugin is a simple contrast checker using this algorithm and taking into account fonts size as well as background and foreground colors.

Dan Hollick explains why colors in Figma can be different from the colors found on the web. Personally, I usually keep the Figma desktop app in sRGB color space to avoid surprises, only switching to Unmanaged for specific tasks.

“We created this UI Kit to help you design and build mobile screens in dark mode. Components and layers were created with versatility in mind and can be edited to fit your needs. All the colors meet WCAG (Web Content Accessibility Guidelines) when used in the recommended way.”

“Associates colors to styles if it finds matching or very similar ones.”

Design in one theme and automatically switch to other themes within a color system.

A new plugin from Gleb Sabirzyanov for getting custom colors from Figma to FigJam.

Announced at Schema 2021, this is a new tool that helps you visualize Material You’s dynamic color and create a custom Material Design 3 theme. With built-in code export, it’s easy to migrate to Material’s new color system and take advantage of dynamic color. Don’t miss the article Introducing Material Theme Builder.

Cool plugin by Tom Quinonero for creating gradients through color spaces like LCH and ZYX with non-linear curves. There are so many cool use cases for color spaces like LCH — it’s a real pity that they’re not a standard part of Figma.