Colors

0001-01-01

A site color theme with up to 7 custom colors can be created to be applied using standard color tags in content, and a series of standard colors as well as a collection of greys are always included.

White, Grey, Black

Make your grey plain and untinted if you like. Or it can be a good idea to add a very subtle tinge of the site's main theme color, to make things feel a little less bland.

White Background

box box-border bg-color-white

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

More Tests Secondary

Grey Background

box bg-color-grey

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

More Tests Secondary

Black Background

box bg-color-black

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

More Tests Secondary

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Primary Color Gradients

UI Colors

Text can use the color palette:  UI Main,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

UI Color Background

box bg-color-ui

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #1

Text can use the color palette:  Color #1,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #1 Background

box bg-color-1

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #2

Text can use the color palette:  Color #2,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #2 Background

box bg-color-2

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #3

Text can use the color palette:  Color #3,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #3 Background

box bg-color-3

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #4

Text can use the color palette:  Color #4,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #4 Background

box bg-color-4

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #5

Text can use the color palette:  Color #5,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #5 Background

box bg-color-5

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #6

Text can use the color palette:  Color #6,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #6 Background

box bg-color-6

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Color #7

Text can use the color palette:  Color #7,   Lightest,   Lighter,   Light,   Mid-Light,   Mid ,   Mid-Dark,   Dark,   Darker,   Darkest. 

Color #7 Background

box bg-color-7

   

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

This is a quote.

More Tests Secondary Button

    Lightest  tint  link
    Lighter  tint  link
    Light  tint  link
    Mid-Light  tint  link
    Mid  tint  link
    Mid-Dark  tint  link
    Dark  tint  link
    Darker  tint  link
    Darkest  tint  link

Spot Colors

Spot colors add punch to a design palette. They are not provided with full gradients, only contrast, links, and a single contrast tint variation for each color.

Spot Colors #1 - #20

Spot Color #1, Spot Color #2, Spot Color #3, Spot Color #4, Spot Color #5, Spot Color #6, Spot Color #7, Spot Color #8, Spot Color #9, Spot Color #10, Spot Color #11, Spot Color #12, Spot Color #13, Spot Color #14, Spot Color #15, Spot Color #16, Spot Color #17, Spot Color #18, Spot Color #19, Spot Color #20

   

Spot Color #1

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

   

Spot Color #2

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #3

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #4

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #5

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #6

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #7

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #8

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #9

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #10

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #11

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #12

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #13

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #14

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #15

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #16

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #17

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #18

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #19

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

   

Spot Color #20

This text has a link example inside and also shows  the tint color  which may be easier to see in bold text.

Quote

More Tests

Standard Colors

Inspired by Bootstrap, these standard colors are available. Tweaking them to suit your site design is a good idea if you have the time and energy, or else they can be used "as is".

Blue, Indigo, Purple, Pink, Red, Orange, Yellow, Green, Teal, Cyan

Blue

   Lightest link
   Lighter link
   Light link
   Mid-Light link
   Blue link
   Mid-Dark link
   Dark link
   Darker link
   Darkest link

Indigo

   Lightest link
   Lighter link
   Light link
   Mid-Light link
   Indigo link
   Mid-Dark link
   Dark link
   Darker link
   Darkest link

Purple

    Lightest link
    Lighter link
    Light   link
    Mid-Light link
    Purple link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Pink

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Pink  tint  link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Red

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Red link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Orange

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Orange link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Yellow

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Yellow link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Green

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Green link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Teal

    Lightest link
    Lighter link
    Light link
    Mid-Light   link
    Teal link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link

Cyan

    Lightest link
    Lighter link
    Light link
    Mid-Light link
    Cyan link
    Mid-Dark link
    Dark link
    Darker link
    Darkest link