Colors

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

Add color theme

The current template CSS core file is using the Oceanside theme's color variables. To add another color theme from the available themes, add a link to your preferred theme in the <head> of your HTML document after the CSS core link. Check out the example below:

Color themes

We developed our color themes following best practices in accessibility. We selected colors that have enough 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.

.color-white
.bg-white
#ffffff

.gray-50
.bg-gray-50
#fafafa

.gray-100
.bg-gray-100
#ededef

.gray-200
.bg-gray-200
#d4d4d7

.gray-300
.bg-gray-300
#bcbbc1

.gray-400
.bg-gray-400
#a4a3ab

.gray-500
.bg-gray-500
#898891

.gray-600
.bg-gray-600
#72717c

.gray-700
.bg-gray-700
#5e5e6a

.gray-800
.bg-gray-800
#4a4958

.gray-900
.bg-gray-900
#3b3a48

.color-black
.bg-black
#000000

Customize color theme

To customize your main theme colors, change the theme color variables in the color theme CSS file. Use meaningful colors to communicate what people need to see.

Note: We developed the State Web Template with three primary colors and three secondary colors using darker and lighter variations of each.

  • Primary color variables: --color-p1, --color-p2, --color-p3
  • Secondary color variables: --color-s1, --color-s2, --color-s3

Here is the Oceanside color theme variables CSS code example: 

:root {
  --color-p1: #fdb81e;
  --color-p1-dark: #fdb20a;
  --color-p1-darker: #f5aa02;
  --color-p1-darkest: #d29102;
  --color-p1-light: #fdc64b;
  --color-p1-lighter: #fed478;
  --color-p1-lightest: #fee3a5;
  --color-p2: #046b99;
  --color-p2-dark: #035d85;
  --color-p2-darker: #035376;
  --color-p2-darkest: #023a53;
  --color-p2-light: #3689ad;
  --color-p2-lighter: #68a6c2;
  --color-p2-lightest: #9bc4d6;
  --color-p3: #323a45;
  --color-p3-dark: #293039;
  --color-p3-darker: #232930;
  --color-p3-darkest: #14171c;
  --color-p3-light: #5b616a;
  --color-p3-lighter: #84898f;
  --color-p3-lightest: #adb0b5;
  --color-s1: #eef8fb;
  --color-s1-darker: #e2f3f8;
  --color-s1-lighter: #f7fcfd;
  --color-s2: #87b8ce;
  --color-s2-dark: #6ea9c4;
  --color-s2-darker: #549ab9;
  --color-s3: #4993b5;
  --color-s3-dark: #3f7e9c;
  --color-s3-light: #92bed3;
  --color-s3-lighter: #b6d4e1;
  --sub-nav-bg: var(--color-s1-lighter);
  --mobile-drawer: var(--color-p2-darker);
  --mobile-drawer-active: var(--color-p2);
}

SASS theme file colors customization

If you don't want to deal with that many colors use our SASS color scheme file. It uses three primary and three secondary colors. Using SASS functions, you can create darker and lighter variations for those colors.

Below is how we use SASS functions to darken and tint color variations in our SASS color theme file.

// primary color
$color-p2: #046b99;
$color-p2-dark: darken($color-p2, 4%);
$color-p2-darker: darken($color-p2, 7%);
$color-p2-darkest: darken($color-p2, 14%);
$color-p2-light: tint($color-p2, 20%);
$color-p2-lighter: tint($color-p2, 40%);
$color-p2-lightest: tint($color-p2, 60%);

After picking primary and secondary colors, convert your updated SASS file into CSS. For that you can use online SASS to CSS converter or use your own local SASS to CSS converter setup.