Color variables

CSS variable tokens for 12 primary colors, gray-scale and color-scheme surface colors.

Examples (anchor)

Surface

Variables

The optional theme colors used on this website provide the --background colors to override the default Canvas fallback value, so as compiled and demonstrated in the palette above light-dark(#eaecee, #1f2428) values are used.

:where(html) {
  --surface: var(--background, Canvas);
  --surf-1: color-mix(in srgb, CanvasText 4%, var(--surface));
  --surf-2: color-mix(in srgb, CanvasText 8%, var(--surface));
  --surf-3: color-mix(in srgb, CanvasText 15%, var(--surface));
  --surf-4: color-mix(in srgb, CanvasText 22%, var(--surface));
  --surf-5: color-mix(in srgb, CanvasText 28%, var(--surface));
  --surf-6: color-mix(in srgb, CanvasText 35%, var(--surface));
  --surf-7: color-mix(in srgb, CanvasText 42%, var(--surface));
  --surf-8: color-mix(in srgb, CanvasText 50%, var(--surface));
  --surf-9: color-mix(in srgb, CanvasText 58%, var(--surface));
  --surf-10: color-mix(in srgb, CanvasText 65%, var(--surface));
  --surf-11: color-mix(in srgb, CanvasText 72%, var(--surface));
}

Gray

Variables

:where(html) {
  --gray: #808080;
  --gray-1: color-mix(in srgb, var(--gray) 25%, white);
  --gray-2: color-mix(in srgb, var(--gray) 35%, white);
  --gray-3: color-mix(in srgb, var(--gray) 55%, white);
  --gray-4: color-mix(in srgb, var(--gray) 65%, white);
  --gray-5: color-mix(in srgb, var(--gray) 75%, white);
  --gray-6: var(--gray);
  --gray-7: color-mix(in srgb, var(--gray) 80%, black);
  --gray-8: color-mix(in srgb, var(--gray) 70%, black);
  --gray-9: color-mix(in srgb, var(--gray) 60%, black);
  --gray-10: color-mix(in srgb, var(--gray) 50%, black);
  --gray-11: color-mix(in srgb, var(--gray) 40%, black);
}

Blue

Variables

:where(html) {
  --blue: #0066ff;
  --blue-1: color-mix(in srgb, var(--blue) 40%, white);
  --blue-2: color-mix(in srgb, var(--blue) 50%, white);
  --blue-3: color-mix(in srgb, var(--blue) 60%, white);
  --blue-4: color-mix(in srgb, var(--blue) 70%, white);
  --blue-5: color-mix(in srgb, var(--blue) 80%, white);
  --blue-6: var(--blue);
  --blue-7: color-mix(in srgb, var(--blue) 80%, black);
  --blue-8: color-mix(in srgb, var(--blue) 70%, black);
  --blue-9: color-mix(in srgb, var(--blue) 60%, black);
  --blue-10: color-mix(in srgb, var(--blue) 50%, black);
  --blue-11: color-mix(in srgb, var(--blue) 44%, black);
}

Red

Variables

:where(html) {
  --red: #ff0000;
  --red-1: color-mix(in srgb, var(--red) 40%, white);
  --red-2: color-mix(in srgb, var(--red) 50%, white);
  --red-3: color-mix(in srgb, var(--red) 60%, white);
  --red-4: color-mix(in srgb, var(--red) 70%, white);
  --red-5: color-mix(in srgb, var(--red) 80%, white);
  --red-6: var(--red);
  --red-7: color-mix(in srgb, var(--red) 80%, black);
  --red-8: color-mix(in srgb, var(--red) 70%, black);
  --red-9: color-mix(in srgb, var(--red) 60%, black);
  --red-10: color-mix(in srgb, var(--red) 50%, black);
  --red-11: color-mix(in srgb, var(--red) 44%, black);
}

Green

Variables

:where(html) {
  --green: #006400;
  --green-1: color-mix(in srgb, var(--green) 40%, white);
  --green-2: color-mix(in srgb, var(--green) 50%, white);
  --green-3: color-mix(in srgb, var(--green) 60%, white);
  --green-4: color-mix(in srgb, var(--green) 70%, white);
  --green-5: color-mix(in srgb, var(--green) 80%, white);
  --green-6: var(--green);
  --green-7: color-mix(in srgb, var(--green) 80%, black);
  --green-8: color-mix(in srgb, var(--green) 70%, black);
  --green-9: color-mix(in srgb, var(--green) 60%, black);
  --green-10: color-mix(in srgb, var(--green) 50%, black);
  --green-11: color-mix(in srgb, var(--green) 44%, black);
}

Orange

Variables

:where(html) {
  --orange: #ff8c00;
  --orange-1: color-mix(in srgb, var(--orange) 45%, white);
  --orange-2: color-mix(in srgb, var(--orange) 55%, white);
  --orange-3: color-mix(in srgb, var(--orange) 65%, white);
  --orange-4: color-mix(in srgb, var(--orange) 75%, white);
  --orange-5: color-mix(in srgb, var(--orange) 85%, white);
  --orange-6: var(--orange);
  --orange-7: color-mix(in srgb, var(--orange) 92%, black);
  --orange-8: color-mix(in srgb, var(--orange) 82%, black);
  --orange-9: color-mix(in srgb, var(--orange) 72%, black);
  --orange-10: color-mix(in srgb, var(--orange) 62%, black);
  --orange-11: color-mix(in srgb, var(--orange) 52%, black);
}

Cyan

Variables

:where(html) {
  --cyan: #00e6e6;
  --cyan-1: color-mix(in srgb, var(--cyan) 20%, white);
  --cyan-2: color-mix(in srgb, var(--cyan) 30%, white);
  --cyan-3: color-mix(in srgb, var(--cyan) 40%, white);
  --cyan-4: color-mix(in srgb, var(--cyan) 50%, white);
  --cyan-5: color-mix(in srgb, var(--cyan) 60%, white);
  --cyan-6: var(--cyan);
  --cyan-7: color-mix(in srgb, var(--cyan) 92%, black);
  --cyan-8: color-mix(in srgb, var(--cyan) 82%, black);
  --cyan-9: color-mix(in srgb, var(--cyan) 72%, black);
  --cyan-10: color-mix(in srgb, var(--cyan) 62%, black);
  --cyan-11: color-mix(in srgb, var(--cyan) 52%, black);
}

Yellow

Variables

:where(html) {
  --yellow: #ffff00;
  --yellow-1: color-mix(in srgb, var(--yellow) 30%, white);
  --yellow-2: color-mix(in srgb, var(--yellow) 40%, white);
  --yellow-3: color-mix(in srgb, var(--yellow) 50%, white);
  --yellow-4: color-mix(in srgb, var(--yellow) 60%, white);
  --yellow-5: color-mix(in srgb, var(--yellow) 70%, white);
  --yellow-6: var(--yellow);
  --yellow-7: color-mix(in srgb, var(--yellow) 88%, black);
  --yellow-8: color-mix(in srgb, var(--yellow) 78%, black);
  --yellow-9: color-mix(in srgb, var(--yellow) 68%, black);
  --yellow-10: color-mix(in srgb, var(--yellow) 58%, black);
  --yellow-11: color-mix(in srgb, var(--yellow) 50%, black);
}

Purple

Variables

:where(html) {
  --purple: #6f42c1;
  --purple-1: color-mix(in srgb, var(--purple) 40%, white);
  --purple-2: color-mix(in srgb, var(--purple) 50%, white);
  --purple-3: color-mix(in srgb, var(--purple) 60%, white);
  --purple-4: color-mix(in srgb, var(--purple) 70%, white);
  --purple-5: color-mix(in srgb, var(--purple) 80%, white);
  --purple-6: var(--purple);
  --purple-7: color-mix(in srgb, var(--purple) 73%, black);
  --purple-8: color-mix(in srgb, var(--purple) 64%, black);
  --purple-9: color-mix(in srgb, var(--purple) 56%, black);
  --purple-10: color-mix(in srgb, var(--purple) 46%, black);
  --purple-11: color-mix(in srgb, var(--purple) 40%, black);
}

Pink

Variables

:where(html) {
  --pink: #ff1493;
  --pink-1: color-mix(in srgb, var(--pink) 48%, white);
  --pink-2: color-mix(in srgb, var(--pink) 58%, white);
  --pink-3: color-mix(in srgb, var(--pink) 68%, white);
  --pink-4: color-mix(in srgb, var(--pink) 78%, white);
  --pink-5: color-mix(in srgb, var(--pink) 88%, white);
  --pink-6: var(--pink);
  --pink-7: color-mix(in srgb, var(--pink) 88%, black);
  --pink-8: color-mix(in srgb, var(--pink) 78%, black);
  --pink-9: color-mix(in srgb, var(--pink) 68%, black);
  --pink-10: color-mix(in srgb, var(--pink) 58%, black);
  --pink-11: color-mix(in srgb, var(--pink) 48%, black);
}

Olive

Variables

:where(html) {
  --olive: #556b2f;
  --olive-1: color-mix(in srgb, var(--olive) 45%, white);
  --olive-2: color-mix(in srgb, var(--olive) 55%, white);
  --olive-3: color-mix(in srgb, var(--olive) 65%, white);
  --olive-4: color-mix(in srgb, var(--olive) 75%, white);
  --olive-5: color-mix(in srgb, var(--olive) 85%, white);
  --olive-6: var(--olive);
  --olive-7: color-mix(in srgb, var(--olive) 85%, black);
  --olive-8: color-mix(in srgb, var(--olive) 72%, black);
  --olive-9: color-mix(in srgb, var(--olive) 62%, black);
  --olive-10: color-mix(in srgb, var(--olive) 52%, black);
  --olive-11: color-mix(in srgb, var(--olive) 42%, black);
}

Tan

Variables

:where(html) {
  --tan: #b88747;
  --tan-1: color-mix(in srgb, var(--tan) 45%, white);
  --tan-2: color-mix(in srgb, var(--tan) 55%, white);
  --tan-3: color-mix(in srgb, var(--tan) 65%, white);
  --tan-4: color-mix(in srgb, var(--tan) 75%, white);
  --tan-5: color-mix(in srgb, var(--tan) 85%, white);
  --tan-6: var(--tan);
  --tan-7: color-mix(in srgb, var(--tan) 92%, black);
  --tan-8: color-mix(in srgb, var(--tan) 82%, black);
  --tan-9: color-mix(in srgb, var(--tan) 72%, black);
  --tan-10: color-mix(in srgb, var(--tan) 62%, black);
  --tan-11: color-mix(in srgb, var(--tan) 52%, black);
}

Rosewood

Variables

:where(html) {
  --rosewood: #9f6060;
  --rosewood-1: color-mix(in srgb, var(--rosewood) 45%, white);
  --rosewood-2: color-mix(in srgb, var(--rosewood) 55%, white);
  --rosewood-3: color-mix(in srgb, var(--rosewood) 65%, white);
  --rosewood-4: color-mix(in srgb, var(--rosewood) 75%, white);
  --rosewood-5: color-mix(in srgb, var(--rosewood) 85%, white);
  --rosewood-6: var(--rosewood);
  --rosewood-7: color-mix(in srgb, var(--rosewood) 92%, black);
  --rosewood-8: color-mix(in srgb, var(--rosewood) 82%, black);
  --rosewood-9: color-mix(in srgb, var(--rosewood) 72%, black);
  --rosewood-10: color-mix(in srgb, var(--rosewood) 62%, black);
  --rosewood-11: color-mix(in srgb, var(--rosewood) 52%, black);
}

Steelblue

Variables

:where(html) {
  --steelblue: #4682b4;
  --steelblue-1: color-mix(in srgb, var(--steelblue) 45%, white);
  --steelblue-2: color-mix(in srgb, var(--steelblue) 55%, white);
  --steelblue-3: color-mix(in srgb, var(--steelblue) 65%, white);
  --steelblue-4: color-mix(in srgb, var(--steelblue) 75%, white);
  --steelblue-5: color-mix(in srgb, var(--steelblue) 85%, white);
  --steelblue-6: var(--steelblue);
  --steelblue-7: color-mix(in srgb, var(--steelblue) 92%, black);
  --steelblue-8: color-mix(in srgb, var(--steelblue) 82%, black);
  --steelblue-9: color-mix(in srgb, var(--steelblue) 72%, black);
  --steelblue-10: color-mix(in srgb, var(--steelblue) 62%, black);
  --steelblue-11: color-mix(in srgb, var(--steelblue) 52%, black);
}

Using the modules (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) as demonstrated below.

All colors (anchor)

All the color tokens can be included as top level variables using either a :where(html) or :root pseudo-class wrapper style as preferred:

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include color-variables;
}

