Hero Image

Colour Scheme

Colours used in the theme

Pick Colour

Pick a theme colour

Template will automatically generate a collection of CSS variables for each of those colors. These sets of variables act as a color palette you can use to play with different shades of a same color.

  • --kws-primary
  • --kws-primary-rgb if you want to create your own RGBA shade: rgba(var(--kws-primary-rgb), 0.5)
  • --kws-primary-h equal to the primary hue
  • --kws-primary-s equal to the primary saturation
  • --kws-primary-l equal to the primary lightness
  • --kws-primary-base (equal to --kws-primary)
  • --kws-primary-invert which is a color that will look decent on the primary color (in a foreground/background combination)
  • --kws-primary-light which is the primary color at 90% lightness
  • --kws-primary-light-invert which is a color that looks good on the -light version
  • --kws-primary-dark which is the primary color at 20% lightness
  • --kws-primary-dark-invert which is a color that looks good on the -dark version
  • --kws-primary-soft which is a light color in light mode, and a dark color in dark mode
  • --kws-primary-bold which is a dark color in light mode, and a light color in dark mode
  • --kws-primary-soft-invert which is the same as the bold version
  • --kws-primary-bold-invert which is the same as the soft version
  • --kws-primary-on-scheme which is a color that looks good on the scheme-main color (which by default is white, and is used as the page’s background color)
--kws-primaryThe quick brown fox jumps over the lazy dog
--kws-primary-invertThe quick brown fox jumps over the lazy dog
--kws-primary-lightThe quick brown fox jumps over the lazy dog
--kws-primary-light-invertThe quick brown fox jumps over the lazy dog
--kws-primary-darkThe quick brown fox jumps over the lazy dog
--kws-primary-dark-invertThe quick brown fox jumps over the lazy dog
--kws-primary-softThe quick brown fox jumps over the lazy dog
--kws-primary-boldThe quick brown fox jumps over the lazy dog
--kws-primary-on-schemeThe quick brown fox jumps over the lazy dog

Soft and Bold colors

Because Template now has a Dark Mode, it comes with a new color concept: soft and bold colors.

A soft color is a shade of a color that has little contrast with the background. It’s a muted, faint shade of that color.

In light mode, this means that a soft color will be light as well. It’s ideal of backgrounds:

--kws-primary-soft as backgroundThe quick brown fox jumps over the lazy dog

On the other hand, the bold color has a stark contrast with the background. It’s a strong, distinct shade of that color.

In light mode, this means that a bold color will be dark. It’s ideal of text colors:

--kws-primary-bold as text colorThe quick brown fox jumps over the lazy dog

The best use of these colors is to combine them: the soft color as background, the bold color as foreground:

--kws-primary-soft as background
--kws-primary-bold as foreground		The quick brown fox jumps over the lazy dog

Automatic switching when going into Dark Mode

If you use switch to between light mode and dark mode, you will notice that the soft and bold colors will swap. That way, you don’t need to update your CSS classes to keep a decent design.

SystemLight ModeDark Mode
The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog

Invert colors

The purpose of -invert colors is to combine them with their base counterparts. For example, if you use primary-light as the background color, you can use primary-light-invert as the foreground color:

Background--kws-primarykws-primary-invert on kws-primary
Foreground--kws-primary-invert
Background--kws-primary-lightkws-primary-light-invert on kws-primary-light
Foreground--kws-primary-light-invert
Background--kws-primary-darkkws-primary-dark-invert on kws-primary-dark
Foreground--kws-primary-dark-invert

21 shades for each color

Template will automatically generate 21 shades of each color, one for each amount of lightness, starting from around 0% and going up in 5% increments, until 100% is reached.

I am saying around 0% because the last digit is determined by the base color. If the base color’s lightness is 42%, then --kws-primary-00 will be 2%, not 0%.

--kws-primary-00--kws-primary-00-invert
--kws-primary-05--kws-primary-05-invert
--kws-primary-10--kws-primary-10-invert
--kws-primary-15--kws-primary-15-invert
--kws-primary-20--kws-primary-20-invert
--kws-primary-25--kws-primary-25-invert
--kws-primary-30--kws-primary-30-invert
--kws-primary-35--kws-primary-35-invert
--kws-primary-40--kws-primary-40-invert
--kws-primary-45--kws-primary-45-invert
--kws-primary-50--kws-primary-50-invert
--kws-primary-55--kws-primary-55-invert
--kws-primary-60--kws-primary-60-invert
--kws-primary-65--kws-primary-65-invert
--kws-primary-70--kws-primary-70-invert
--kws-primary-75--kws-primary-75-invert
--kws-primary-80--kws-primary-80-invert
--kws-primary-85--kws-primary-85-invert
--kws-primary-90--kws-primary-90-invert
--kws-primary-95--kws-primary-95-invert
--kws-primary-100--kws-primary-100-invert

