I've used the exact same process to build countless color systems over the years...
It's EASY to reproduce and it works every time 💯
5 steps for building your next color system 👇
Most great color palettes are comprised of 3 groupings:
1. Brand colors
2. Neutrals colors (your grays)
3. Interface colors (your status alerts)
We're going to walk through a repeatable process for creating each one in a way that ensures your palette is cohesive and flexible 👇
Step 01 — Find a starting point
Inspiration can come from anywhere (I'll link some of my favorites at the end of this thread).
We just need at least one solid color to start. Then write out the HSB! This will lay the foundation for our color system.
Step 02 — Find colors to support your primary
I love using http://color.adobe.com for this.
But I also have a couple rules of thumb that help ensure cohesive colors:
1) Saturation values stay within 10
2) Brightness values stay within 10
Then you can simply adjust the hue!
Step 03 — Create shades for my brand palette
I like to have `light` and `dark` variations of my core brand colors at a minimum.
Light = decrease saturation to ~10 and brightness to ~99
Dark = decrease saturation to ~70 and brightness to ~50
(consider these starting points)
Step 04 — Build your neutrals palette
I use a 100-900 scale inspired by
@tailwindcss
To start, I design around core use cases that I know I need to account for. Things like text, disabled states, borders, super subtle hover states, etc.
Let's see how that works for type 👇
I know that I'll have 3 core typography color needs.
Dark text + Grey text + Placeholder text
I'll use the Contrast app to help me arrive at those values right away.
900 = dark text // 700 = grey text // 600 = placeholder text
That's 3 of 9 values knocked out immediately 💪
Then I'll start filling in the gaps based on my needs above
• standardizing the hue to match your `primary` color ensures cohesiveness
• I typically move from more saturated to less saturated as I approach white
• 100-300 are > 90 brightness for things like subtle borders
Step 05 — build your interface palette
Depending on how you intend to use these colors, you might need light/dark variations. But the process remains the same!
Most of the time I'll make these more saturated than my brand colors so they command a bit more attention
And that's it! Some benefits to this process:
• It's repeatable (super easy to add more)
• It's flexible (larger spectrum of grays accounts for every use case)
You can design any great product using this system to build out your color palette 💪
If you want to go deeper... this is only a little taste of the full "Style Systems" module from Figma Academy.
Enrollment for the Spring cohort is open now and it's the last time it'll be available at this price 👇
https://www.figma.academy
This system is a great way to quickly generate starting points for each color needed.
But it's important to note... they're just starting points!
You should always be iterating as you use color and making sure your eyes have the final say instead of prioritizing the math 👀
The reason it's important to let our eyes have the final say is because we perceive certain colors differently.
A red is inherently going to be higher contrast than a corresponding yellow for instance.
This is why I like to adjust saturation/brightness within that range of 10.
Color theory used to be a black box for me...
But this system has helped me a TON 😇
If you also found it valuable, click into the first tweet below and pass it along 👇
menu
Ridd 🏛 @RidderingandI've used the exact same process to build countless color systems over the years...
It's EASY to reproduce and it works every time 💯
5 steps for building your next color system 👇 twitter.com
Pay what you can