They can also be included already contained within a :where(html) pseudo-class wrapper style that if preferred can customized to use :root or another selector as described further below.

custom.scss

@use "stylemods/scss" as *;
@include color-variables-css;

Individual colors (anchor)

All the color token palettes can included individually using your preferred wrapper style:

custom.scss

@use "stylemods/scss" as *;
:where(html) {
  @include surface-variables;
  @include gray-variables;
  @include blue-variables;
  @include blue-variables;
  @include red-variables;
  @include green-variables;
  @include orange-variables;
  @include cyan-variables;
  @include yellow-variables;
  @include purple-variables;
  @include pink-variables;
  @include olive-variables;
  @include tan-variables;
  @include rosewood-variables;
  @include steelblue-variables;
}

Each palette can also be included already contained within individual :where(html) pseudo-class wrapper styles which if preferred can be customized as described below.

custom.scss

@use "stylemods/scss" as *;
@include surface-variables-css;
@include gray-variables-css;
@include blue-variables-css;
@include red-variables-css;
@include green-variables-css;
@include orange-variables-css;
@include cyan-variables-css;
@include yellow-variables-css;
@include purple-variables-css;
@include pink-variables-css;
@include olive-variables-css;
@include tan-variables-css;
@include rosewood-variables-css;
@include steelblue-variables-css;

