Colors
Colors and their classification in the color hierarchy - that is, which color is attributed which meaning - have a great influence on the recognition of visual language. The more distinctly and consistently we use our colors, the easier it is for viewers to put things into context.
Primary colors
The characteristic DEHN red tone is defined in all color spaces (e.g., CMYK, RAL, HEX) and must be reproduced as accurately as possible.
DEHN red
#E3000B
227/0/11
DEHN real white
#FFFFFF
255/255/255
Secondary colors
Heatwave, Select Yellow, Eagle Green and Anthracite are highlight colors which can be used to convey information as well as, for example, for eye catchers, highlighting or distinction.
They must not be used for mere decorative purposes. The darker shades of grey are used for high- contrast legibility of typography and line drawings. The light shades of grey are background colors used for grouping together contexts of meaning. All colors are used only in full opacity.
DEHN off white
#F9F8F6
249/248/246
DEHN eerie black
#1F1F1E
31/31/30
DEHN text grey
#5B5B5D
91/91/93
DEHN gainsboro
#DEE3E3
222/227/227
DEHN eagle green
#015B6B
1/91/107
DEHN anthrazit
#30414F
48/65/79
DEHN select yellow
#FB7D0E
251/125/14
DEHN heatwave
#FB7D0E
251/125/14
Semantic colors
For digital products there may be the need for more color, as you must not use the brand red for error messages for example.
For warning yellow just use select-yellow.
success green
#006F2C
0/111/44
danger red
#A4130E
164/19/14
info blue
#02C3E5
2/195/229
CSS variables
// primary colors
--dehn-red: #E3000B;
--dehn-realwhite: #FFFFFF;
// secondary colors
--dehn-offwhite: #F9F8F6;
--dehn-textgrey: #5B5B5D;
--dehn-realblack: #000000;
--dehn-eerieblack: #1F1F1E;
--dehn-heatwave: #FB7D0E;
--dehn-selectyellow: #FEBC39;
--dehn-eagle: #015B6B;
--dehn-gainsboro: #DEE3E3;
--dehn-anthrazit: #30414F;
// semantic colors
--dehn-successgreen: #006F2C;
--dehn-dangerred: #A4130E;
--dehn-infoblue: #02C3E5;
Process colors
Don't use!
There are a few special occasions where you may want to use variations of the colors listed above. For example, a slightly muted red for the subtle button on red. These are defined below, but should really be used with great care, as they are not part of the intended brand colors. If you're not sure whether to use them, you probably shouldn't.
red-75
#E53942
229/57/66
red-50
#F2797F
242/121/127
red-25
#F2B5B8
242/181/184
red-10
#FFE5E7
255/229/231
black-75
#40403E
64/64/62
black-50
#80807B
128/128/123
black-25
#BFBFB9
191/191/185
black-10
#E5E5DE
229/229/222
CSS
// process colors
--dehn-red-75: #E53942;
--dehn-red-50: #F2797F;
--dehn-red-25: #F2B5B8;
--dehn-red-10: #FFE5E7;
--dehn-black-75: #40403E;
--dehn-black-50: #80807B;
--dehn-black-25: #BFBFB9;
--dehn-black-10: #E5E5DE;