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 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;

Using the framework (anchor)

The colors can be enabled individually using overrides or in the configuration.scss document:

overrides.scss

@use 'stylemods/scss/configuration' with (
  $enable-blue: true,
  $enable-red: true,
  $enable-green: true,
);

configuration.scss

$enable-blue:       true !default;
$enable-red:        true !default;
$enable-green:      true !default;

Using overrides in a custom setup is recommended. See using the framework for more information including how the styles can also be compiled within cascade layers if preferred or required.

Source code (anchor)

The modules and framework use the same methods for customizing. The source code for the surface colors includes the variable tokens, the primary colors source code includes the tokens and color utility styles so for demonstrative purposes only the blue source code is included below.

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,
  "dialog-title-bg": $blue-bg,
) !default;

$dropdown-blue: (
  "dropdown-text": $blue-bg-text,
  "dropdown-btn-text": $blue-bg-text,
  "dropdown-ico": $blue-bg-text,
  "ico": $blue-bg-text,
  "link": $blue-bg-text,
  "visited": $blue-bg-text,
  "hover": $blue-bg-text,
  "dropdown-bg": $blue-bg,
  "dropdown-btn-bg": $blue-bg,
  "dropdown-link-hover": $blue-bg-dark,
  "dropdown-btn-hover": $blue-bg-dark,
  "dropdown-bd-color": $blue-bg-light,
  "dropdown-focus-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 dropdown-blue-css {
  .dropdown-blue {
    @each $name, $value in $dropdown-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 dropdown-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 dropdown-blue-css;
  @include list-group-blue-css;
  @include popover-blue-css;
}

To view the source code for all the colors please see the color directory of the StyleMods repository.