Sass variables (anchor)

The Sass variables for each color can also be used without compiling the CSS variable tokens. All the values can be accessed using the same @use rule as above and used in any of the custom styles as required.

buttons.scss

@use "stylemods/scss" as *;
.btn-primary {
  color: #fff;
  background-color: $blue-6;
}
.btn-primary:is(:hover, :focus) {
  background-color: $blue-7;
}

Customizing (anchor)

All the color values are compiled from Sass variables that can be customized with overrides if required. These must be loaded prior to StyleMods and can be included in a seperate document if preferred (see customizing for more information).

custom.scss

@use 'stylemods/scss' with (
  $blue: Navy,
  $red: FireBrick,
  $green: DarkGreen,
);
@use "stylemods/scss" as *;
@include blue-variables-css;
@include red-variables-css;
@include green-variables-css;

Customizing is not limited to the base color values shown above, the full palette for each color (e.g. $blue-1, $blue-2, etc.) can also be customized the same way if required.

The :where(html) pseudo-class style for pre-wrapped variables can also be customized with overrides to use :root or another selector as preferred. For the grouped color palettes a single variable token is used:

custom.scss

@use 'stylemods/scss' with (
  $color-tokens: ':root',
);
@use "stylemods/scss" as *;
@include color-variables-css;

For the individual color palettes each has it's own variable token:

