StylePlayground ↬ View Website Colors

• Color Pallet Reference
• Background Color Reference
• Custom Properties
• Contrast Reference

Color Custom Properties

Colors will all have custom properties and have coordinating background and text colour utility classes. These custom properties are listed in the pallet above, but are here for general reference.

Color CPs are build using a sass map in settings and a loop function.
File: sass/global/_custom-properties.scss

// build color custom properties | settings → settings/_color.scss
    @each $color, $shades in $colors {
      @each $shade, $value in $shades {
        --color-#{$color}-#{$shade}: #{$value};
      }
    }

The following are all of the color custom properties

--color-green-400: hsl(135, 67%, 20%); // green
--color-red-400: hsl(0deg, 69%, 43%); // brand red
--color-gold-300: hsl(43deg, 100%, 57%); // gold hover
--color-gold-400: hsl(43deg, 100%, 47%); // brand gold
--color-blue-200: hsl(244deg, 76%, 48%); // link color
--color-blue-300: hsl(255deg, 67%, 30%); // button hover
--color-blue-400: hsl(255deg, 67%, 20%); // brand blue
--color-grey-100: hsl(0deg, 0%, 100%); // white
--color-grey-200: hsl(0deg, 0%, 97%); // ↓ grey scale
--color-grey-300: hsl(0deg, 0%, 94%); // |
--color-grey-350: hsl(0deg, 0%, 86%); // |
--color-grey-400: hsl(0deg, 0%, 75%); // |
--color-grey-500: hsl(0deg, 0%, 42%); // |
--color-grey-600: hsl(0deg, 0%, 20%); // | text colour
--color-grey-700: hsl(0deg, 0%, 10%); // ↑ grey scale
--color-white: var(--color-grey-100); // ← because I don't want to call white a grey

Some CPs that have color values set by other CPs

--link-text: var(--color-blue-200);
--input-border: var(--color-grey-600);
// checkbox
--checkbox-color: var(--color-blue-200);
--form-control-disabled: var(--color-grey-400);
// button colors
--btn-background-h: 244;
--btn-background-s: 76%;
--btn-background-l: 48%;
--btn-background: var(--color-blue-400);
--btn-color: var(--color-grey-100);

Color Contrast

View on Contrast Grid using the values below

#221155, blue-400 (brand)
#331980, blue-300
#1D4ED8, blue-200 (link)
#EEAA00, gold-400 (brand)
#FFC022, gold-300
#BB2222, red-400
#115522, green-400
#1A1A1A, grey-700
#333333, grey-600 (text)
#6B6B6B, grey-500
#BFBFBF, grey-400
#dbdbdb, grey-350
#F0F0F0, grey-300
#F7F7F7, grey-200
#ffffff, grey-100 (white)