sunweb

Colors

foundations colors

Definition


The colours are used to give personality and reflect the brand into the design.
Every colour has dark and light shades, that can be also applied to the UI in order to increase its effectivity. Are divided in these categories:


brand colors
The primary and secondary colour, that are selected to represent the brand identity. The accent color is used to emphasize.
Only the primary colors is mandatory to define a set of brand colors.
primary
HEX#ff333f
RGBA255, 51, 63, 255
primary--ultra-light
HEX#ffcacf
RGBA255, 202, 207, 255
primary--light
HEX#ffcacf
RGBA255, 202, 207, 255
primary--semi-light
HEX#ff333f
RGBA255, 51, 63, 255
primary--semi-dark
HEX#ea2934
RGBA234, 41, 52, 234
primary--dark
HEX#ea2934
RGBA234, 41, 52, 234

neutral colors
Is formed by white, black and grey, but also includes light and dark grey shades.
These colours are used to represent softness and lightness, typically used as backgrounds or borders.
They also give more possibilities and readability to the UI.
white
HEX#ffffff
RGBA255, 255, 255, 255
black
HEX#362f2f
RGBA54, 47, 47, 54
grey--ultra-light
HEX#fbf9f6
RGBA251, 249, 246, 251
grey--light
HEX#edebe7
RGBA237, 235, 231, 237
grey--semi-light
HEX#d9d6d1
RGBA217, 214, 209, 217
grey
HEX#b5b0ab
RGBA181, 176, 171, 181
grey--semi-dark
HEX#928d8b
RGBA146, 141, 139, 146
grey--dark
HEX#494141
RGBA73, 65, 65, 73
grey--ultra-dark
HEX#000000
RGBA0, 0, 0, 0
white--transparent
HEX#ffffff
RGBA255, 255, 255, 255
black--transparent
HEX#000000
RGBA0, 0, 0, 0

state colors
These colors increase the usability by giving clear messages about the status, such as success, error, failure and reminder.
The state colors does not represent the brand but general functional user experience.
success
HEX#21b788
RGBA33, 183, 136, 33
info
HEX#008fcb
RGBA0, 143, 203, 0
warning
HEX#f4be15
RGBA244, 190, 21, 244
danger
HEX#ed2924
RGBA237, 41, 36, 237
success--ultra-light
HEX#a6e2cf
RGBA166, 226, 207, 166
success--light
HEX#a6e2cf
RGBA166, 226, 207, 166
success--semi-light
HEX#21b788
RGBA33, 183, 136, 33
success--semi-dark
HEX#198966
RGBA25, 137, 102, 25
success--dark
HEX#198966
RGBA25, 137, 102, 25
info--ultra-light
HEX#a7def9
RGBA167, 222, 249, 167
info--light
HEX#a7def9
RGBA167, 222, 249, 167
info--semi-light
HEX#008fcb
RGBA0, 143, 203, 0
info--semi-dark
HEX#006996
RGBA0, 105, 150, 0
info--dark
HEX#006996
RGBA0, 105, 150, 0
warning--ultra-light
HEX#fdefb8
RGBA253, 239, 184, 253
warning--light
HEX#fdefb8
RGBA253, 239, 184, 253
warning--semi-light
HEX#f4be15
RGBA244, 190, 21, 244
warning--semi-dark
HEX#ff9933
RGBA255, 153, 51, 255
warning--dark
HEX#ff9933
RGBA255, 153, 51, 255
danger--ultra-light
HEX#facac9
RGBA250, 202, 201, 250
danger--light
HEX#facac9
RGBA250, 202, 201, 250
danger--semi-light
HEX#ed2924
RGBA237, 41, 36, 237
danger--semi-dark
HEX#ce231f
RGBA206, 35, 31, 206
danger--dark
HEX#ce231f
RGBA206, 35, 31, 206

theme colors
Theme colors are defined to differentiate some abstract concepts like package collections.
boutique
HEX#1f448d
RGBA31, 68, 141, 31
cycling
HEX#333333
RGBA51, 51, 51, 51
excellent
HEX#5e2f7e
RGBA94, 47, 126, 94
famfun
HEX#ed2924
RGBA237, 41, 36, 237
secrets
HEX#00bfd4
RGBA0, 191, 212, 0
selections
HEX#f66e20
RGBA246, 110, 32, 246
villages
HEX#147a58
RGBA20, 122, 88, 20
xperience
HEX#ed2924
RGBA237, 41, 36, 237
atlantis
HEX#fe6400
RGBA254, 100, 0, 254
totally_snow
HEX#ff6600
RGBA255, 102, 0, 255

other colors
This colors are useful to highlight certain information or to increase the wealth of the UI.
citrus
HEX#ff00c7
RGBA255, 0, 199, 255
digital-blue
HEX#ff00c7
RGBA255, 0, 199, 255
flow
HEX#ff00c7
RGBA255, 0, 199, 255
neutral-alternate
HEX#ff00c7
RGBA255, 0, 199, 255
lime
HEX#ff00c7
RGBA255, 0, 199, 255
petrol
HEX#ff00c7
RGBA255, 0, 199, 255
turquoise
HEX#ff00c7
RGBA255, 0, 199, 255

vendor colors
These colors are used to represent external services or social networks.
facebook
HEX#3b5998
RGBA59, 89, 152, 59
twitter
HEX#00aced
RGBA0, 172, 237, 0

accessibility colors
Accessibility colors are defined to be used to improve accessibility in some cases.
grey
HEX#797676
RGBA121, 118, 118, 121