Color

Introduction

Our color palette is an important tool to help visualize our brand expression. Color can also be used functionally to draw emphasis to certain aspects of a design, to assist with digital interactions, and to create hierarchy.

Primary colors

Blue serves as the primary color for our branded materials. It is the signature color for our logo and is the color by which all other accent, highlight and supplemental colors are selected.

Blue 100
HEX
#E1F0FF
rgb
225, 240, 255
CMYK
10, 0, 0, 0
Blue 200
HEX
#B9DCFF
rgb
185, 220, 255
CMYK
25, 0, 0, 0
Blue 300
HEX
#5AAFFF
rgb
90, 175, 255
CMYK
65, 10, 0, 0
Topcon Blue 400
HEX
#0A8CFA
rgb
10, 140, 250
CMYK
100, 40, 0, 0
Blue 500
HEX
#055AAF
rgb
5, 90, 175
CMYK
100, 40, 0, 30
Blue 600
HEX
#053764
rgb
5, 55, 100
CMYK
100, 30, 0, 65
Blue 700
HEX
#001423
rgb
0, 20, 35
CMYK
80, 30, 0, 85

Neutrals

Alongside our primary color, the unsung hero is our gray color palette. While it may not sound the most interesting, a wide selection of carefully selected gray swatches can be utilized to carefully craft a visual hierarchy to your layout or to assist with interactive elements in digital applications.

White
HEX
#FFFFFF
rgb
255, 255, 255
CMYK
0, 0, 0, 0
Gray 100
HEX
#FAFAFA
rgb
250, 250, 250
CMYK
     
Gray 200
HEX
#F1F1F1
rgb
241, 241, 241
CMYK
    
Gray 300
HEX
#EBEBEB
rgb
235, 235, 235
CMYK
    
Gray 400
HEX
#D7D7D7
rgb
215, 215, 215
CMYK
0, 0, 0, 15
Gray 500
HEX
#cccccc
rgb
204, 204, 204
CMYK
0, 0, 0, 20
Gray 600
HEX
#A0A0A0
rgb
160, 160, 160
CMYK
0, 0, 0, 40
Gray 700
HEX
#737373
rgb
115, 115, 115
CMYK
0, 0, 0, 65
Gray 800
HEX
#4B4B4B
rgb
75, 75, 75
CMYK
   
Gray 900
HEX
#2D2D2D
rgb
45, 45, 45
CMYK
0, 0, 0, 85
Gray 1000
HEX
#0F0F0F
rgb
15, 15, 15
CMYK
   
Black
HEX
#000000
rgb
0, 0, 0, 0
CMYK
0, 0, 0, 100
Rich black (print)
CMYK
50, 40, 40, 100

Accent colors

Our accent colors of yellow and green are primarily used as highlight colors to draw emphasis, indicate a status, or for any other needs where our primary or gray color palettes do not suffice.

Yellow

Our complimentary color of yellow is mainly used as a highlight color to draw emphasis within illustrations, webpages, software, and a wide variety of other touchpoints.

Yellow 100
HEX
#FFF0C6
rgb
255, 240, 198
CMYK
0, 0, 15, 0
Yellow 200
HEX
#FFDE7F
rgb
255, 222, 127
CMYK
0, 10, 55, 0
Yellow 300
HEX
#FFC81E
rgb
255, 200, 30
CMYK
0, 15, 100, 0
Yellow 400
HEX
#FFAF00
rgb
255, 175, 0
CMYK
0, 30, 100, 0
Yellow 500
HEX
#e79029
rgb
231, 144, 41

Green

Mainly for agriculture use but may be used in a limited capacity for user-interface design.

Green 100
HEX
#E6F5EB
rgb
230, 245, 235
CMYK
10, 0, 10, 0
Green 200
HEX
#B9E6CD
rgb
185, 230, 205
CMYK
30, 0, 30, 0
Green 300
HEX
#5AC878
rgb
90, 200, 120
CMYK
80, 5, 90, 0
Green 400
HEX
#0AAA5A
rgb
10, 170, 90
CMYK
90, 20, 100, 10
Green 500
HEX
#007337
rgb
0, 115, 55

Color guidelines

Please refer to the guidelines below to ensure that our color palette is used in a way that is consistent to prevent colors from competing, misdirecting, or overwhelming the end user.

Accent colors should only be used to highlight specific elements, components, icons, or overlays

It is important that accent colors not be overused as to confuse them with a primary color. These colors should be used to complement an existing layout, photograph, or icon without overpowering it.

Using the right color for the right content

In one given piece of content, it must be decided if an accent color is to be used at all. If so, only use the respective accent color.

Do not use accent colors on their own

Our accent colors should always be used in conjunction with our primary color palette. This means that you cannot use gray and yellow on their own without incorporating blue. Click here to view the Color proportions and usage section.

Always keep color contrast in mind when selecting colors to use

It is important to keep in mind how different colors work when used together. While our palette offers a wide range of options, they need to be used together correctly to meet accessibility guidelines. Click here to view the Accessibility section.

Color proportions and usage

Neutrals, 75%

For a clean, fresh, modern look, Topcon marketing pieces start with a foundation of a neutral gray or white. Refer to the Supplemental Colors page for approved neutral colors.

Primary colors, 35%

The main color for the Topcon brand is blue. When incorporating color into a design, the entire blue palette can be used to draw emphasis, create hierarchy, and build brand expression.

Accent colors, 5%

Green and yellow are used as a highlight for positioning- and agriculture-specific materials. While not required, they can be used sparingly to draw attention or to emphasize specific elements within a layout.

Neutrals, 30%

For a clean, fresh, modern look, Topcon marketing pieces start with a foundation of a neutral gray or white. Refer to the Supplemental Colors page for approved neutral colors.

Primary colors, 65%

The main color for the Topcon brand is blue. When incorporating color into a design, the entire blue palette can be used to draw emphasis, create hierarchy, and build brand expression.

Accent colors, 5%

Yellow is used as a highlight for positioning-specific materials. While not required, it can be used sparingly to draw attention or to emphasize specific elements within a layout.

Neutrals, 75%

For a clean, fresh, modern look, Topcon marketing pieces start with a foundation of a neutral gray or white. Refer to the Supplemental Colors page for approved neutral colors.

Primary colors, 15%

The main color for the Topcon brand is blue. When incorporating color into a design, the entire blue palette can be used to draw emphasis, create hierarchy, and build brand expression.

Accent colors, 10%

Green is used as a highlight for agriculture-specific materials. While not required, it can be used sparingly to draw attention or to emphasize specific elements within a layout.