Each of these shades has an -invert counterpart that can be used as a foreground color:

Background--kws-primary-00kws-primary-00-invert on kws-primary-00
Foreground--kws-primary-00-invert
Background--kws-primary-05kws-primary-05-invert on kws-primary-05
Foreground--kws-primary-05-invert
Background--kws-primary-10kws-primary-10-invert on kws-primary-10
Foreground--kws-primary-10-invert
Background--kws-primary-15kws-primary-15-invert on kws-primary-15
Foreground--kws-primary-15-invert
Background--kws-primary-20kws-primary-20-invert on kws-primary-20
Foreground--kws-primary-20-invert
Background--kws-primary-25kws-primary-25-invert on kws-primary-25
Foreground--kws-primary-25-invert
Background--kws-primary-30kws-primary-30-invert on kws-primary-30
Foreground--kws-primary-30-invert
Background--kws-primary-35kws-primary-35-invert on kws-primary-35
Foreground--kws-primary-35-invert
Background--kws-primary-40kws-primary-40-invert on kws-primary-40
Foreground--kws-primary-40-invert
Background--kws-primary-45kws-primary-45-invert on kws-primary-45
Foreground--kws-primary-45-invert
Background--kws-primary-50kws-primary-50-invert on kws-primary-50
Foreground--kws-primary-50-invert
Background--kws-primary-55kws-primary-55-invert on kws-primary-55
Foreground--kws-primary-55-invert
Background--kws-primary-60kws-primary-60-invert on kws-primary-60
Foreground--kws-primary-60-invert
Background--kws-primary-65kws-primary-65-invert on kws-primary-65
Foreground--kws-primary-65-invert
Background--kws-primary-70kws-primary-70-invert on kws-primary-70
Foreground--kws-primary-70-invert
Background--kws-primary-75kws-primary-75-invert on kws-primary-75
Foreground--kws-primary-75-invert
Background--kws-primary-80kws-primary-80-invert on kws-primary-80
Foreground--kws-primary-80-invert
Background--kws-primary-85kws-primary-85-invert on kws-primary-85
Foreground--kws-primary-85-invert
Background--kws-primary-90kws-primary-90-invert on kws-primary-90
Foreground--kws-primary-90-invert
Background--kws-primary-95kws-primary-95-invert on kws-primary-95
Foreground--kws-primary-95-invert
Background--kws-primary-100kws-primary-100-invert on kws-primary-100
Foreground--kws-primary-100-invert

Lightness CSS variables

If you write your own CSS and want to use one these shades yourself, you can access the lightness value via its dedicated CSS variable that has a -l suffix.

For example, the kws-primary-75 color is defined like this:

:root 
        --kws-primary-75: hsla(
          var(--kws-primary-h),
          var(--kws-primary-s),
          var(--kws-primary-75-l),
          1
        );

In this case, --kws-primary-75-l is equal to 76%, and you can access its value with the var(--kws-primary-75-l) CSS variable.

CSS helper classes

While you can access all a color’s CSS variables directly by writing color: var(--kws-primary) for example, Template also provides CSS helper classes for each color.

Those helper classes exist for to set either the color or the background.

#Colorcolor classbackground class
--kws-primaryhas-text-primaryHello Worldhas-background-primaryHello World
<span class="has-text-primary">Color</span>
      <span class="has-background-primary">Background</span>
--kws-primary-inverthas-text-primary-invertHello Worldhas-background-primary-invertHello World
<span class="has-text-primary-invert">Color</span>
      <span class="has-background-primary-invert">Background</span>
--kws-primary-lighthas-text-primary-lightHello Worldhas-background-primary-lightHello World
<span class="has-text-primary-light">Color</span>
      <span class="has-background-primary-light">Background</span>
--kws-primary-light-inverthas-text-primary-light-invertHello Worldhas-background-primary-light-invertHello World
<span class="has-text-primary-light-invert">Color</span>
      <span class="has-background-primary-light-invert">Background</span>
--kws-primary-darkhas-text-primary-darkHello Worldhas-background-primary-darkHello World
<span class="has-text-primary-dark">Color</span>
      <span class="has-background-primary-dark">Background</span>
