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's fixed color variables or use color-mix function 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

color-mix colors customization

Use color-mix to customize the theme. The color-mix function blends two colors to create a new one. It uses a base color and mixes it with white or black to make lighter or darker shades.

Below is how we use color-mix functions to darken and tint color variations.

@supports (color: color-mix) {
:root {
--color-p2: #046b99;
--color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
--color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
--color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
--color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
--color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
--color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
  }
}

Keep in mind that the color-mix function works only in modern browsers. To make sure your site works for everyone, the State Template color theme files include both fixed color variables for older browsers and the color-mix function for newer browsers, using progressive enhancement.

Below is an example of the Oceanside theme's fixed color variables alongside the color-mix variables in CSS:

/* -----------------------------------------
   OCEANSIDE COLOR THEME
----------------------------------------- */

:root {
  /* color variations are hardcoded for older browsers
 color-mix is used for the newer browsers */

  /* Highlight */
  --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;

  /* Primary */
  --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;

  /* Standout */
  --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;

  /* Secondary 1 */
  --color-s1: #eef8fb;
  --color-s1-darker: #e2f3f8;
  --color-s1-lighter: #f7fcfd;

  /* Secondary 2 */
  --color-s2: #87b8ce;
  --color-s2-dark: #6ea9c4;
  --color-s2-darker: #549ab9;

  /* Secondary 3 */
  --color-s3: #4993b5;
  --color-s3-dark: #3f7e9c;
  --color-s3-light: #92bed3;
  --color-s3-lighter: #b6d4e1;

  /* Megamenu sub navigation background */
  --sub-nav-bg: var(--color-s1-lighter);

  /* Mobile navigation drawer background */
  --mobile-drawer: var(--color-p2-darker);
  --mobile-drawer-active: var(--color-p2);
}

/* color-mix is used for the newer browsers */
@supports (color: color-mix) {
  :root {
    --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
    --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
    --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
    --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
    --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
    --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
    --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
    --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
    --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
    --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
    --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
    --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
    --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
    --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
    --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
    --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
    --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
    --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
    --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
    --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
    --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
    --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
    --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
    --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
    --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
    --sub-nav-bg: var(--color-s1-lighter);
    --mobile-drawer: var(--color-p2-darker);
    --mobile-drawer-active: var(--color-p2);
  }
}