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.
Table of Contents
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.
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.
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.
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
White box
Here is a link
Black box
Here is alink
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Blue
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Indigo
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Indigo
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Purple
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Purple
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Pink
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Pink
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Red
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Red
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Orange
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Orange
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Yellow
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Yellow
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Green
Lightest
tint
link
Lighter
tint
link
Light
tint
link
Mid-Light
tint
link
Green
tint
link
Mid-Dark
tint
link
Dark
tint
link
Darker
tint
link
Darkest
tint
link
Color on Hover
Basic Test Examples
These are basic tests only, to illustrate the color hover capability. To do: A full test suite is in development.
- bg-color-grey hover-bga-lighter-color-1
- bg-color-grey hover-bga-color-1
- bg-color-grey hover-bga-darker-color-1
- bg-color-1 hover-bga-lighter-color-2
- bg-color-1 hover-bga-color-2
- bg-color-1 hover-bga-darker-color-2
- bg-lighter-color-1 hover-bga-color-white
- bg-lighter-color-1 hover-bga-color-black
- bg-lighter-color-1 hover-bga-color-spot-1
Hover Color Test - Color #1 Lighter on Grey
bg-color-grey hover-bga-lighter-color-1
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Color #1 on Grey
bg-color-grey hover-bga-color-1
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Color #1 Darker on Grey
bg-color-grey hover-bga-darker-color-1
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Color #2 Lighter on Color #1
bg-color-1 hover-bga-lighter-color-2
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Color #2 on Color #1
bg-color-1 hover-bga-color-2
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Color #2 Darker on Color #1
bg-color-1 hover-bga-darker-color-2
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - White on Color #1 Lighter
bg-lighter-color-1 hover-bga-color-white
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Black on Color #1 Lighter
bg-lighter-color-1 hover-bga-color-black
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Grey on Color #1 Lighter
bg-lighter-color-1 hover-bga-color-black
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
Hover Color Test - Spot Color #2 on Color #1 Lighter
bg-lighter-color-1 hover-bga-color-spot-1
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
White box
Here is a link
Black box
Here is alink
- About
- Research
- Ways to help
- Corporate partnerships
- Shop
- Test Area