Key, Supporting and Marker Colors
key color (web)
RGB: 255/135/0
CMYK: 0/56/94/0
Hex: #ff8700
stage orange dark
RGB: 201/94/2
CMYK: 0/67/100/20
Hex: #c95e02
stage orange light
RGB: 250/184/92
CMYK: 0/33/70/0
Hex: #fab85c
stage orange light 2
RGB: 242/138/21
CMYK: 0/54/95/0
Hex: #f28a15
Use only as a slight variation to the main colour, e.g. as a mouse over shade
stage orange mid
RGB: 237/109/5
CMYK: 0/67/100/0
Hex: #ed6d05
Secondary Colors
blue
RGB: 0/128/201
CMKY: 83/41/0/0
Hex: #0080c9
dark blue
RGB: 0/103/146
CMYK: 90/51/24/9
Hex: #006792
green
RGB: 32/157/68
CMYK: 69/0/78/0
Hex: #209d44
dark green
RGB: 7/135/66
CMYK: 85/21/93/6
Hex: #078742
Gradient (web only!)
For web enviroments only, you can use an additional element - the gradient. This element can be used for larger, singled out elements such as buttons or newsboxes. Use this gradient to soften the harsh look of large orange surfaces on websites. Don’t use them in print media, for various typography purposes, or in any other way than specified above.
The gradient is used from top left to the right bottom at an angle of 135°.
web key color gradient
linear-gradient
CMYK 0/67/100/0 to
0/47/100/0
Hex #ed6d05, #ff8700
web blue color gradient
linear-gradient
CMYK 100/30/0/30 to
100/30/0/0
Hex #00649c, #0080c9
web green color gradient
linear-gradient
CMYK 86/23/95/8 to
81/8/94/0
Hex #07823E, #209d44
Grey shades
Gray shades should be used as stylistic element or in black and white documents.
When using gray in black and white documents please make sure not to use too many dark shades
and pay attention to have enough contrast.
dark gray
RGB: 81/81/81
CMYK: 0/0/0/68
Hex: #515151
mid gray
RGB: 140/140/140
CMYK: 0/0/0/45
Hex: #8c8c8c
light gray
RGB: 185/185/185
CMYK: 0/0/0/27
Hex: #b9b9b9
super light gray
RGB: 244/244/244
CMYK: 0/0/0/8
Hex: #f4f4f4
Message Colors
valid
RGB: 90/188/85
CMYK: 66/0/82/0
Hex: #5abc55
error
RGB: 221/18/61
CMYK: 4/99/67/1
Hex: #dd123d
warning
RGB: 255/200/0
CMYK: 0/23/93/0
Hex: #ffc800
information
RGB: 0/128/255
CMYK: 80/51/0/0
Hex: #0080ff
Do you have any questions?
If you run into any problems using this styleguide or would like to contribute additional presets or templates, please don't hesitate to contact the desing team via Slack or mail to designteam(at)typo3.org.