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 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
Primary Color Gradients
UI Colors
Text can use the color palette: UI Main, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Detailed Testing
Color #1
Text can use the color palette: Color #1, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #2
Text can use the color palette: Color #2, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #3
Text can use the color palette: Color #3, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #4
Text can use the color palette: Color #4, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #5
Text can use the color palette: Color #5, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #6
Text can use the color palette: Color #6, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
Color #7
Text can use the color palette: Color #7, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
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