Colors
Color naming
In order to name the colors that we use as tokens for our design, we will be using mainly a the HSL color space. This way of defining colors has three components:
- Hue: is a degree on the color wheel from 0° to 360°. 0° is red, 120° is green, 240° is blue based on the canonical RGB colors.
- Saturation: is a percentage value; 0% means a shade of gray and 100% is the full color.
- Lightness: is also a percentage; 0% is black, 100% is white.
One of the main issues is to define the name of the color based on the cultural and perceptional influences. That’s why we will use the hue value for defining the name of the color based on a discretized version of the color wheel for hues. In there, the checkpoint values are indicated with the corresponding degrees value, but also the limits for the color naming, being always the top limit (as “]min, max]” or “(min, max]”).
Once we have the name according to the hue, we will use a numeric suffix to indicate the lightness of the color based, not on the HSL value, but on the LCH value. The saturation value won’t be considered for the naming and it will be used only for adjustment purposes when we are developing palettes.Here we have an example of the naming process:
hsl(290°, 59%, 30%)#6B1F7A
CIE-LCh →
lch( 28%, 58%, 322°)#6B1F7A
Naming →
Lila 28#6B1F7A
In case of having colors where the HSL saturation is 0%, we will use the name “Grey” and set the HSL hue always to 0º.
Brand colors
The corporate image styleguide of PohlCon, which includes the children brands PUK, H-BAU and JORDAHL, provides at least the definition of the corporative colors per each brand, a scale of greys, and some other functional colors (a tuned triadic based on PohlCon’s lila).The brands’ colors will be the ones also present in the logos. So far, the only implementation done has been PohlCon’s lila, so the rest of the colors can be adjusted for the design system. The colors were extracted from the corporate identity definition of Pantone’s coloring for the different brands and their corresponding official RGB value:
But the colors require some correction to adjust them to the theoretical values that we are going to be using.
- For the PohlCon’s lila, we round the HSL values. And for the grey, since it has a saturation component, we will adjust the theoretical value to have a true lightness (LCH) of almost rounded 70.
- For the JORDAHL’s cobalt, the previous logo had a color of hsl(209°, 100%, 27%), and the change has reduced the lightness -10%, far from the PohlCon’s value. That’s why we will be using the HEX color referenced also in the documentation: #004388, so the lightness in LCH almost matches the one of PohlCon’s lila.
- For the PUK’s colors, the correction from previous versions of the colors are properly done. We will only apply correction in the saturation on the primary until the chroma LCH value matches the ones from JORDAHL.
- For the H-BAU’s turquoise we will do the same as with PUK’s primary.
As it can be noticed, PohlCon and PUK use both two colors in their logos. The second color for PUK will be ignored for the construction of the design system in terms of development. There are in addition two specifications for complementary colors:
We will see the corrections later with a justification for the selection of the colors.
Grey scale
For the construction of the lighter greys we increase the lightness in the LCH color space approximately by +10% twice, and one last time with a +8% approx. to avoid a pure white.
The grey scale will be based on the grey used in the PohlCon logo as the middle point. For the construction of the darker greys we will reduce the lightness (LCH color space) three times by -15% approx.:
Complementary colors
For the tuned triadic colors that will serve as the main palette, some adjustments have been done:
- Secondary color: the result has the average hue of the brand colors (#008799 from ( 210º + 207º + 158º)/3 = 192º), the average HSL saturation ((100% + 79% + 84%)/3 = 88%), and the average real lightness of the three brand colors in the LCH colorspace ((50 + 45 + 30)/3) = 45 as lightness. That allows a secondary color to be the reminiscence of the mixing of the previous three brands.
- Tertiary color: for a contrast color, we obtain the split complementary based on PohlCon’s lila an the secondary color. Then we increase the lightness (this time in HSL color space) to make it pass the WCAG AAA with the minimum of 7:1. To avoid having a yellow color and keep that color available for other purposes, we will tune the hue just a bit (+4°) to turn it into a grape color so it fits the cold pattern of the other two colors.This brings a final tertiary color with a lot of contrast and a bright color for “call to action” remarks and closer to the cold colors:
We can check that the differences with the proposed colors of the corporate image are not that big:
Status color
- Information: information status usually is not critical, its perception therefore not crucial. We leave colors providing a high contrast to our base colors for the other status colors. We go for an adjacent color (with a distance of approx. 50°) in regard of our Lila 28 and Azure 45 (being our primary and secondary colors). Furthermore, we keep the real lightness at 45% and keep 60% of saturation acc. to our primary color.
Blue 45hsl(240°, 60%, 60%)lch( 45%, 72%, 299°)#5C5CD6
- Success: in western cultures green is associated with positive / success meanings. This is why we aim for a green success color in general. Coming from the information color, we divide the hue by 2 to get perfectly to the green section on the color wheel. Keeping the lightness at 60%, we desaturate until we reach 75% of real lightness (LCH color space).
Green 75hsl(120°, 53%, 60%)lch( 75%, 69%, 140°)#63CF63
- Warning: warning colors tend to be yellow or orange-ish. The perception of different yellow shades, especially the light ones, as well as its possibility to be displayed in the RGB color space, is very limited and therefore, we try to avoid yellow and aim for an Ochre, instead. Taking our tertiary color as a reference, we adjust the hue down to 53°, in order to keep a notable distinction to the yellow color space. To respect aforesaid about light yellowish shades, we aim for a rather more saturated shade than the tertiary color but with respect to the palettes definition an LCH-lightness value beneath 90. We define the LCH-lightness to be 80.
Ochre 80hsl( 53°, 78%, 49%)lch( 80%, 78%, 96°)#DEC81B
- Error: Furthermore taking Pohlcon’s base color and our warning color into account, we go for a hue that’s approx. in between both, leading to 350°. The LCH-lightness wil be set to the adjusted mean of the two colors (54% to 50%). From there, we aim for a similar saturation compared to warning, so we set it to 80%.
Red 50hsl(350°, 80%, 52%)lch( 50%, 79%, 25°)#E72343
Color semantics and weight
To balance out the color distribution in interfaces we follow a fundamental design rule of 60-30-10 where each number represents a percentage of one color used. This way we avoid having feel of cluttered screens and have the least possible eye strain for the users who can be engineers and architects spending long hours on the screens using applications built with Bauhaus DS.
In our case the 60% - the dominant hue - is the neutral Grey 95 used mainly for backgrounds. Depending on the complexity of application to be designed additional background color can be introduced (e.g. for 3D environment) to distinguish between different levels.
30% is for the secondary color used to highlight specific elements such as foreground or actionable items.
10% is for accent colors that are brand specific.
Text color is excluded from this categorization and it is the darkest shade of the neutral color; in this case of Grey.
Another exception derived from the brand style is the highlight color used in call-to-action buttons and some illustrations, which is Grape 86. This highlight color will be used in applications in rare cases where a more prominent CTA (call-to-action) is needed because there has already been abundant use of accent (brand) color in different actions/buttons.
Color palettes
For the elaboration of the different color palettes we will use a technique based on the HSL color space. We will use the result line of connecting the point for white (hsl(h, s/2%, 100%)) that has half the component of saturation than the base color, and the base color of the palette as the reference for extracting the possible different tones of our palette. The line can be extended to produce darker color than the base one.
Each chosen tone must belong to this line of possible values. In order to do that, we can use the tangent value as a constant for our calculations:
That way we ensure consistency between the colors and elaborate palette following the same progression of “tinting” and “shading”.
For the status colors, we will calculate the point and use only the lightness to change the value of the tone in order to have a more outstanding palette for the colors that are going to be used for indications.
Based on that principle, we only need to know which values in the lines are we going to use, and for that we will use the grey scale as a reference. We will use the values that have the same lightness (in LCH) as the values of the grey scale as possible slots for the color palettes of each color. For the status color, only the value of 90 will be calculated, and one additional that will have the lightness (LCH) in the middle point between 90 and the base color one.
With that in mind, this will be the result of applying some shades and tints to the base colors:
| Grey | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Grey 0 | #000000 | rgb( 0, 0, 0) | hsl( 0, 0, 0) | cmyk( 0, 0, 0, 100) | --color-grey-0 | |
| Grey 25 | #3B3B3B | rgb( 59, 59, 59) | hsl( 0, 0, 23) | cmyk( 0, 0, 0, 77) | --color-grey-25 | |
| Grey 40 | #5E5E5E | rgb( 94, 94, 94) | hsl( 0, 0, 37) | cmyk( 0, 0, 0, 63) | --color-grey-40 | |
| Grey 54 | #828282 | rgb(130, 130, 130) | hsl( 0, 0, 51) | cmyk( 0, 0, 0, 49) | --color-grey-54 | |
| Grey 70 | #ABABAB | rgb(171, 171, 171) | hsl( 0, 0, 67) | cmyk( 0, 0, 0, 33) | --color-grey-70 | |
| Grey 80 | #C7C7C7 | rgb(199, 199, 199) | hsl( 0, 0, 78) | cmyk( 0, 0, 0, 22) | --color-grey-80 | |
| Grey 86 | #D6D6D6 | rgb(214, 214, 214) | hsl( 0, 0, 84) | cmyk( 0, 0, 0, 16) | --color-grey-86 | |
| Grey 90 | #E3E3E3 | rgb(227, 227, 227) | hsl( 0, 0, 89) | cmyk( 0, 0, 0, 11) | --color-grey-90 | |
| Grey 93 | #EBEBEB | rgb(235, 235, 235) | hsl( 0, 0, 92) | cmyk( 0, 0, 0, 8) | --color-grey-93 | |
| Grey 98 | #FAFAFA | rgb(250, 250, 250) | hsl( 0, 0, 98) | cmyk( 0, 0, 0, 2) | --color-grey-98 | |
| Lila | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Lila 30 | #6E2182 | rgb(110, 33, 130) | hsl(288, 60, 32) | cmyk( 15, 75, 0, 49) | --color-lila-29 | |
| Lila 54 | #B660C7 | rgb(182, 96, 199) | hsl(290, 48, 58) | cmyk( 9, 52, 0, 22) | --color-lila-54 | |
| Lila 70 | #CC9AD6 | rgb(204, 154, 214) | hsl(290, 42, 72) | cmyk( 5, 28, 0, 16) | --color-lila-70 | |
| Lila 80 | #DBBCE1 | rgb(219, 188, 225) | hsl(290, 38, 81) | cmyk( 3, 16, 0, 12) | --color-lila-80 | |
| Lila 90 | #EBDDEE | rgb(235, 221, 238) | hsl(289, 33, 90) | cmyk( 1, 7, 0, 7) | --color-lila-90 | |
| Blue | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Blue 45 | #5C5CD6 | rgb( 92, 92, 214) | hsl(240, 60, 60) | cmyk( 57, 57, 0, 16) | --color-blue-45 | |
| Blue 67 | #9C9CE7 | rgb(156, 156, 231) | hsl(240, 61, 76) | cmyk( 32, 32, 0, 9) | --color-blue-67 | |
| Blue 90 | #E2E2F8 | rgb(226, 226, 248) | hsl(240, 61, 93) | cmyk( 9, 9, 0, 3) | --color-blue-90 | |
| Blue 95 | #EFEFFB | rgb(239, 239, 251) | hsl(240, 60, 96) | cmyk( 5, 5, 0, 2) | --color-blue-95 | |
| Cobalt | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Cobalt 30 | #00458A | rgb( 0, 69, 138) | hsl(210, 100, 27) | cmyk(100, 50, 0, 46) | --color-cobalt-30 | |
| Cobalt 60 | #6094C7 | rgb( 96, 148, 199) | hsl(210, 48, 58) | cmyk( 52, 26, 0, 22) | --color-cobalt-60 | |
| Cobalt 70 | #78B0E8 | rgb(120, 176, 232) | hsl(210, 71, 69) | cmyk( 48, 24, 0, 9) | --color-cobalt-70 | |
| Cobalt 80 | #A7C9EC | rgb(167, 201, 236) | hsl(210, 64, 79) | cmyk( 29, 15, 0, 7) | --color-cobalt-80 | |
| Cobalt 90 | #D3E3F3 | rgb(211, 227, 243) | hsl(210, 57, 89) | cmyk( 13, 7, 0, 5) | --color-cobalt-90 | |
| Cerulean | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Cerulean 45 | #156EB7 | rgb( 21, 110, 183) | hsl(207, 79, 40) | cmyk( 89, 40, 0, 28) | --color-cerulean-45 | |
| Cerulean 61 | #6099C7 | rgb( 96, 153, 199) | hsl(207, 48, 58) | cmyk( 52, 23, 0, 22) | --color-cerulean-61 | |
| Cerulean 67 | #98A4AE | rgb(152, 164, 174) | hsl(207, 12, 64) | cmyk( 13, 6, 0, 32) | --color-cerulean-67 | |
| Cerulean 70 | #78B0DE | rgb(120, 176, 222) | hsl(207, 61, 67) | cmyk( 46, 21, 0, 13) | --color-cerulean-70 | |
| Cerulean 80 | #A9CAE5 | rgb(169, 202, 229) | hsl(207, 54, 78) | cmyk( 26, 12, 0, 10) | --color-cerulean-80 | |
| Cerulean 90 | #D6E4F0 | rgb(214, 228, 240) | hsl(208, 46, 89) | cmyk( 11, 5, 0, 6) | --color-cerulean-90 | |
| Azure | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Azure 45 | #097590 | rgb( 9, 117, 144) | hsl(192, 88, 30) | cmyk( 94, 19, 0, 44) | --color-azure-45 | |
| Azure 70 | #24BAE0 | rgb( 36, 186, 224) | hsl(192, 75, 51) | cmyk( 84, 17, 0, 12) | --color-azure-70 | |
| Azure 80 | #8BD2E4 | rgb(139, 210, 228) | hsl(192, 62, 72) | cmyk( 39, 8, 0, 11) | --color-azure-80 | |
| Azure 90 | #CDE8EF | rgb(205, 232, 239) | hsl(192, 52, 87) | cmyk( 14, 3, 0, 6) | --color-azure-90 | |
| Turquoise | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Turquoise 50 | #0C885B | rgb( 12, 136, 91) | hsl(158, 84, 29) | cmyk( 91, 0, 33, 47) | --color-turquoise-50 | |
| Turquoise 69 | #1AC184 | rgb( 26, 193, 132) | hsl(158, 76, 43) | cmyk( 87, 0, 32, 24) | --color-turquoise-69 | |
| Turquoise 80 | #56DCAB | rgb( 86, 220, 171) | hsl(158, 66, 60) | cmyk( 61, 0, 22, 14) | --color-turquoise-80 | |
| Turquoise 90 | #C1EBDC | rgb(193, 235, 220) | hsl(159, 51, 84) | cmyk( 18, 0, 6, 8) | --color-turquoise-90 | |
| Green | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Green 50 | #2A892F | rgb( 42, 137, 47) | hsl(123, 53, 35) | cmyk( 69, 0, 66, 46) | --color-green-50 | |
| Green 75 | #63CF63 | rgb( 99, 207, 99) | hsl(120, 53, 60) | cmyk( 52, 0, 52, 19) | --color-green-75 | |
| Green 80 | #86DA86 | rgb(134, 218, 134) | hsl(120, 53, 69) | cmyk( 39, 0, 39, 15) | --color-green-80 | |
| Green 90 | #C4EDC4 | rgb(196, 237, 196) | hsl(120, 53, 85) | cmyk( 17, 0, 17, 7) | --color-green-90 | |
| Green 95 | #E4F7E4 | rgb(228, 247, 228) | hsl(120, 54, 93) | cmyk( 8, 0, 8, 3) | --color-green-95 | |
| Grape | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Grape 86 | #D1E02E | rgb(209, 224, 46) | hsl( 65, 74, 53) | cmyk( 7, 0, 79, 12) | --color-grape-86 | |
| Grape 90 | #E3E7B1 | rgb(227, 231, 177) | hsl( 64, 53, 80) | cmyk( 2, 0, 23, 9) | --color-grape-90 | |
| Ochre | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Ochre 70 | #BFAB18 | rgb(191, 171, 24) | hsl( 53, 78, 42) | cmyk( 0, 10, 87, 25) | --color-ochre-70 | |
| Ochre 80 | #DEC81B | rgb(222, 200, 27) | hsl( 53, 78, 49) | cmyk( 0, 10, 88, 13) | --color-ochre-80 | |
| Ochre 85 | #E9D649 | rgb(233, 214, 73) | hsl( 53, 78, 60) | cmyk( 0, 8, 69, 9) | --color-ochre-85 | |
| Ochre 90 | #F0E48A | rgb(240, 228, 138) | hsl( 53, 77, 74) | cmyk( 0, 5, 43, 6) | --color-ochre-90 | |
| Ochre 95 | #F8F2C9 | rgb(248, 242, 201) | hsl( 52, 77, 88) | cmyk( 0, 2, 19, 3) | --color-ochre-95 | |
| Red | ||||||
|---|---|---|---|---|---|---|
| Name | HEX | RGB | HSL | CMYK | CSS token | |
| Red 50 | #E72343 | rgb(231, 35, 67) | hsl(350, 80, 52) | cmyk( 0, 85, 71, 9) | --color-red-50 | |
| Red 70 | #F28C9D | rgb(242, 140, 157) | hsl(350, 80, 75) | cmyk( 0, 42, 35, 5) | --color-red-70 | |
| Red 90 | #FBDAE0 | rgb(251, 218, 224) | hsl(349, 80, 92) | cmyk( 0, 13, 11, 2) | --color-red-90 | |
| Red 95 | #FDEDEF | rgb(253, 237, 239) | hsl(353, 80, 96) | cmyk( 0, 6, 6, 1) | --color-red-95 | |