Color variables

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

Examples

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

Add the sassmods.scss to your custom styles as below then include the Sass mixin as demonstrated below.

Include all the color variables already wrapped in :where(html):

custom.scss

@use "sassmods/scss/sassmods" as *;
@include all-colors;

Or in your own preferred wrapper style:

custom.scss

@use "sassmods/scss/sassmods" as *;
:root {
  @include all-color-variables;
}

Include the individual palettes as required:

custom.scss

@use "sassmods/scss/sassmods" as *;
:where(html) {
  @include blue-variables;
  @include red-variables;
  @include green-variables;
}

Or individual colors without including the variables:

custom.scss

@use "sassmods/scss/sassmods" as *;
.btn-primary {
  color: #fff;
  background-color: $blue-6;
}

See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.

Source code

Each color is an individual Sass document that contains the variables above and color utilities, view the source code for each in the color directory of the SassMods Github repository.