How to Create a Neutral Color Palette for a Design System - Figma Tutorial

In this video, I'm going to dive into creating a Neutral color palette. We'll start by examining the colors used by Uber. Then, we'll organize and arrange the colors, filling in any missing spots. Finally, we'll create Figma variables for each color, ensuring easy customization in the future.

🚀 Create an account on Mobbin for free:

🔶 Chapters
00:00 Introduction
01:12 Understanding Uber's Neutral Palette
02:09 Extracting Colors from Airbnb Screens
08:47 Mapping Colors with Tailwind CSS Colors
15:37 Using Material Design Palette Generator
16:19 Creating and Applying Variables to Swatches
---------------------------------------­----
Mega Product Design Course for Beginners:

Webflow Course for Beginners:

Photoshop Tutorials:

Illustrator Tutorials:

After Effects Tutorials:

UI Design Tutorials:

Design Resources, Tools and Softwares:

Adobe XD CC Tutorials:

eSports Design Tutorials:
--------------------------------------------------------------------------------------------
Contact me :
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
#designsystems #productdesign #figmatutorial

[GraveRave]

Thank you for explaining this currently taking another online course about variables, but the teacher doesn't go into depth or articulate it like you do.

[newyonface]

That was very help, Thanks alot Chetan. can't wait for the next part.

[koushiknath]

Hi Chetan vi.what about monochomatic color for ux ui design?light and dark mode?

[abdulrahmaniliyas]

Nice Lecture. I tried it and it was great. but I noticed it is stored in my libraries. How do I delete it permanently in case I want to do something or make adjustments. How do I delete it from my library? Thanks for the response.

[zakrullahdosti]

Thank you my best teacher keep going 🤩🤩🤩😍😍🥰🥰

[blakiplops]

another way of doing this is by using an app like palettte and following the hsl curves to glean the missing colours.

[zakrullahdosti]

What great content you made that very amazing contents

[aartibandekar]

Super Insightful! Can we keep the same neutral colour palette for all our projects? Do we need to use the hue from the primary colours to get our greys? While selecting the palette how do you ensure a contrast above 4.5 and accessibility along with the brand colours? Thank you in advance!

[theafrotainer]

Great job Chethan. can we get access to the figma file?

[VKumar]

Thanks Chetan for awesome content.
I have a query related to neutral color palette.

How can I create neutral color palette manually my brand color is dark red #A2201C.

[Alexanderussell]

Chetan, can you explain why you need 10 neutral colors? Why couldn’t you just use the 6 colors you extracted for your neutral ramp?

[ooogabooga]

xd sorry, so you already know tailwind.