Get the M2M ICP Discovery Worksheet
Know who your website should speak to and what to say.
Colors are like the heart of a design. They can make us feel different ways and help tell a brand’s story.
But, picking the right colors? That can be tough! If Figma is your go-to for web design, you’re in luck! I’ve got some tips to share that will make picking colors way easier and quicker.
Why Do We Even Need Color Palettes?
Before we jump into the “how,” let’s chat about the “why.” Color palettes are super important because they:
- Set the Mood: Colors make us feel! The right mix can make us feel calm, excited, or even a bit nostalgic. It’s all about what feeling you want to give your audience.
- Keep Things Consistent: When you’re designing a website, app, or logo, it’s all about keeping the look the same across the board. A color palette makes sure every part of the design is in sync with the brand’s look. This allows us to create visual elements that are consistent.
- Help Users Navigate: Colors guide users on where to go and what to do on a site or app. Whether it’s spotlighting buttons or pointing out warnings, the right colors can make using a website design much more user-friendly.
How to Build Color Palettes in Figma
Creating a smart color palette in Figma is not as hard as you might think. There are some excellent plugins that will help you create color palettes using your clients brand colors. Or colors that you have determined should be a part of your website design.
Here’s a quick rundown:
- Pick Your Base Color: Start with one main color that sets the vibe you’re going for. This color can be based on the brand, the audience, or what the design is meant to do.
- Use Plugins: Figma has tons of plugins to help with colors. One of the best is Shader UI. This one can make a whole color palette from just one color!
- Make It Accessible: Make sure everyone can tell your colors apart, even people who see colors differently. Figma's Contrast plugin is great for this.
- Use Figma’s ‘Styles’ Feature: This lets you save colors to use again, keeping everything matching, and making your work as a designer much quicker and easier.
Conclusion
Colors speak loudly, and plugins in Figma makes finding the perfect mix simple. Colors are more than aesthetics. Colors make sure your designs send the right message.
For those who prefer watching over reading, there’s also a video tutorial available. The video goes into details on how to use Shader UI. It will provide you a step-by-step guide on creating easy-to-use color palettes.
Little Extra
Remember, whether it's for social media or designing websites, understanding color theory is crucial. The color combinations you choose are a crucial part of your design projects, defining your product or service's brand personality.
From black and white basics to exploring the color wheel, each choice is a step towards a strong brand identity and a more friendly user experience in visual design.
So, next time you dive into a design project, remember, selecting the write colors is a crucial part of the web design process.
Keep designing, and keep those colors popping!
Your Marketing Isn't Bringing in Leads and You Can't Figure Out Why
Score your marketing across 7 key areas in 5 minutes and find out exactly what's holding back your leads and what to fix first.
Questions You Might Be Asking
Five to seven colors typically covers a full system: a primary, a secondary, one or two accents, a neutral, and black/white. Fewer makes the design feel limited; more gets hard to keep consistent. Start narrow and add only when a real UI need shows up, not because the palette looks thin in isolation.
Install the Contrast or Stark plugin, select two elements (text and background), and it reports the WCAG ratio. Aim for 4.5:1 on body text and 3:1 on large text or non-text UI. Checking as you design is much faster than auditing later; ratios shift the moment you tweak a shade.
Variables for the raw color values, Styles (or Modes) for semantic tokens like background, text, and border. Variables give you modes for light and dark themes; styles give you a clean API for designers applying colors. Using both keeps the system flexible and easy to hand off to devs.
Shader UI, Color Palettes, and Material Theme Builder are the standouts. Shader UI is great for building a full tonal scale from one hex. Material Theme Builder produces accessible light and dark variants automatically. Try two or three on the same base color and pick the output that fits your design direction best.
