Colors

If you are wondering which colors can be changed, when we use which colors and what you have to pay attention to, then you have come to the right place. On the utils page you you can also find a detailed overview of the respective classes and variables we use in wescale. On the branding page You can see what the colors will look like on the platform.

Summary

  • Accessibility. Contrast ratio of foreground and background is atleast 1:4.5. (recommended lower limit of Web Content Accessibility Guidelines).
  • Signal colors. Red and green are signal colors and are also used as such by us. In order for the user to recognize warnings for example, a color like red should only be used for warnings, destructive actions etc.

Primary

.$color-primary

#6E5ABF
rgb 110|90|191


On almost every page, the primary action is triggered by a button. This allows us to guide the user through the system and support her in completing tasks as quickly and easily as possible. Accordingly, all buttons that trigger a primary or secondary action have the color $color-primary. Due to our concept of user guidance, this color is reserved for buttons in most cases. (see: Buttons)

Active

.$color-active

#2D77C9
rgb 45|119|201


The active color is used in every element which has a state that can change. The user recognizes at a glance which UI element is active or which element can be activated. It does not matter whether the element was activated by a user or by the system.

Highlight

.$color-highlight

#078390
rgb 7|131|144


In reality, there is often a thin line between highlight and active color. A good indicator for the use of $color-highlight is that the element is neither clickable nor changes its state.

Additional colors

These colors are only partially customizable. For one thing because of their semantics and for another because they are quite opinionated. Adjustments should be discussed in any case, because there is a lot to consider with these variables in contrast to the ones above.

  • Status colors. According to the status of a process you should use these colors. If there is an action which is marked as succeeded by an icon like a checkmark, the checkmark should be in the success-color as well.
  • Gray shades. To keep the visual noise to a minimum, the all in all appearance of the wescale interface is based on subtle shades of gray.
  • Fruit colors. If the default colors are not enough, you can use the fruit colors to highlight an element. For example, for labels that display variety of different statuses.
  • wescale colors. The colors of the wescale logo are not part of the platform. But anyways - they are worth being listed here ;)

Status colors

$color-success
#25A342
rgb 37|163|66

This is written in $font-color-success

$color-warning
#FFB400
rgb 255|180|0

This is written in $font-color-warning

$color-danger
#DC3545
rgb 220|53|69

This is written in $font-color-danger


To ensure the best possible legibility, we always try to stick to the contrast recommended by the WCAG. However, this is not fully possible with the status colors, since these colors are also assigned a semantic meaning. A little excursion into color theory: The contrast of yellow to white, for example, can never be 4.5 to 1. If you darken yellow until the desired contrast is achieved, it is no longer yellow but rather an ochre brown - at best a dirty orange. The semantic meaning - yellow as a warning color - is more important in this case than the contrast ratio. Our compromise, which we make for the status colors, is that there is a difference between background colors and text colors. With background colors, we pay more attention to semantic correctness. With text colors, however, we pay more attention to good legibility and a sufficient contrast.

We distinguish between font-color and background-color for the best possible readability/visibility. Please also note that for longer texts on a yellow background, the color white should not be used, but .wui-color--warning-dark

Gray shades

$color-gray-20
#333333
rgb 51|51|51
$color-gray-33
#555555
rgb 85|85|85
$color-gray-46
#767676
rgb 118|118|118
$color-gray-60
#999999
rgb 153|153|153
$color-gray-80
#cccccc
rgb 204|204|204
$color-gray-87
#dedede
rgb 222|222|222
$color-gray-95
#f1f1f1
rgb 241|241|241

The number of the variable reflects the respective brightness-value from the HSB color model (Hue, Saturation, Brightness) (0 = black, 100 = white). Each variable is mapped to two classes. The class name is always composed according to the same schema:
.wui-color-- or .wui-bg-color-- gray- number of brightness
(eg. .wui-bg-color--gray-95)

Some shades of gray can only be assigned to certain elements such as $default-border-color. With these semantic variables you should make sure that they are used exclusively for the intended purpose.

Fruit colors

Fruit colors

-10
-20
-30
-40
-50 (default)
-60
-70

peach

#FBEBEE

#F7D6DC

#F2B8C2

#E15D75

#D93452

#982439

#6D1A29

yangmei

#FAEAF4

#F4D5E9

#ECB6D8

#D458A6

#C92E90

#8D2065

#651748

pitaya

#F7EDF8

#EFDBF0

#E3C0E5

#BF70C4

#AF4CB5

#7B357F

#58265B

fig

#F4EFFA

#E9DFF4

#D8C7EC

#A57FD4

#8F5FC9

#64438D

#483065

plum

#F0F0FB

#E1E1F6

#CBCBF0

#8888DD

#6A6AD4

#4A4A94

#35356A

blueberry

#EEEFF9

#DDE0F2

#C3C8E8

#7682CB

#5463BE

#3B4585

#2A325F

akebi

#ECF2F9

#D8E4F2

#BBD0E9

#6593CC

#3E78BF

#2B5486

#1F3C60

grapes

#EDF2F5

#DAE4EB

#BFD0DC

#6D94B0

#48799C

#32556D

#243D4E

feijoa

#E6F2F2

#CDE5E4

#A8D2D0

#379893

#057E78

#045854

#033F3C

apple

#E6F3EF

#CEE6DE

#A9D3C6

#399B7C

#08825B

#065B40

#04412E

olive

#E8F3EC

#D1E6D9

#AFD4BC

#479D65

#19843F

#125C2C

#0D4220

kiwano

#F7EFE6

#EFDFCC

#E2C7A6

#BD7F33

#AD5F00

#794300

#573000

papaya

#FBECE6

#F6D9CD

#F0BDA7

#DC6936

#D34304

#D34304

#6A2202

cherry

#FBE8E8

#F7D2D2

#F1B0B0

#DE4A4A

#D61D1D

#961414

#6B0F0F

Colors ain't easy

The fruit colors could be found on all pages and must also work in combination with a variety of components. Together with the other colors they have a great influence on the look and feel and contribute to the recognizability of wescale. We have dealt intensively with the various use cases so that the wescale-colors meet our very high requirements:

  • The fruit colors come in different shades. All default values (e.g. $color-peach-50) are WCAG-2 compliant and have a contrast to white font of at least 1:4,5. ($color-akebi = $color-akebi-50)
  • Among other things, color is used to describe the status and provide at-a-glance meaning. For "rejected", "failed" or other destructive actions we use red shades for example. Conversely, that means: If a variable needs to be adjusted, do not leave the given color space! Red shades remain red shades.
  • The values 10 - 100 indicate how bright a color is (10 = light, 100 = dark). They are used exclusively for the assignment to the perceived contrast. Unlike the gray shades, it is not an exact indicator of the brighness value in the HSB color model.
  • The perceived contrast of one color column is always the same. $color-blueberry-50 has the same perceived contrast as $color-grapes-50. However, the colors actually have different brightness values. The percentage change is therefore not based on a fixed system but on the perceived brightness.

Each variable is mapped to two classes. The class name is always composed according to the same schema: .wui-color-- or .wui-bg-color-- name of color- number of brightness for example: .wui-color--plum-40 or .wui-bg-color--grapes-60

wescale colors

$color-wescale-blue-light
#4EA8E2
rgb 78|168|226
$color-wescale-blue-dark
#2F71BA
rgb 47|113|186
From WUI and with

WUI is wescale’s design system

WPS Management GmbH. All rights reserved | Legal Notice

Some features in this style guide may not work as expected because they are not supported by the browser version you are using.

For the best experience, we recommend upgrading to a newer browser such as Microsoft Edge, Mozilla Firefox, or Google Chrome.