Colors

Source

We're using the colors provided by our other product DB UI Base, by which Design tokens are being provided.

Accessibility

Please have a look at the related page within the Marketingportal for more information as well: https://marketingportal.extranet.deutschebahn.com/marketingportal/Basiselemente/Farbe

Criteria

WCAG 2.1 (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1

DB color palette for InDesign, Illustrator and Photoshop

A file containing the Deutsche Bahn color palette for Adobe InDesign, Adobe Illustrator or Adobe Photoshop is provided by the DB Marketingportal.

Inspirational external sources for this pattern

Marketingportal Brand Colors - Primary

  • DB Red $db-color-red
    #ec0016
  • DB White $db-color-white
    #FFFFFF
  • DB Black $db-color-black
    #000000

Marketingportal Brand Colors - Secondary

  • DB Yellow 100 $db-color-yellow-100
    #FFFFDC
  • DB Yellow 200 $db-color-yellow-200
    #FFFFAF
  • DB Yellow 300 $db-color-yellow-300
    #FFF876
  • DB Yellow 400 $db-color-yellow-400
    #FFF000
  • DB Yellow 500 $db-color-yellow-500
    #FFD800
  • DB Yellow 600 $db-color-yellow-600
    #FFBB00
  • DB Yellow 700 $db-color-yellow-700
    #FF9B00
  • DB Yellow 800 $db-color-yellow-800
    #FF7A00
  • DB Orange 100 $db-color-orange-100
    #FFF4D8
  • DB Orange 200 $db-color-orange-200
    #FCE3B4
  • DB Orange 300 $db-color-orange-300
    #FACA7F
  • DB Orange 400 $db-color-orange-400
    #F8AB37
  • DB Orange 500 $db-color-orange-500
    #F39200
  • DB Orange 600 $db-color-orange-600
    #D77B00
  • DB Orange 700 $db-color-orange-700
    #C05E00
  • DB Orange 800 $db-color-orange-800
    #A24800
  • DB Red 100 $db-color-red-100
    #fEE6E6
  • DB Red 200 $db-color-red-200
    #FCC8C3
  • DB Red 300 $db-color-red-300
    #FA9090
  • DB Red 400 $db-color-red-400
    #F75056
  • DB Red 500 $db-color-red-500
    #EC0016
  • DB Red 600 $db-color-red-600
    #C50014
  • DB Red 700 $db-color-red-700
    #9B000E
  • DB Red 800 $db-color-red-800
    #740009
  • DB Burgundy 100 $db-color-burgundy-100
    #F4E8ED
  • DB Burgundy 200 $db-color-burgundy-200
    #EDCBD6
  • DB Burgundy 300 $db-color-burgundy-300
    #DA9AA8
  • DB Burgundy 400 $db-color-burgundy-400
    #C0687B
  • DB Burgundy 500 $db-color-burgundy-500
    #A9455D
  • DB Burgundy 600 $db-color-burgundy-600
    #8C2E46
  • DB Burgundy 700 $db-color-burgundy-700
    #641E32
  • DB Burgundy 800 $db-color-burgundy-800
    #4D0820
  • DB Pink 100 $db-color-pink-100
    #FDEEF8
  • DB Pink 200 $db-color-pink-200
    #F9D2E5
  • DB Pink 300 $db-color-pink-300
    #F4AECE
  • DB Pink 400 $db-color-pink-400
    #EE7BAE
  • DB Pink 500 $db-color-pink-500
    #E93E8F
  • DB Pink 600 $db-color-pink-600
    #DB0078
  • DB Pink 700 $db-color-pink-700
    #B80065
  • DB Pink 800 $db-color-pink-800
    #970052
  • DB Violett 100 $db-color-violett-100
    #F4EEFA
  • DB Violett 200 $db-color-violett-200
    #E0CDE4
  • DB Violett 300 $db-color-violett-300
    #C2A1C7
  • DB Violett 400 $db-color-violett-400
    #9A6CA6
  • DB Violett 500 $db-color-violett-500
    #814997
  • DB Violett 600 $db-color-violett-600
    #6E368C
  • DB Violett 700 $db-color-violett-700
    #581D70
  • DB Violett 800 $db-color-violett-800
    #421857
  • DB Blue 100 $db-color-blue-100
    #E0EFFB
  • DB Blue 200 $db-color-blue-200
    #B4D5F6
  • DB Blue 300 $db-color-blue-300
    #73AEF4
  • DB Blue 400 $db-color-blue-400
    #347DE0
  • DB Blue 500 $db-color-blue-500
    #1455C0
  • DB Blue 600 $db-color-blue-600
    #0C3992
  • DB Blue 700 $db-color-blue-700
    #0A1E6E
  • DB Blue 800 $db-color-blue-800
    #061350
  • DB Cyan 100 $db-color-cyan-100
    #E5FAFF
  • DB Cyan 200 $db-color-cyan-200
    #BBE6F8
  • DB Cyan 300 $db-color-cyan-300
    #84CFEF
  • DB Cyan 400 $db-color-cyan-400
    #55B9E6
  • DB Cyan 500 $db-color-cyan-500
    #309FD1
  • DB Cyan 600 $db-color-cyan-600
    #0087B9
  • DB Cyan 700 $db-color-cyan-700
    #006A96
  • DB Cyan 800 $db-color-cyan-800
    #004B6D
  • DB Turquoise 100 $db-color-turquoise-100
    #E3F5F4
  • DB Turquoise 200 $db-color-turquoise-200
    #BEE2E5
  • DB Turquoise 300 $db-color-turquoise-300
    #83CACA
  • DB Turquoise 400 $db-color-turquoise-400
    #3CB5AE
  • DB Turquoise 500 $db-color-turquoise-500
    #00A099
  • DB Turquoise 600 $db-color-turquoise-600
    #008984
  • DB Turquoise 700 $db-color-turquoise-700
    #006E6B
  • DB Turquoise 800 $db-color-turquoise-800
    #005752
  • DB Green 100 $db-color-green-100
    #E2f3E5
  • DB Green 200 $db-color-green-200
    #BDDBB9
  • DB Green 300 $db-color-green-300
    #8CBC80
  • DB Green 400 $db-color-green-400
    #66A558
  • DB Green 500 $db-color-green-500
    #408335
  • DB Green 600 $db-color-green-600
    #2A7230
  • DB Green 700 $db-color-green-700
    #165C27
  • DB Green 800 $db-color-green-800
    #154A26
  • DB Light Green 100 $db-color-light-green-100
    #EBF7DD
  • DB Light Green 200 $db-color-light-green-200
    #C9EB9E
  • DB Light Green 300 $db-color-light-green-300
    #9FD45F
  • DB Light Green 400 $db-color-light-green-400
    #78BE14
  • DB Light Green 500 $db-color-light-green-500
    #63A615
  • DB Light Green 600 $db-color-light-green-600
    #508B1B
  • DB Light Green 700 $db-color-light-green-700
    #44741A
  • DB Light Green 800 $db-color-light-green-800
    #375F15
  • DB Warm Gray 100 $db-color-warm-gray-100
    #F5F4F1
  • DB Warm Gray 200 $db-color-warm-gray-200
    #DDDED6
  • DB Warm Gray 300 $db-color-warm-gray-300
    #BCBBB2
  • DB Warm Gray 400 $db-color-warm-gray-400
    #9C9A8E
  • DB Warm Gray 500 $db-color-warm-gray-500
    #858379
  • DB Warm Gray 600 $db-color-warm-gray-600
    #747067
  • DB Warm Gray 700 $db-color-warm-gray-700
    #4F4B41
  • DB Warm Gray 800 $db-color-warm-gray-800
    #38342F
  • DB Cool Gray 100 $db-color-cool-gray-100
    #F0F3F5
  • DB Cool Gray 200 $db-color-cool-gray-200
    #D7DCE1
  • DB Cool Gray 300 $db-color-cool-gray-300
    #AFB4BB
  • DB Cool Gray 400 $db-color-cool-gray-400
    #878C96
  • DB Cool Gray 500 $db-color-cool-gray-500
    #646973
  • DB Cool Gray 600 $db-color-cool-gray-600
    #3C414B
  • DB Cool Gray 700 $db-color-cool-gray-700
    #282D37
  • DB Cool Gray 800 $db-color-cool-gray-800
    #131821

Marketingportal Brand Colors - Feedback

  • DB Success $db-color-success: $db-color-light-green-600
    #508B1B
  • DB Error $db-color-error: $db-color-red-500
    #EC0016
  • DB Informative $db-color-error: $db-color-cyan-600
    #0087b9
  • DB Warning $db-color-error: $db-color-yellow-900
    #f75f00

Marketingportal Brand Colors - POI

  • food & drink $db-color-food-drink: $db-color-orange-500
    #f39200
  • health $db-color-health: $db-color-burgundy-500
    #a9455d
  • things to know $db-color-things-to-know: $db-color-warm-gray-500
    #858379
  • community facilities $db-color-community-facilities: $db-color-turquoise-500
    #00a099
  • DB services & facilities $db-color-db-services-facilities: $db-color-blue-600
    #0c3992
  • shopping $db-color-shopping: $db-color-violett-500
    #814997
  • arts & culture $db-color-arts-culture: $db-color-pink-500
    #e93e8f
  • leisure $db-color-leisure: $db-color-green-500
    #408335
  • services $db-color-services: $db-color-cyan-500
    #309fd1
  • guidance $db-color-guidance: $db-color-cool-gray-600
    #3c414b

Marketingportal Brand Colors - Transport

  • ICE $db-color-ice: $db-color-cool-gray-700
    #282d37
  • IC $db-color-ic: $db-color-cool-gray-500
    #646973
  • EC $db-color-ec: $db-color-cool-gray-500
    #646973
  • RE $db-color-re: $db-color-cool-gray-400
    #878c96
  • RB $db-color-rb: $db-color-cool-gray-300
    #afb4bb
  • S-Bahn $db-color-s-bahn: $db-color-green-500
    #408335
  • U-Bahn $db-color-u-bahn: $db-color-blue-500
    #1455c0
  • Tram $db-color-tram: $db-color-burgundy-500
    #a9455d
  • Intercity Bus $db-color-intercity-bus: $db-color-pink-500
    #e93e8f
  • Bus $db-color-bus: $db-color-violett-500
    #814997
  • ship $db-color-ship: $db-color-cyan-500
    #309fd1
  • plane $db-color-plane: $db-color-turquoise-500
    #00a099
  • taxi $db-color-taxi: $db-color-yellow-500
    #ffd800
  • carsharing $db-color-carsharing: $db-color-orange-500
    #f39200
  • bikesharing $db-color-bikesharing: $db-color-light-green-500
    #63a615
  • walking $db-color-walking: $db-color-cool-gray-200
    #d7dce1