Colors

Color distinguishes the brand of State Web Template websites. Our custom color themes help create consistent experiences across products.

Add a color theme

There are two ways to customize your main theme colors:

• Change the primary and secondary theme color variables in the SASS file (/src/scss/colortheme/oceanside.scss).
• Manually find and replace your main theme colors and their variations in the CSS file.

Use meaningful colors to visually communicate what people need to see.

Color themes

Our color themes were developed following best practices in accessibility. Colors were carefully selected to have sufficient contrast between text and backgrounds. Additionally, each theme has css rules to ensure proper color contrast ratios.

People with low vision should be able to see and use your web products. We recommend choosing primary, secondary, and accent colors with accessible color contrast ratios. Use Accessible WEB opens in a new window to check the accessibility of your color combinations.

Grayscale

We've added a grayscale palette that works well with all color themes. This allows you to have more design flexibility.