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!
There are a lot of questions at the moment about colour tokens and Figma soooo
— luis. (@disco_lu) February 15, 2023
I thought I'd thread some thoughts on it to create a healthy discussion in public 🧂 pic.twitter.com/M2SINRwMER
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.
Colorwell is a new Figma plugin that offers you Paper-like paint mixing. Use and store a 5 color palette for mixing. You can also drag an image in to sample a palette from.
— Dustin Mierau (@dmierau) February 3, 2023
Mixing uses a Kubelka-Munk model to mix colors in a way that’s similar to mixing paint. 🙂
Coming soon! pic.twitter.com/aP1kwsjOzH
Dan Hollick with a great thread on light and dark modes, perceived contrast, APCA, and why we tend to tint dark backgrounds blue.
Why is making a dark mode greyscale so hard to get right?
— Dan Hollick 🇿🇦 (@DanHollick) February 1, 2023
Well, of course it has to do with the weird way humans perceive colour and contrast. 👇 pic.twitter.com/3Z8SKxghSk
A few solid tips and tricks on working with colors in Figma.
6 ways to work smarter (not harder) with 🌈 colors in Figma:
— Jordan Bowman (@jrdnbwmn) January 10, 2023
Dan Hollick explains how every color blending mode in graphic editors works.
Do you just click different blending modes until it sort of looks right?
— Dan Hollick 🇿🇦 (@DanHollick) October 20, 2022
Well, that probably won't change after you read this but at least you probably won't use Lighten or Darken again.
(you should bookmark this thread and use it as a reference) pic.twitter.com/lDkIkUhDxG
Fons Mans shows how to create rich gradients without any plugins — like this one, for example.
New tutorial! ✨
— Fons Mans (@FonsMans) September 13, 2022
Learn how to create an 'ultra gradient' with @figma, without using any plugins!
Let's get started 👇 pic.twitter.com/5eMYoPJc3z
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! 👏
Shoutout to @figma for determining the background color of a shape and automatically setting the text color as black or white depending on contrast ratios to ensure accessibility. pic.twitter.com/ST1vTpf1Dc
— Emma Bostian (@EmmaBostian) July 21, 2022
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.
I wish Figma implemented color space support (color management.) I design in P3 and my workflow for exporting images is: export, run imagemagick to assign the correct profile (my workspace profile). Finally, run imagemagick to convert the image’s colors to sRGB.
— Rasmus Andersson (@rsms) June 15, 2022
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.
Have you ever used a color in Figma and found it looked totally different on the web?
— Dan Hollick 🇿🇦 (@DanHollick) December 15, 2021
Well I have some good news:
a) you're not crazy.
b) that's changing. pic.twitter.com/F5pOYYdY1g