--kws-primary-dark-inverthas-text-primary-dark-invertHello Worldhas-background-primary-dark-invertHello World
<span class="has-text-primary-dark-invert">Color</span>
      <span class="has-background-primary-dark-invert">Background</span>
--kws-primary-on-schemehas-text-primary-on-schemeHello Worldhas-background-primary-on-schemeHello World
<span class="has-text-primary-on-scheme">Color</span>
      <span class="has-background-primary-on-scheme">Background</span>
--kws-primary-00has-text-primary-00Hello Worldhas-background-primary-00Hello World
<span class="has-text-primary-00">Color</span>
      <span class="has-background-primary-00">Background</span>
--kws-primary-05has-text-primary-05Hello Worldhas-background-primary-05Hello World
<span class="has-text-primary-05">Color</span>
      <span class="has-background-primary-05">Background</span>
--kws-primary-10has-text-primary-10Hello Worldhas-background-primary-10Hello World
<span class="has-text-primary-10">Color</span>
      <span class="has-background-primary-10">Background</span>
--kws-primary-15has-text-primary-15Hello Worldhas-background-primary-15Hello World
<span class="has-text-primary-15">Color</span>
      <span class="has-background-primary-15">Background</span>
--kws-primary-20has-text-primary-20Hello Worldhas-background-primary-20Hello World
<span class="has-text-primary-20">Color</span>
      <span class="has-background-primary-20">Background</span>
--kws-primary-25has-text-primary-25Hello Worldhas-background-primary-25Hello World
<span class="has-text-primary-25">Color</span>
      <span class="has-background-primary-25">Background</span>
--kws-primary-30has-text-primary-30Hello Worldhas-background-primary-30Hello World
<span class="has-text-primary-30">Color</span>
      <span class="has-background-primary-30">Background</span>
--kws-primary-35has-text-primary-35Hello Worldhas-background-primary-35Hello World
<span class="has-text-primary-35">Color</span>
      <span class="has-background-primary-35">Background</span>
--kws-primary-40has-text-primary-40Hello Worldhas-background-primary-40Hello World
<span class="has-text-primary-40">Color</span>
      <span class="has-background-primary-40">Background</span>
--kws-primary-45has-text-primary-45Hello Worldhas-background-primary-45Hello World
<span class="has-text-primary-45">Color</span>
      <span class="has-background-primary-45">Background</span>
--kws-primary-50has-text-primary-50Hello Worldhas-background-primary-50Hello World
<span class="has-text-primary-50">Color</span>
      <span class="has-background-primary-50">Background</span>
--kws-primary-55has-text-primary-55Hello Worldhas-background-primary-55Hello World
<span class="has-text-primary-55">Color</span>
      <span class="has-background-primary-55">Background</span>
--kws-primary-60has-text-primary-60Hello Worldhas-background-primary-60Hello World
<span class="has-text-primary-60">Color</span>
      <span class="has-background-primary-60">Background</span>
--kws-primary-65has-text-primary-65Hello Worldhas-background-primary-65Hello World
<span class="has-text-primary-65">Color</span>
      <span class="has-background-primary-65">Background</span>
--kws-primary-70has-text-primary-70Hello Worldhas-background-primary-70Hello World
<span class="has-text-primary-70">Color</span>
      <span class="has-background-primary-70">Background</span>
--kws-primary-75has-text-primary-75Hello Worldhas-background-primary-75Hello World
<span class="has-text-primary-75">Color</span>
      <span class="has-background-primary-75">Background</span>
--kws-primary-80has-text-primary-80Hello Worldhas-background-primary-80Hello World
<span class="has-text-primary-80">Color</span>
      <span class="has-background-primary-80">Background</span>
--kws-primary-85has-text-primary-85Hello Worldhas-background-primary-85Hello World
<span class="has-text-primary-85">Color</span>
      <span class="has-background-primary-85">Background</span>
--kws-primary-90has-text-primary-90Hello Worldhas-background-primary-90Hello World
<span class="has-text-primary-90">Color</span>
      <span class="has-background-primary-90">Background</span>
--kws-primary-95has-text-primary-95Hello Worldhas-background-primary-95Hello World
<span class="has-text-primary-95">Color</span>
      <span class="has-background-primary-95">Background</span>
--kws-primary-100has-text-primary-100Hello Worldhas-background-primary-100Hello World
<span class="has-text-primary-100">Color</span>
      <span class="has-background-primary-100">Background</span>