custom.scss

@use 'stylemods/scss' with (
  $blue-tokens: ':root',
  $red-tokens: ':root',
  $green-tokens: ':root',
);
@use "stylemods/scss" as *;
@include blue-variables-css;
@include red-variables-css;
@include green-variables-css;

Source code (anchor)

The surface colors include CSS variable tokens only, the individual primary and grayscale color files include both the CSS variable tokens and optional color utilities. For convenience only the blue.scss is included to demonstrate the primary colors but each individual color follows the same method.

surface.scss

// ---------------------------------------------------------- 
// Surface
// ----------------------------------------------------------
$surface:      var(--background, Canvas) !default;
$surface-1:    color-mix(in srgb, CanvasText 4%, var(--surface)) !default;
$surface-2:    color-mix(in srgb, CanvasText 8%, var(--surface)) !default;
$surface-3:    color-mix(in srgb, CanvasText 15%, var(--surface)) !default;
$surface-4:    color-mix(in srgb, CanvasText 22%, var(--surface)) !default;
$surface-5:    color-mix(in srgb, CanvasText 28%, var(--surface)) !default;
$surface-6:    color-mix(in srgb, CanvasText 35%, var(--surface)) !default;
$surface-7:    color-mix(in srgb, CanvasText 42%, var(--surface)) !default;
$surface-8:    color-mix(in srgb, CanvasText 50%, var(--surface)) !default;
$surface-9:    color-mix(in srgb, CanvasText 58%, var(--surface)) !default;
$surface-10:   color-mix(in srgb, CanvasText 65%, var(--surface)) !default;
$surface-11:   color-mix(in srgb, CanvasText 72%, var(--surface)) !default;

