Home Corporate UI About Components HTML copy paste JS Frameworks FAQ Contact Us Mobile Apps Overview Documentation Example Contact us Style Guide Home Logotype Icons Colours Typography Comon editors

Scania Colours

For digital media, we've devided the Scania colours in brand, primary, secondary and tertiary colours. If you're using print, please find the appropriate colour values in the Scania Identity Manual.

Restrictions: The colours may only be used for their intended purposes. Any restrictions must be followed. The colours should not be altered.

Variables

For web development purposes you should use our LESS variables file to access colors: https://static.scania.com/build/global/3.5.3/less/corporate-ui/variables.less
List all CSS colour classes

Brand Colours

The Scania brand colours are derived from the Scania symbol and wordmark and effectively establish, represent and communicate the brand.

Scania Blue and Scania White should mainly be used for text and backgrounds.

Scania Red is represented by the griffin in the Scania symbol. It must be used with great care and only as a highlight or accent colour, never to steal attention from the griffin. Red can also be associated with warning signs and negative results (e.g. red numbers in a table).

Scania Blue
rgb(4, 30, 66)
HEX #041E42
LESS @color-brand-01
CSS class="color-brand-01"
Scania White
rgb(250, 250, 250)
HEX #FAFAFA
LESS @color-brand-02
CSS class="color-brand-02"
Scania Red
rgb(214, 0, 28)
HEX #D6001C
LESS @color-brand-03
CSS class="color-brand-03"

Primary palette

The Scania brand colours are supported by primary supporting colours and a secondary colour palette. All Scania colours must be represented as outlined by the CSS classes definied in the Corporate UI stylesheet. The primary supporting colours in grey offset the brand colours and form the primary background of the colour scheme.

Scania Light Grey
rgb(200, 201, 199)
HEX #C8C9C7
LESS @color-primary-01
CSS class="color-primary-01"
Scania Medium Grey
rgb(151, 153, 155)
HEX #97999B
LESS @color-primary-02
CSS class="color-primary-02"
Scania Dark Grey
rgb(83, 86, 90)
HEX #53565A
LESS @color-primary-03
CSS class="color-primary-03"
Scania Black
rgb(45, 41, 38)
HEX #2D2926
LESS @color-primary-04
CSS class="color-primary-04"

Secondary palette

Scania’s secondary colour palette is designed to be used to vary or highlight content. Orange communicates news, innovation and power. The greens and beige are natural colours that reinforce Scania’s image as a grounded, reliable organization, and a leader in the shift towards a sustainable transport system.

Scania Orange
rgb(227, 82, 5)
HEX #E35205
LESS @color-secondary-01
CSS class="color-secondary-01"
Scania Beige
rgb(206, 184, 136)
HEX #CEB888
LESS @color-secondary-02
CSS class="color-secondary-02"
Scania Pale Green
rgb(148, 165, 150)
HEX #94A596
LESS @color-secondary-03
CSS class="color-secondary-03"
Scania Green
rgb(44, 82, 52)
HEX #2C5234
LESS @color-secondary-04
CSS class="color-secondary-04"

Tertiary palette

The tertiary palette broadens the fields of colour beyond the spectrum of the primary and secondary pallets. They should not be used to make our brand more vivid, rather than in places where you'll really need the extra colours, like for examle in complex charts. It is never advised to use a tint or tonal percentage of a colour.

Scania Tertiary 01
rgb(68, 134, 145)
HEX #448691
LESS @color-tertiary-01
CSS class="color-tertiary-01"
Scania Tertiary 02
rgb(94, 56, 133)
HEX #5e3885
LESS @color-tertiary-02
CSS class="color-tertiary-02"
Scania Tertiary 03
rgb(0, 93, 109)
HEX #005d6d
LESS @color-tertiary-03
CSS class="color-tertiary-03"
Scania Tertiary 04
rgb(225, 169, 62)
HEX #e1a93e
LESS @color-tertiary-04
CSS class="color-tertiary-04"
Scania Tertiary 05
rgb(137, 106, 115)
HEX #896a73
LESS @color-tertiary-05
CSS class="color-tertiary-05"
Scania Tertiary 06
rgb(93, 167, 169)
HEX #5da7a9
LESS @color-tertiary-06
CSS class="color-tertiary-06"
Scania Tertiary 07
rgb(96, 178, 105)
HEX #60b269
LESS @color-tertiary-07
CSS class="color-tertiary-07"

Font and Icon Colours

Font colours differs when it comes to headers and body copy as well as if they are placed on a white background, coloured background or on a photograph.

Main font color
(body copy on white background)
rgb(83, 86, 90)
HEX #53565A
LESS @main-font-color
Applies to: <body> <p> <li> and other relvant tags.
Headers and icons on white background
(header texts on white background)
rgb(4, 30, 66)
HEX #041E42
LESS @color-brand-01
Applies to: <h1> <h2> <h3> <h4> <h5>
Texts and icons on coloured backgrounds
rgb(250, 250, 250)
HEX #fafafa
LESS @inverted-font-color
Applies to: All text elements when on coloured backgrounds.

Interaction Colours

The main interaction colours are used only in digital media, often for buttons, alert messages and form elements. Input fields, for example, can get positive and negative feedback, whereas alert messages can have warning feedback. Buttons can guide the user in a very good way as long as the same colours are implemented across the organisation, sending the same message.

Buttons

         

Alerts

Use the alert-success class when informing the user of a succesfull event.
Use the alert-warning class when informing the user that something went wrong, although it is not crusial.
Use the alert-danger class when informing the user that something has gone really bad, or that the next step is irreversibel. Most commonly used when the user is about to delete content.
Use the alert-info class when highligting information that is extra relevant at the time beeing.

Gradients

When you need to illustrate information as a gradient, use the scale below. The colors should be used only to make gradients in charts. The colours are not allowed to be use elsewhere.

Gradient A
rgb(96, 226, 102)
HEX #60e266
LESS
@gradient-color-a
Gradient B
rgb(185, 238, 81);
HEX #b9ee51
LESS
@gradient-color-b
Gradient C
rgb(255, 236, 0)
HEX #ffec00
LESS
@gradient-color-c
Gradient D
rgb(237, 160, 83)
HEX #eda053
LESS
@gradient-color-d
Gradient E
rgb(225, 96, 96)
HEX #e16060
LESS
@gradient-color-e
Gradient A to E

Data Visualization Colours

Column Chart Example

For charts we're using a combination of all four palettes. The priority of the colours is shown in the sample chart below, starting with the secondary palette and then expands with the blue brand colour and the primary palette. If needed, we then add on colours from the tertiary palette.

Donut Chart Example

Depending on what kind of data visualization tool you're using and what kind of background you want to embed it in, you might need to combine colours from all Scania palettes.

Area Spline Chart Example

Depending on what kind of data visualization tool you're using and what kind of background you want to embed it in, you might need to combine colours from all Scania palettes.

Github Contact