Text, link and icon colors

Text standard

100%

#1c1c1c

Text invers

100%

#ffffff

Text-link

100%

#DA0000

Text-link hover

100%

#B30000

Example:

Textlinks inside a paragraph have the 'Text-Link' color' which is slightly darker than the brand color 'UBS-Red' in order to get mandatory color contrast on all possible background-colors. You can see in this example, textlinks have by default also an underline, which makes them better rocognizable.

Icon standard

100%

#444444

Icon invers

100%

#ffffff

Background colors

Chalk

#F9F9F7

Default color for components that need a background-color

Ivory

#F4F3EE

Used in the footer area

Sandstone

#FBF9EE

Snow (white)

#FFFFFF

Button colors

UBS Red

#E60000

Black

#1C1C1C

Tundora

#444444
Hover color

Dark red

#B30000
Hover color

Action stamp colors

Kiwi

#CDD760

Bronze light

#D3C39C

screenshot

Limestone

#F7F3DD

 

Chart colors

Highlight colors for charts

The use of these colors is tailored to the needs for simple charts particularly used for reports and articles on ubs.com.

Bordeau I

#BD000C

Bronze

#AF8626

Lagoon mid

#0084B3

Reduced set of grays for charts

Selection of warm gray tones for simple charts with up to 6 values/colors.

Warm Gray III

#8E8D83

Warm Gray VII

#1C1C1C

Warm Gray IV

#7A7870

Warm Gray V

#5A5D5C

Warm Gray VI

#404040

Extended set of colors for charts

Complex data visualization needs clearly distinguishable colors.

The use of these colors is tailored to the needs for complex and auto-generated charts particularly used in IB and WM.

A sequence of 20 colors is defined to ensure best possible perception of visualized data.

Chart 01

#AF8626

Chart 05

#9F8865

Chart 09

#8489BD

Chart 13

#45999C

Chart 17

#545A9C

Chart 02

#00759E

Chart 06

#2E476B

Chart 10

#0C7EC6

Chart 14

#4972AC

Chart 18

#785E4A

Chart 03

#879420

Chart 07

#469A6C

Chart 11

#654D16

Chart 15

#CC707A

Chart 19

#07476F

Chart 04

#4B2D58

Chart 08

#AD3E4A

Chart 12

#804C95

Chart 16

#295B40

Chart 20

#620004

How it works

  • Colors are used as background for selected components. For some components the background color is defined, for others it can be chosen from the color set to best align with offline material or the image choice.
  • For each background color there is a defined text color (white or dark).
  • Please note that there are some variations from the print rules to meet web accessibility standards (sufficient contrast ratio of at least 4,5:1).

How to use it

  • Select a good fitting background color in the components settings.
  • Adjust background colors with the main color of a primary image and use colors sparingly.

What to avoid

Don‘t use red for any other purpose than those foreseen by our guidelines.

Crosslinks

Brand design platform