Colors
Colors that are already used or should be used at website.
Primary colors
Used all over the shop.
White
HEX: #FFFFFF
RGB: 255, 255, 255
SCSS VAR: -
Grey
HEX: #CCCCCC
RGB: 204, 204, 204
SCSS VAR: $grey
Dark Grey
HEX: #333333
RGB: 51, 51, 51
SCSS VAR: $grey--darker
Theme color
HEX: #60B0FF
RGB: 96, 176, 255
SCSS VAR: $theme
White
White is one of the main colors on our pallet. It serves as background color, mainly for the navigation and panel elements.
Grey
Grey is one of the main colors on our pallet. It is mainly used as background color
Dark Grey
Dark Grey is one of the main colors on our pallet. It is mainly used as background color and is the primary color for text.
Theme color
Theme color is the main color. It is used to highlight buttons, links and active states, as well as important elements eg. product price or marketing campaigns.
Secondary colors
Used in costumer account
Account Settings
HEX: #607D8B
RGB: 96, 125, 139
SCSS VAR: -
Offers
HEX: #D26A5C
RGB: 210, 106, 92
SCSS VAR: -
Shopping list
HEX: #F3B760
RGB: 243, 183, 96
SCSS VAR: $orange
Orders
HEX: #26A69A
RGB: 38, 166, 154
SCSS VAR: -
The secondary color pallet has plenty of different colors. They are mostly used to visually separate the different sections of the costumer account and highlight different functions. Other than the costumer account these colors are only rarely used (to avoid drawing the attention to more than one element at a time). Overall they serve as an addition to the primary colors to modernize the look of the website.
Neutral colors
Mine Shaft
HEX: #333333
RGB: 51, 51, 51
SCSS VAR: $grey--darker
Dove Grey
HEX: #666666
RGB: 102, 102, 102
SCSS VAR: $color--cancelled
Silver Chalice
HEX: #999999
RGB: 153, 153, 153
SCSS VAR: $grey--dark
Silver
HEX: #CCCCCC
RGB: 204, 204, 204
SCSS VAR: $grey
Mercury
HEX: #E5E5E5
RGB: 229, 229, 229
SCSS VAR: $grey--medium
Wild Sand
HEX: #F3F3F3
RGB: 243, 243, 243
SCSS VAR: $grey--light
Alabaster
HEX: #F9F9F9
RGB: 249, 249, 249
SCSS VAR: $grey--lighter
White
HEX: #FFFFFF
RGB: 255, 255, 255
SCSS VAR: -
Functional colors
Error
HEX: #C50E12
RGB: 197, 14, 18
SCSS VAR: $red
Warnig
HEX: #E3B000
RGB: 227, 176, 0
SCSS VAR: $yellow
Success
HEX: #5DA422
RGB: 243, 183, 96
SCSS VAR: $green
Functional colors are used to display a status of an element eg. in notifications, form validation, status updates or awards. They should not be used in any context that contradicts the functionality of the color.