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
![Use only as a slight variation to the main colour, e.g. as a mouse over shade](/fileadmin/_processed_/4/e/csm_stage_orange_light_2_215f55b108.jpg)
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
![](/fileadmin/_processed_/c/c/csm_stage_orange_mid_c0dd590308.jpg)
stage orange mid
RGB: 237/109/5
CMYK: 0/67/100/0
Hex: #ed6d05
Secondary Colors
![](/fileadmin/_processed_/b/e/csm_blue-wo_08eb42c873.png)
blue
RGB: 0/128/201
CMKY: 83/41/0/0
Hex: #0080c9
![](/fileadmin/_processed_/6/2/csm_dark_blue-wo_999c2f2fe3.png)
dark blue
RGB: 0/103/146
CMYK: 90/51/24/9
Hex: #006792
![](/fileadmin/_processed_/1/7/csm_green-wo_2556e49ea1.png)
green
RGB: 32/157/68
CMYK: 69/0/78/0
Hex: #209d44
![](/fileadmin/_processed_/a/8/csm_dark_green-wo_ede9b907c1.png)
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°.
![TYPO3 web key color gradient linear-gradient (135deg, #f49700 15%, #e18d00 85%)](/fileadmin/_processed_/e/7/csm_web_key_color_gradient_f86e122efd.png)
web key color gradient
linear-gradient
CMYK 0/67/100/0 to
0/47/100/0
Hex #ed6d05, #ff8700
![TYPO3 web blue color gradient linear-gradient (135deg, #538bb3 15%, #426f8f 85%)](/fileadmin/_processed_/1/c/csm_web_blue_color_gradient_8a5edb313e.png)
web blue color gradient
linear-gradient
CMYK 100/30/0/30 to
100/30/0/0
Hex #00649c, #0080c9
![TYPO3 web green color gradient linear-gradient (135deg, #75a75a 15%, #5e8648 85%)](/fileadmin/_processed_/0/3/csm_web_green_color_gradient_1682e6d024.png)
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
![](/fileadmin/_processed_/d/d/csm_valid_f7c126938d.png)
valid
RGB: 90/188/85
CMYK: 66/0/82/0
Hex: #5abc55
![](/fileadmin/_processed_/1/8/csm_error_593d8c9c61.png)
error
RGB: 221/18/61
CMYK: 4/99/67/1
Hex: #dd123d
![](/fileadmin/_processed_/5/0/csm_warning_a3bc818858.png)
warning
RGB: 255/200/0
CMYK: 0/23/93/0
Hex: #ffc800
![](/fileadmin/_processed_/3/4/csm_information_f6feee7ae8.png)
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.