Color variables

A variety of color palettes using color-mix() values provided as CSS variables.

Examples

Surface: [--surf-1 to --surf-11]

Gray: #808080. [--gray-1 to --gray-11]

Blue: #0066ff. [--blue-1 to --blue-11]

Red: #ff0000. [--red-1 to --red-11]

Green: #006400. [--green-1 to --green-11]

Orange: #006400. [--orange-1 to --orange-11]

Cyan: #006400. [--cyan-1 to --cyan-11]

Yellow: #006400. [--yellow-1 to --yellow-11]

Purple: #006400. [--purple-1 to --purple-11]

Pink: #006400. [--pink-1 to --pink-11]

Olive: #006400. [--olive-1 to --olive-11]

Using the modules

Add the sassmods.scss to your custom styles as below, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin(s) anywhere below.

Include all the colors with sassmods.scss in custom styles:

@use "sassmods/scss/sassmods" as *;
$blue: RoyalBlue;
$red:  FireBrick;

@include all-colors;

Or individual colors:

@use "sassmods/scss/sassmods" as *;
$blue: RoyalBlue;
$red:  FireBrick;

:where(html) {
  @include blue-variables;
  @include red-variables;
  @include green-variables;
}

Using the framework

Enable the module(s) in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).

$enable-surface:  true;
$enable-grays:    true;
$enable-blue:     true;
$enable-red:      true;
$enable-green:    true;
$enable-orange:   true;
$enable-cyan:     true;
$enable-yellow:   true;
$enable-purple:   true;
$enable-pink:     true;
$enable-olive:    true;

Source

The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.

_colors.scss

// ---------------------------------------------------------- 
// Colors
// ----------------------------------------------------------

$gray:      #808080 !default;
$blue:      #0066ff !default;
$red:       #ff0000 !default;
$green:     #006400 !default;
$orange:    #ff8c00 !default;
$cyan:      #00e6e6 !default;
$yellow:    #ffff00 !default;
$purple:    #6f42c1 !default;
$pink:      #ff1493 !default;
$olive:     #556b2f !default;

@mixin color-bg-props {
  color: var(--col, inherit);
  background-color: var(--bg, initial);
}

@mixin color-bg-utility {
  .bg {
    color: var(--col, inherit);
    background-color: var(--bg, initial);
  }
}

@mixin surface {
  --surf-1: color-mix(in srgb, CanvasText 4%, Canvas);
  --surf-2: color-mix(in srgb, CanvasText 8%, Canvas);
  --surf-3: color-mix(in srgb, CanvasText 14%, Canvas);
  --surf-4: color-mix(in srgb, CanvasText 20%, Canvas);
  --surf-5: color-mix(in srgb, CanvasText 26%, Canvas);
  --surf-6: color-mix(in srgb, CanvasText 32%, Canvas);
  --surf-7: color-mix(in srgb, CanvasText 38%, Canvas);
  --surf-8: color-mix(in srgb, CanvasText 44%, Canvas);
  --surf-9: color-mix(in srgb, CanvasText 50%, Canvas);
  --surf-10: color-mix(in srgb, CanvasText 56%, Canvas);
  --surf-11: color-mix(in srgb, CanvasText 62%, Canvas);
}

@mixin grays {
  --gray-1: color-mix(in srgb, var(--gray-6) 40%, white);
  --gray-2: color-mix(in srgb, var(--gray-6) 50%, white);
  --gray-3: color-mix(in srgb, var(--gray-6) 60%, white);
  --gray-4: color-mix(in srgb, var(--gray-6) 70%, white);
  --gray-5: color-mix(in srgb, var(--gray-6) 80%, white);
  --gray-6: #{$gray};
  --gray-7: color-mix(in srgb, var(--gray-6) 80%, black);
  --gray-8: color-mix(in srgb, var(--gray-6) 70%, black);
  --gray-9: color-mix(in srgb, var(--gray-6) 60%, black);
  --gray-10: color-mix(in srgb, var(--gray-6) 50%, black);
  --gray-11: color-mix(in srgb, var(--gray-6) 40%, black);
}

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

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

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

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

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

@mixin yellow {
  --yellow-1: color-mix(in srgb, var(--yellow-6) 25%, white);
  --yellow-2: color-mix(in srgb, var(--yellow-6) 35%, white);
  --yellow-3: color-mix(in srgb, var(--yellow-6) 45%, white);
  --yellow-4: color-mix(in srgb, var(--yellow-6) 55%, white);
  --yellow-5: color-mix(in srgb, var(--yellow-6) 70%, white);
  --yellow-6: #{$yellow};
  --yellow-7: color-mix(in srgb, var(--yellow-6) 85%, black);
  --yellow-8: color-mix(in srgb, var(--yellow-6) 75%, black);
  --yellow-9: color-mix(in srgb, var(--yellow-6) 62%, black);
  --yellow-10: color-mix(in srgb, var(--yellow-6) 55%, black);
  --yellow-11: color-mix(in srgb, var(--yellow-6) 45%, black);
}

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

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

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