Palettes
These palette background colors and varients are supported by the Cosmic theme.
About palette-bg-
Classes
If you wish to set a background color on a container, it is preferred that you use one of these palette classes instead of a flat-color background class. The reason for this is that several "context" color variables are set up by the classes; the variables are used in the Cosmic theme to dynamically style Cosmic components.
palette-bg-
classes do the following
- Apply a background color or varient specified in the class name.
- Optimize the visibility of background patterns over the background color, if they are used in the context.
- Optimize the contrast of foreground colors over the background color; this includes text and link colors.
- Set the accent color (to the background color), as well as some other uses of color; one example is border color of CTA buttons.
About palette-base-
Classes
Each palette color class has an companion "base" class defined. The base class does all of the context setup that the bg class does, except it does not set the background color. This is usefull, for example, when setting up the visual style of a container with a background image. One should choose a background from the palette list that best matches the overall color signature of the background image, then set the companion base class on the container with a background image.
Using a base class eliminates the need to figure out the optimal foreground colors. In addition, any Cosmic components included within the context should visually fit-in better without having to make adjustments.
To find the base class name from a desired background class, replace palette-bg-
with palette-base-
.
As an example, given the background class .palette-bg-medium-gray-t2
the base class is .palette-base-medium-gray-t2
.
Palette Colors
Press the linked color name in the list to jump to that palette.
Palettes
Light Gray
Tint 1
Class: .palette-bg-light-gray-t1
Tint 2
Class: .palette-bg-light-gray-t2
Tint 3
Class: .palette-bg-light-gray-t3
Tint 4
Class: .palette-bg-light-gray-t4
Tint 5
Class: .palette-bg-light-gray-t5
Tint 6
Class: .palette-bg-light-gray-t6
Tint 7
Class: .palette-bg-light-gray-t7
Tint 8
Class: .palette-bg-light-gray-t8
Tint 9
Class: .palette-bg-light-gray-t9
Base: Light Gray
Class: .palette-bg-light-gray
Medium Gray
Tint 1
Class: .palette-bg-medium-gray-t1
Tint 2
Class: .palette-bg-medium-gray-t2
Tint 3
Class: .palette-bg-medium-gray-t3
Tint 4
Class: .palette-bg-medium-gray-t4
Tint 5
Class: .palette-bg-medium-gray-t5
Tint 6
Class: .palette-bg-medium-gray-t6
Tint 7
Class: .palette-bg-medium-gray-t7
Tint 8
Class: .palette-bg-medium-gray-t8
Tint 9
Class: .palette-bg-medium-gray-t9
Base: Medium Gray
Class: .palette-bg-medium-gray
Dark Gray
Tint 1
Class: .palette-bg-dark-gray-t1
Tint 2
Class: .palette-bg-dark-gray-t2
Tint 3
Class: .palette-bg-dark-gray-t3
Tint 4
Class: .palette-bg-dark-gray-t4
Tint 5
Class: .palette-bg-dark-gray-t5
Tint 6
Class: .palette-bg-dark-gray-t6
Tint 7
Class: .palette-bg-dark-gray-t7
Tint 8
Class: .palette-bg-dark-gray-t8
Tint 9
Class: .palette-bg-dark-gray-t9
Base: Dark Gray
Class: .palette-bg-dark-gray
Black
Tint 1
Class: .palette-bg-black-t1
Tint 2
Class: .palette-bg-black-t2
Tint 3
Class: .palette-bg-black-t3
Tint 4
Class: .palette-bg-black-t4
Tint 5
Class: .palette-bg-black-t5
Tint 6
Class: .palette-bg-black-t6
Tint 7
Class: .palette-bg-black-t7
Tint 8
Class: .palette-bg-black-t8
Tint 9
Class: .palette-bg-black-t9
Berry
Tint 1
Class: .palette-bg-berry-t1
Tint 2
Class: .palette-bg-berry-t2
Tint 3
Class: .palette-bg-berry-t3
Tint 4
Class: .palette-bg-berry-t4
Tint 5
Class: .palette-bg-berry-t5
Tint 6
Class: .palette-bg-berry-t6
Tint 7
Class: .palette-bg-berry-t7
Tint 8
Class: .palette-bg-berry-t8
Tint 9
Class: .palette-bg-berry-t9
Base: Berry
Class: .palette-bg-berry
Light Blue
Tint 1
Class: .palette-bg-light-blue-t1
Tint 2
Class: .palette-bg-light-blue-t2
Tint 3
Class: .palette-bg-light-blue-t3
Tint 4
Class: .palette-bg-light-blue-t4
Tint 5
Class: .palette-bg-light-blue-t5
Tint 6
Class: .palette-bg-light-blue-t6
Tint 7
Class: .palette-bg-light-blue-t7
Tint 8
Class: .palette-bg-light-blue-t8
Tint 9
Class: .palette-bg-light-blue-t9
Base: Light Blue
Class: .palette-bg-light-blue
Dark Blue
Tint 1
Class: .palette-bg-dark-blue-t1
Tint 2
Class: .palette-bg-dark-blue-t2
Tint 3
Class: .palette-bg-dark-blue-t3
Tint 4
Class: .palette-bg-dark-blue-t4
Tint 5
Class: .palette-bg-dark-blue-t5
Tint 6
Class: .palette-bg-dark-blue-t6
Tint 7
Class: .palette-bg-dark-blue-t7
Tint 8
Class: .palette-bg-dark-blue-t8
Tint 9
Class: .palette-bg-dark-blue-t9
Base: Dark Blue
Class: .palette-bg-dark-blue
Golden Yellow
Tint 1
Class: .palette-bg-golden-yellow-t1
Tint 2
Class: .palette-bg-golden-yellow-t2
Tint 3
Class: .palette-bg-golden-yellow-t3
Tint 4
Class: .palette-bg-golden-yellow-t4
Tint 5
Class: .palette-bg-golden-yellow-t5
Tint 6
Class: .palette-bg-golden-yellow-t6
Tint 7
Class: .palette-bg-golden-yellow-t7
Tint 8
Class: .palette-bg-golden-yellow-t8
Tint 9
Class: .palette-bg-golden-yellow-t9
Base: Golden Yellow
Class: .palette-bg-golden-yellow
UO Yellow
Tint 1
Class: .palette-bg-uo-yellow-t1
Tint 2
Class: .palette-bg-uo-yellow-t2
Tint 3
Class: .palette-bg-uo-yellow-t3
Tint 4
Class: .palette-bg-uo-yellow-t4
Tint 5
Class: .palette-bg-uo-yellow-t5
Tint 6
Class: .palette-bg-uo-yellow-t6
Tint 7
Class: .palette-bg-uo-yellow-t7
Tint 8
Class: .palette-bg-uo-yellow-t8
Tint 9
Class: .palette-bg-uo-yellow-t9
Base: UO Yellow
Class: .palette-bg-uo-yellow
Chartreuse
Tint 1
Class: .palette-bg-chartreuse-t1
Tint 2
Class: .palette-bg-chartreuse-t2
Tint 3
Class: .palette-bg-chartreuse-t3
Tint 4
Class: .palette-bg-chartreuse-t4
Tint 5
Class: .palette-bg-chartreuse-t5
Tint 6
Class: .palette-bg-chartreuse-t6
Tint 7
Class: .palette-bg-chartreuse-t7
Tint 8
Class: .palette-bg-chartreuse-t8
Tint 9
Class: .palette-bg-chartreuse-t9
Base: Chartreuse
Class: .palette-bg-chartreuse
Lime Green
Tint 1
Class: .palette-bg-lime-green-t1
Tint 2
Class: .palette-bg-lime-green-t2
Tint 3
Class: .palette-bg-lime-green-t3
Tint 4
Class: .palette-bg-lime-green-t4
Tint 5
Class: .palette-bg-lime-green-t5
Tint 6
Class: .palette-bg-lime-green-t6
Tint 7
Class: .palette-bg-lime-green-t7
Tint 8
Class: .palette-bg-lime-green-t8
Tint 9
Class: .palette-bg-lime-green-t9
Base: Lime Green
Class: .palette-bg-lime-green
Grass Green
Tint 1
Class: .palette-bg-grass-green-t1
Tint 2
Class: .palette-bg-grass-green-t2
Tint 3
Class: .palette-bg-grass-green-t3
Tint 4
Class: .palette-bg-grass-green-t4
Tint 5
Class: .palette-bg-grass-green-t5
Tint 6
Class: .palette-bg-grass-green-t6
Tint 7
Class: .palette-bg-grass-green-t7
Tint 8
Class: .palette-bg-grass-green-t8
Tint 9
Class: .palette-bg-grass-green-t9
Base: Grass Green
Class: .palette-bg-grass-green
UO Green
Tint 1
Class: .palette-bg-uo-green-t1
Tint 2
Class: .palette-bg-uo-green-t2
Tint 3
Class: .palette-bg-uo-green-t3
Tint 4
Class: .palette-bg-uo-green-t4
Tint 5
Class: .palette-bg-uo-green-t5
Tint 6
Class: .palette-bg-uo-green-t6
Tint 7
Class: .palette-bg-uo-green-t7
Tint 8
Class: .palette-bg-uo-green-t8
Tint 9
Class: .palette-bg-uo-green-t9
Base: UO Green
Class: .palette-bg-uo-green
UO Legacy Green
Tint 1
Class: .palette-bg-uo-legacy-green-t1
Tint 2
Class: .palette-bg-uo-legacy-green-t2
Tint 3
Class: .palette-bg-uo-legacy-green-t3
Tint 4
Class: .palette-bg-uo-legacy-green-t4
Tint 5
Class: .palette-bg-uo-legacy-green-t5
Tint 6
Class: .palette-bg-uo-legacy-green-t6
Tint 7
Class: .palette-bg-uo-legacy-green-t7
Tint 8
Class: .palette-bg-uo-legacy-green-t8
Tint 9
Class: .palette-bg-uo-legacy-green-t9
Base: UO Legacy Green
Class: .palette-bg-uo-legacy-green
No Color
This effectively resets the color context for a container, with no background color set.
Base: no-color
Class: .palette-bg-no-color