Globals

Colors

Colors are one of the most fundamental parts of any website. You can set them individually on each element, but defining global color tokens will make your workflow much more efficient.

How should you mix colors?

There are plenty of color theory frameworks and shading techniques out there. You probably know the basics already, but here, here, and here are some solid resources worth checking out. Pick the one that works best for you.

Framer supports RGB (meh), HEX (easy to copy), HSL (great for creating consistent shades), and P3 (for modern displays) color models. All of them support transparency.

Always try to handle opacity at a global level too. Instead of adjusting transparency on the fly, create a global variant of your color with the opacity baked in.

Always try to handle opacity at a global level too. Instead of adjusting transparency on the fly, create a global variant of your color with the opacity baked in.

Always try to handle opacity at a global level too. Instead of adjusting transparency on the fly, create a global variant of your color with the opacity baked in.

Framer doesn’t support nested or cascading color tokens like in Figma, so you’ll need to plan around that.

Framer doesn’t support nested or cascading color tokens like in Figma, so you’ll need to plan around that.

Framer doesn’t support nested or cascading color tokens like in Figma, so you’ll need to plan around that.

How to structure your colors

My go-to method is grouping colors by function, not just visual style. But since not every color has a specific purpose, I also create a few flexible, utility-based color groups.

Start by setting at least four base colors:

  • Text color (usually black or dark gray)

  • Background color (usually white)

  • CTA color

  • A neutral gray

As you build your site in the editor, always assign colors from the global palette. If a new shade is needed, mix it and immediately add it as a new global color so you stay consistent.

Here’s how I usually organize my palette into folders:

  • Text colors and shades (primary, secondary, muted)

  • CTA colors and variants (stronger for text, softer for backgrounds)

  • Functional colors (success, error, warning, etc.)

  • Neutrals (shades of gray for backgrounds, borders)

  • Opaques (semi-transparent versions of key colors)

  • Brand and extras (colors tied to branding, themes, illustrations)

White

Black 4%

Black 15%

Dark Gray

Black

Exhibit BG

Image BG

CTA

CTA Strong

Green

Gradients can be created using global colors, but the gradients themselves can't be saved as global tokens.

Gradients can be created using global colors, but the gradients themselves can't be saved as global tokens.

Gradients can be created using global colors, but the gradients themselves can't be saved as global tokens.

If you remix this page, all the colors are already connected globally and grouped by function.

If you remix this page, all the colors are already connected globally and grouped by function.

If you remix this page, all the colors are already connected globally and grouped by function.

Learn colors

Remix Now

Learn colors

Remix Now

Responsive Design

Responsive Design

Responsive Design

Text Styles

Text Styles

Text Styles

Create a free website with Framer, the website builder loved by startups, designers and agencies.