Just published another colour resource to the Figma community 🖍️ This one is..large: • 1620 full spectrum colours • 5 saturation levels for every colour • Each colour swatch as a component • Side by side comparison of each saturation level

Here is the "Colours by saturation" to show you each distinct variation: 1️⃣ Saturated (Saturation: 10) 2️⃣ Muted (Saturation: 30) 3️⃣ Matte (Saturation: 50) 4️⃣ Rich (Saturation: 70) 5️⃣ Bright (Saturation: 90)

Similar to the resource I shared a little while ago, there are 36 distinct colours This is too many to fit in a tweet, so here's a visual Each colour also has a variation which references its next partner: Red Pink Red Red Orange Orange Red Orange Orange Yellow etc

For the styles themselves, these are grouped by their saturation Each colour has a ramp from 10 to 90, giving 9 distinct darkness options for each (I may change this to 100 ➡ 900 in future) Here's a quick video showing those in action

This all started a few weeks ago when @blvdmitry asked me whether I was building Tailwind for designers and it felt like a dare

Because these things take a *long* time, I needed to figure out how to generate so many colours without getting a repetitive strain injury I realised that I could probably use that tool that starts with C and ends with hatGPT After 2 hours, I had a JSON file for every colour

I then found a really cool plugin which allows you to import JSON files and generate styles in Figma, again saving hours and hours It's called "Color Import / Export" and was made by Jon Sakas (don't think they have Twitter)

The tweaking after that did take quite a while – setting up the components, organising the pages etc This entire process probably took around 6 hours, compared to probably 100 if it was all done manually without the Chat and plugin help

Luis. Make a plugin already. I can help

I'm a man of the old order

@rogie yall should stream the process of making it into a plugin 😉

@rogie Me after 3 hours: So, what is JavaScript again?

@moschmo1 luis comon. a twitch stream where i teach you how to make it, and you tell me what to code? what could go wrong? its like you have your own personal little programmer in your pocket you can tell what to do

@disco_lu @moschmo1 Can I babble about perceptually uniform color palettes while you two work?

@disco_lu @moschmo1 i would be honored. babble away!

OMG😵‍💫, How did you come up with such a large number of color palettes?

It all started here!

Which colours should we use? … Yes. Amazing work as always @disco_lu 🤓👏

Thanks Chris! Now onto creating the remaining steps in the saturation scale 😅

Thanks!

Absolutely unreal! Definitely going to check this out

Why do you need these many colors?

You wouldn't need all of them in production! It's a kit to pick your colour palette from, choosing the ones your brand needs

I appreciate that. But I am afraid that isn't how design systems can leverage because it would need manual token re-connections.