// Tokens style
$surface-tokens: ':where(html)' !default;

$surface-token-values: (
  "surface": $surface,
  "surf-1": $surface-1,
  "surf-2": $surface-2,
  "surf-3": $surface-3,
  "surf-4": $surface-4,
  "surf-5": $surface-5,
  "surf-6": $surface-6,
  "surf-7": $surface-7,
  "surf-8": $surface-8,
  "surf-9": $surface-9,
  "surf-10": $surface-10,
  "surf-11": $surface-11,
) !default;

@mixin surface-variables {
  @each $name, $value in $surface-token-values {
    --#{$name}: #{$value};
  }
}

@mixin surface-variables-css {
  #{$surface-tokens} {
    @include surface-variables;
  }
}

blue.scss

// ---------------------------------------------------------- 
// Blue
// ----------------------------------------------------------
// Variable colors
$blue:      #0066ff !default;
$blue-1:    color-mix(in srgb, var(--blue) 40%, white) !default;
$blue-2:    color-mix(in srgb, var(--blue) 50%, white) !default;
$blue-3:    color-mix(in srgb, var(--blue) 60%, white) !default;
$blue-4:    color-mix(in srgb, var(--blue) 70%, white) !default;
$blue-5:    color-mix(in srgb, var(--blue) 80%, white) !default;
$blue-6:    var(--blue) !default;  
$blue-7:    color-mix(in srgb, var(--blue) 80%, black) !default;
$blue-8:    color-mix(in srgb, var(--blue) 70%, black) !default;
$blue-9:    color-mix(in srgb, var(--blue) 60%, black) !default;
$blue-10:   color-mix(in srgb, var(--blue) 50%, black) !default;
$blue-11:   color-mix(in srgb, var(--blue) 44%, black) !default;

// Utility colors
$blue-bg-text:      #fff !default;
$blue-bg:           var(--blue-6) !default;
$blue-bg-dark:      var(--blue-7) !default;
$blue-bg-light:     var(--blue-5) !default;

// Tokens style
$blue-tokens:       ':where(html)' !default;

// Variables tokens map
$blue-token-values: (
  "blue": $blue,
  "blue-1": $blue-1,
  "blue-2": $blue-2,
  "blue-3": $blue-3,
  "blue-4": $blue-4,
  "blue-5": $blue-5,
  "blue-6": $blue-6,
  "blue-7": $blue-7,
  "blue-8": $blue-8,
  "blue-9": $blue-9,
  "blue-10": $blue-10,
  "blue-11": $blue-11,
) !default;

