Color palettes have been designed to build a consistent ABB identity on the Web. It is important that you ensure that the right colors are used.
Summary
- Color palettes have been designed to build a consistent ABB identity on the Web
- It is important to ensure that the the right colors are used, as they also have been designed to function as visual codes for the users
- 4 common colors and 3 link colors apply to all solutions. One of the common colors, default grey, should be used on buttons
- Different color palettes have been defined for ABB Internet and ABB intranet
Color of ABB logo for the Web
- The color red should only be used for the ABB logo
- For the Web version of the logo a special color code applies:
- More information about the ABB logo is found under Visual elements
Common colors
| 1. Default blue |  | RGB 22/71/129
HEX 164781 |
USE:
ABB Internet and intranet:
- Text color for headlines and sub-headlines
- Text color for top menu level 2 (non-selected menu items)
- Text color for left menu level 3-5
- Text color for Masthead title
- Each section color is available in 4 shades
- Background color for inactive top icons
- Selected item in drop-down boxes
ABB Internet:
- Background color for top menu level 1
- Site identifier
ABB intranet:
- Main site color for ABB Group site
General:
- Optional use: When creating graphics for content or new applications, Default blue may be used on lines, etc. In addition it may be used on application identifiers (name of application)
- Use of Default blue as background color should be limited to small areas
| 2. Default grey | | RGB 213/217/223
HEX D5D9DF |
USE:
ABB Internet:
- Background color for top menu level 2 on main page
- Background color for left menu levels 3-5
- Background color for Headings
- Background color on every other row to highlight figures in a table
- Button color
- Optional use: When creating graphics for content or applications, Default gray could be used on lines, or as background color for graphics
ABB intranet:
- Background color for left menu levels 3-5
- Background color on every other row to highlight figures in a table
- Button color
| 3. White | | RGB 255/255/255
HEX FFFFFF |
USE:
- Text color for top menu level 1
- Text color for selected top menu item level 2
- Text color for left menu title level 3
- Color of text, graphics or icons applied on a dark background
| 4. Black | | RGB 0/0/0
HEX 000000 |
USE:
- All text in Content and Resource area that are not links or headlines
- Optional use: When creating graphics for content or new applications, Black could be used on lines, etc.
- Use of Black as background color should be avoided
- Text color on buttons
Link colors
USE:
- Text color for not visited links, RGB 55/120/180, HEX 3778B4, (also used on mouseover on top icons)
- Text color for visited links, RGB 154/52/100, HEX 9A3464
Note! Underline links when mouseover.
Button color
One of the common colors, default grey, should be used on buttons. RGB 213/217/223, HEX D5D9DF
Text in the button should be black, RGB 0/0/0, HEX 000000
USE:
- Buttons (Search, OK, Submit,...)
- Drop-down boxes
ABB Internet colors
- 7 section colors identify different sections of content
- Each section color is available in 4 shades
- The colors defined for a specific section should only be used on elements related to this section
Section colors:
USE:
Main section color (darkest shade):
- Highlight color for selected top menu item level 1-2
- Background color for left menu title level 3
- Border color for left menu level 4-5
- Background color for headline row in tables
- May be used in mastheads, animations or other graphics for the section
- Should not be used as a background color on large areas
Medium shade of section color:
- May be used in mastheads, animations or other graphics for the section
- Should not be used as a background color on large areas
Light shade of section color:
- Background color for top menu level 2
- Highlight color for selected left menu item level 3-5
- Background color for Masthead title
- Background color for animations
- May be used in other parts of the masthead, animations or other graphics for the section
- Should not be used as background color on large areas
Extra light shade of section color:
- May be used in mastheads, animations or other graphics for the section
- May be used as background color on larger areas
ABB intranet colors
- The ABB intranet consists of three types of sites: ABB Group, divisions and countries
- Each site type has a site color
- Each site color is available in a selection of shades
- Some colors are used on several of the site types
Site colors:
USE:
Main site color (darkest shade):
- Highlight color for selected top menu item level 1-2
- May be used in mastheads, animations or other graphics for the site
- Should not be used as a background color on large areas
Medium shade of site color (only defined for Group site):
- Background color for left menu title level 3
- Border color for left menu level 4-5
- May be used in mastheads, animations or other graphics
- Should not be used as a background color on large areas
Light shade of site color:
- Background color for top menu level 2
- Light shade of Group site color is used to highlight selected left menu item level 3-5 on all sites (note this)
- Background color for Masthead title
- Background color for animations
- May be used in other parts of the masthead, animations or other graphics for the section
- Should not be used as background color on large areas
Extra light shade of site color (only defined for Group site):
- Background color for Headings
- May be used in mastheads, animations or other graphics for the section
Ultra light shade of site color (only defined for Group site):
- May be used as background color on larger areas
- Color code: RGB 239/246/252, HEX EFF6FC
Complete color palette
| Common colors | |
| | | |
Default blue
RGB
22/71/129
HEX 164781 | Default grey
RGB
213/217/223
HEX D5D9DF | White
RGB
255/255/255
HEX FFFFFF | Black
RGB
0/0/0
HEX 000000 |
| | | |
| Link colors | |
| | | |
Not visited
RGB
74/148/213
HEX 4A94D5 | On mouseover
RGB
66/105/151
HEX 426997 | Visited
RGB
154/52/100
HEX 9A3464 | |
| | | |
| Button color | | | |
| | | |
Default grey
RGB 213/217/223
HEX: D5D9DF | Black
RGB
0/0/0
HEX 000000 | | |
| | | |
ABB Internet section colors (see above for when to use)
:
| About us |
| | | |
Grey
RGB
135/133/134
HEX 878586 | Medium grey
RGB
169/168/168
HEX A9A8A8 | Light grey
RGB
194/192/193
HEX C2C0C1 | Extra light
grey
RGB
226/222/223
HEX E2DEDF |
| | | |
| Products & Services |
| | | |
Avocado
RGB
79/173/113
HEX 4FAD71 | Medium avocado
RGB
115/183/139
HEX 73B78B | Light avocado
RGB
171/204/185
HEX ABCCB9 | Extra light avocado
RGB
216/229/220
HEX D8E5DC |
| | | |
| Sustainability |
| | | |
Lime
RGB
151/207/80
HEX 97CF50 | Medium lime
RGB
186/230/131
HEX BAE683 | Light lime
RGB
210/237/175
HEX D2EDAF | Extra light
lime
RGB
230/246/206
HEX E6F6CE |
| | | |
| News Center |
| | | |
Orange
RGB
226/174/29
HEX E2AE1D | Medium orange
RGB
227/191/92
HEX E3BF5C | Light orange
RGB
237/217/164
HEX EDD9A4 | Extra light orange
RGB
249/236/203
HEX F9ECCB |
| | | |
| Technology |
| | | |
Cherry
RGB
180/80/114
HEX B45072 | Medium cherry
RGB
190/110/137
HEX BE6E89 | Light cherry
RGB
222/181/195
HEX DEB5C3 | Extra light cherry
RGB
238/217/224
HEX EED9E0 |
| | | |
| Careers |
| | | |
Plum
RGB
125/79/188
HEX 7D4FBC | Medium plum
RGB
153/110/211
HEX 996ED3 | Light plum
RGB
188/170/214
HEX CBAAD6 | Extra light
plum
RGB
226/214/242
HEX E2D6F2 |
| | | |
| Investor Relations (section "Other") |
| | | |
Blueberry
RGB
113/125/168
HEX 717DA8 | Medium blueberry
RGB
152/160/192
HEX 98A0C0 | Light blueberry
RGB
179/185/206
HEX B3B9CE | Extra light blueberry
RGB
222/225/235
HEX DEE1EB |
ABB intranet site colors (see above forwhen to use)
:
| ABB Group site |
| | | |
Default blue
RGB
22/71/129
HEX 164781 | Medium intranet blue
RGB
102/136/174
HEX 6688AE | Light intranet blue
RGB
178/199/220
HEX B2C7DC | Extra light intranet blue
RGB
222/232/241
HEX DEE8F1 |
| | | |
| Division site | | | |
| | | |
Avocado
RGB
79/173/113
HEX 4FAD71 | | Light avocado
RGB
171/204/185
HEX ABCCB9 | |
| | | |
| Country site | | | |
| | | |
Cherry
RGB
180/80/114
HEX B45072 | | Light cherry
RGB
222/181/195
HEX DEB5C3 | |