When we talk about customizing a template, we’re really talking about adapting it to your brand.

Colors are a huge part of branding and one of the main things people remember.

Instead of changing every single thing manually, Framer gives us Color Styles. Once you change a color style, everything updates automatically. Pretty wild, right :)

Let’s get into it.

Color styles are located in the left sidebar under Assets, then Styles.

Every template you buy comes with predefined color styles. All you have to do is swap them out for your brand colors.

I’ll show you using my Pacey template as an example of how to change colors.

Go to Styles, pick the color you want to change, and simply update it :D

Anything on the site that uses that color style will change automatically.

Color best practices

It’s really important that your colors have good contrast, at least 4.5:1 for text.

Sometimes it’s obvious, like when you’re using black and white, contrast won’t be an issue.

But to be sure, it’s best to check your colors using the tool below and see how they perform.

https://webaim.org/resources/contrastchecker/