// Utility maps
$accordion-blue: (
  "summary-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "summary-bg": $blue-bg,
  "summary-focus": $blue-bg-dark,
  "accordion-bd-color": $blue-bg-light,
) !default;

$alert-blue: (
  "alert-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "alert-bg": $blue-bg,
  "alert-bd-color": $blue-bg-light,
) !default;

$background-blue: (
  "bg-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "bg-col": $blue-bg,
) !default;

$badge-blue: (
  "badge-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "badge-bg": $blue-bg,
  "badge-bd-color": $blue-bg-light,
) !default;

$button-blue: (
  "btn-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "btn-bg": $blue-bg,
  "btn-bd-color": $blue-bg-light,
  "btn-hover": $blue-bg-dark,
  "focus-color": $blue-bg-light,
) !default;

$card-blue: (
  "card-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "card-bg": $blue-bg,
  "card-text-hover": $blue-bg-text,
  "card-hover": $blue-bg-dark,
  "card-bd-color": $blue-bg-light,
  "card-focus-color": $blue-bg-light,
  "card-title-bg": $blue-bg,
) !default;

$dialog-blue: (
  "dialog-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "dialog-bg": $blue-bg,
  "dialog-bd-color": $blue-bg-light,
) !default;

$list-group-blue: (
  "list-group-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "list-group-bg": $blue-bg,
  "list-group-dt-bg": $blue-bg,
  "list-group-hover": $blue-bg-dark,
  "list-group-bd-color": $blue-bg-light,
) !default;

$popover-blue: (
  "popover-text": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "popover-bg": $blue-bg,
  "popover-bd-color": $blue-bg-light,
) !default;

// Variables mixins
@mixin blue-variables {
  @each $name, $value in $blue-token-values {
    --#{$name}: #{$value};
  }
}

@mixin blue-variables-css {
  #{$blue-tokens} {
    @include blue-variables;
  }
}

// Utility mixins
@mixin accordion-blue-css {
  .accordion-blue {
    @each $name, $value in $accordion-blue {
      --#{$name}: #{$value};
    }  
  }
}

@mixin alert-blue-css {
  .alert-blue {
    @each $name, $value in $alert-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin background-blue-css {
  .bg-blue {
    @each $name, $value in $background-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin badge-blue-css {
  .badge-blue {
    @each $name, $value in $badge-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin button-blue-css {
  .btn-blue {
    @each $name, $value in $button-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin card-blue-css {
  .card-blue {
    @each $name, $value in $card-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin dialog-blue-css {
  .dialog-blue {
    @each $name, $value in $dialog-blue {
      --#{$name}: #{$value};
    }
  } 
}

@mixin list-group-blue-css {
  .list-group-blue {
    @each $name, $value in $list-group-blue {
      --#{$name}: #{$value};
    }
  }
}

@mixin popover-blue-css {
  .popover-blue {
    @each $name, $value in $popover-blue {
      --#{$name}: #{$value};
    }
  }
}

// Combined mixins
@mixin blue-module-css {
  @include blue-variables-css;
  @include accordion-blue-css;
  @include alert-blue-css;
  @include background-blue-css;
  @include badge-blue-css;
  @include button-blue-css;
  @include card-blue-css;
  @include dialog-blue-css;
  @include list-group-blue-css;
  @include popover-blue-css;
}

@mixin blue-utilities-css {
  @include accordion-blue-css;
  @include alert-blue-css;
  @include background-blue-css;
  @include badge-blue-css;
  @include button-blue-css;
  @include card-blue-css;
  @include dialog-blue-css;
  @include list-group-blue-css;
  @include popover-blue-css;
}

To view the source code for each individual color please see the color directory of the StyleMods Github repository.