The Christmas Bear is back to a limited time. Shop now
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.
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.
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.
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.
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.
Text can use the color palette: UI Main, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #1, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #2, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #3, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #4, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #5, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #6, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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
Text can use the color palette: Color #7, Lightest, Lighter, Light, Mid-Light, Mid , Mid-Dark, Dark, Darker, Darkest.
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 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 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
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
This text has a link example inside and also shows the tint color which may be easier to see in bold text.
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".
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
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
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
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
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
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
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
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
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
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
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
