Colors

Color Schemes

The Elite Theme has five default color schemes containing the following color setup. Replace and modify them as needed. When changing colors you can use a contrast ratio tool to check the contrast of your colors.

Default Scheme 1

Name	Value
Primary Color
Secondary Color
Text Color
Primary Button Text
Secondary Button Text
Primary Background
Modal Background
Radial Gradient Background
Complementary Color
Accent Color
Secondary Accent
Success
Error
Warning

Main Colors

Primary Color

This is your main brand color. It is used as the background color and border color for the primary buttons.

Secondary Color

The secondary color is mainly used for secondary buttons. It is used as the background color and border color for the secondary buttons.

Typography

Text Color

This is the primary text color used in all body text, headings and UI elements. Make sure to pick a color that has sufficient contrast to the background color.

Primary Button Text

The primary button text is used for the primary buttons.

Secondary Button Text

The secondary button text is used for the secondary buttons.

Background Colors

Primary Background

The primary background color can be used on pages, sections and blocks.

Modal Background

The background color of the overlay when displaying a modal.

Radial Gradient Background

Can be used as background for pages, sections and blocks. The Radial Gradient Background overrides the primary background color.

Additional Colors

Complementary Color

Used to complement the primary color if and when needed.

Accent Color

Used primarily for links and other interactive elements that are not using the primary colors.

Secondary Accent

Can be used as a way of highlighting special features of the store.

UI Colors

WARNING

Proceed only if your brand have custom UI colors. Otherwise leave these to their default values.

Success

Used for icons or other indicators when displaying a positive message E.g. in stock, available, success. Always use a shade of green.

Error

Used for icons or other indicators when displaying a negative message. E.g. out of stock, not available, user error. Always use a shade of red.

Warning

Used for icons or other indicators when displaying a warning. E.g. low stock, incoming. Always use a shade of orange/yellow.