Color variables

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

Examples (anchor)

Surface

Variables

By default the surface colors include the Canvas value used below as the base for mixing the colors. Used on this website the theme colors change the value to match the background colors for the theme, so as compiled and demonstrated in the palette above light-dark(#eaecee, #1f2428) replaces the Canvas value.

:where(html) {
  --surface: 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 14%, var(--surface));
  --surf-4: color-mix(in srgb, CanvasText 20%, var(--surface));
  --surf-5: color-mix(in srgb, CanvasText 26%, var(--surface));
  --surf-6: color-mix(in srgb, CanvasText 32%, var(--surface));
  --surf-7: color-mix(in srgb, CanvasText 38%, var(--surface));
  --surf-8: color-mix(in srgb, CanvasText 44%, var(--surface));
  --surf-9: color-mix(in srgb, CanvasText 50%, var(--surface));
  --surf-10: color-mix(in srgb, CanvasText 56%, var(--surface));
  --surf-11: color-mix(in srgb, CanvasText 62%, var(--surface));
}

Gray

Variables

:where(html) {
  --gray: #808080;
  --gray-1: color-mix(in srgb, var(--gray) 40%, white);
  --gray-2: color-mix(in srgb, var(--gray) 50%, white);
  --gray-3: color-mix(in srgb, var(--gray) 60%, white);
  --gray-4: color-mix(in srgb, var(--gray) 70%, white);
  --gray-5: color-mix(in srgb, var(--gray) 80%, 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) 60%, black);
  --blue-9: color-mix(in srgb, var(--blue) 50%, black);
  --blue-10: color-mix(in srgb, var(--blue) 40%, black);
  --blue-11: color-mix(in srgb, var(--blue) 30%, 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) 60%, black);
  --red-9: color-mix(in srgb, var(--red) 50%, black);
  --red-10: color-mix(in srgb, var(--red) 40%, black);
  --red-11: color-mix(in srgb, var(--red) 30%, 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) 60%, black);
  --green-9: color-mix(in srgb, var(--green) 50%, black);
  --green-10: color-mix(in srgb, var(--green) 40%, black);
  --green-11: color-mix(in srgb, var(--green) 30%, black);
}

Orange

Variables

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

Cyan

Variables

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

Yellow

Variables

:where(html) {
  --yellow: #ffff00;
  --yellow-1: color-mix(in srgb, var(--yellow) 25%, white);
  --yellow-2: color-mix(in srgb, var(--yellow) 35%, white);
  --yellow-3: color-mix(in srgb, var(--yellow) 45%, white);
  --yellow-4: color-mix(in srgb, var(--yellow) 55%, white);
  --yellow-5: color-mix(in srgb, var(--yellow) 70%, white);
  --yellow-6: var(--yellow);
  --yellow-7: color-mix(in srgb, var(--yellow) 85%, black);
  --yellow-8: color-mix(in srgb, var(--yellow) 75%, black);
  --yellow-9: color-mix(in srgb, var(--yellow) 62%, black);
  --yellow-10: color-mix(in srgb, var(--yellow) 55%, black);
  --yellow-11: color-mix(in srgb, var(--yellow) 45%, 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) 75%, black);
  --purple-8: color-mix(in srgb, var(--purple) 65%, black);
  --purple-9: color-mix(in srgb, var(--purple) 55%, black);
  --purple-10: color-mix(in srgb, var(--purple) 45%, black);
  --purple-11: color-mix(in srgb, var(--purple) 35%, black);
}

Pink

Variables

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

Olive

Variables

:where(html) {
  --olive: #556b2f;
  --olive-1: color-mix(in srgb, var(--olive) 40%, white);
  --olive-2: color-mix(in srgb, var(--olive) 50%, white);
  --olive-3: color-mix(in srgb, var(--olive) 60%, white);
  --olive-4: color-mix(in srgb, var(--olive) 70%, white);
  --olive-5: color-mix(in srgb, var(--olive) 80%, white);
  --olive-6: var(--olive);
  --olive-7: color-mix(in srgb, var(--olive) 80%, black);
  --olive-8: color-mix(in srgb, var(--olive) 60%, black);
  --olive-9: color-mix(in srgb, var(--olive) 50%, black);
  --olive-10: color-mix(in srgb, var(--olive) 40%, black);
  --olive-11: color-mix(in srgb, var(--olive) 30%, 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;
}

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;

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).

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 (e.g. $blue-1, $blue-2, etc.) can also be customized the same way if required. The :where(html) style for pre-wrapped variables can also be customized with overrides to use :root or another selector as demonstrated below.

For the grouped color token palettes:

custom.scss

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

For the individual color token palettes:

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)

Each color module is a large individual Sass document that contains the source code for both the variables and the optional color utilities making it impractical to share examples for each on the website, so to view the source code for each in please see the color directory of the StyleMods Github repository.