Color Palettes & Context

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