Color Palette

The Modus palette is based on the Trimble brand colors.

The following colors can be used for UI elements. When using colors, make sure the color contrast is high enough to meet accessibility standards.

Color Palette

Primary Palette

Trimble apps use a primary palette consisting of blue and yellow, together with various shades of “steel” or blueish gray. These colors have been the basis of Trimble’s corporate identity and come in four main colors: blue, yellow, light gray, and dark gray.

Blue and neutral progression colors are used as primary UI colors in Trimble products. Additional colors (such as the Trimble yellow, red, and green) are used sparingly and purposefully, usually as accent colors only.

Trimble Blue Dark
#004F83
Trimble Blue
#0063A3
Trimble Yellow
#FBAD26
Trimble Gray
#252A2E

Blue Progression

Trimble default color theme are based on blues and grays. Blue progressions are often used as the primary application color, frequently featured as primary button color and application nav color.

Blue Dark
#0E416C
Blue
#0063A3
Blue Light
#217CBB
Blue Pale
#DCEDF9

Neutral Progression

Neutral progressions are used as background and text colors, borders, and button colors. Trimble Gray is the primary text color. Gray 6 is used as a secondary text color and default icon color. Gray Light is a background color for panels.

Trimble Gray
#252a2e
Gray 10
#171c1e
Gray 9
#353a40
Gray 8
#464b52
Gray 7
#585c65
Gray 6
#6a6e79
Gray 5
#7d808d
Gray 4
#90939f
Gray 3
#a3a6b1
Gray 2
#b7b9c3
Gray 1
#cbcdd6
Gray 0
#e0e1e9
Gray Light
#f1f1f6
Screen & panels background 
White
#ffffff

Yellow Progression

Yellow progressions are used as a secondary color in applications. They can be used for a high-visibility primary button. Use sparingly as highlights to draw attention. Yellow Dark is used as the primary warning color. Yellow should never be used as text color. Yellow Pale can be used as a background color for warning containers.

Yellow Dark
#e49325
Warning Color 
Yellow
#fbad26
Yellow Light
#fec157
Yellow Pale
#fff5e4

Red Progression

Red progression should be used sparingly as a warning color to indicate critical actions, notification of a system failure, error, or action failure.

Red Dark
#ab1f26
Red
#da212c
Danger/ Error Color 
Red Light
#e86363
Red Pale
#fbd4d7

Green Progression

Green progression should be used sparingly as a color indicating success, positive notification, or as a highlight only.

Green Dark
#006638
Success Color 
Green
#1e8a44
Green Light
#4ea646
Green Pale
#e0eccf

Text Color Use Examples

Text Color

Extended Trimble Color Palette

What's Changed
DateVersionNotesContributors
10/19/20211.2.0New brand colors published.T. Bernard, E. Bohn, E. Gunther
11/23/20201.0.0Neutral progression reduced; yellow, red, and green progressions added.M. Heighway, E. Bohn, L. Cook, A. Eidam