This is one of the most satisfying things you can do in Framer — change a single color and watch your entire website update. Here's exactly how to do it.

Changing a Global Color Variable

1. Open the Assets panel (grid icon, left sidebar).

2. Click the Colors tab.

3. Find the color you want to change — for example, "Brand/Primary" (usually your main accent color — buttons, links, highlights).

4. Double-click the color swatch next to its name.

5. A color picker appears. Enter your new hex code or pick a color visually.

6. Click outside or press Enter to confirm.

Every element in your template that uses "Brand/Primary" is now updated to your new color. No manual element-by-element editing needed.

Which Colors Should You Change?

• Brand/Primary — Main accent (buttons, links, highlights). This is the most impactful change.

• Background/Page — The main page background color.

• Text/Primary — The main body text color.

• Text/Muted — Secondary text, captions, metadata.

⚠️ Note: Avoid changing "Neutral" colors unless you know what you're doing — they're used for borders, dividers, and subtle UI elements and need to remain neutral relative to your background.

💡 Tip: Use a tool like coolors.co or realtimecolors.com to preview how your brand color looks before committing to it in Framer.