Background Color

Learn about background color, and how to best use it in the Base System

1.0 Background Colors

To streamline your workflow and maintain consistency, you'll add your colors as variables in Webflow. This allows you to quickly reference and reuse colors throughout your project.

3.0 Background Color Classes

NameHex Code

Background Blue 100

#FFFFFF

Background Blue 200

#000000

Background Blue 300

#000000

Background Blue 400

#000000

Background Blue 500

#000000

3.0 General Usage

3.1 Naming Convention

  • Base Colors: Use descriptive names based on the color and its purpose.

    • Example: Primary Blue, Secondary Yellow, Neutral Gray

  • Shades and Tints: Use a numerical system to indicate variations.

    • Example: Primary Blue 50, Primary Blue 100, Primary Blue 200

Last updated