Guidelines on logo usage, including variations, sizes, spacing, and placement.
The brand colors that represent Tritium, both the primary and accent colours.
Tritium brand colours
Primary colour palette – Tritium Blue’s
A vibrant set of blues is the center-point of the colour palette. When combined with green (Tritium’s secondary colour palette) it creates a relaxing and harmonious synergy, reflecting nature’s essence. Our brand colours tell a story about our product and how it works with its environment, nature and our planet.
RGB: 50, 189, 240
HEX: #31beef
CMYK: 79%, 21%, 0%, 6%
RGB: 22, 144, 208
HEX: #1690d0
CMYK: 89%, 31%, 0%, 18%
RGB: 16, 104, 140
HEX: #10688c
CMYK: 91%, 52%, 29%, 7%
RGB: 0, 77, 108
HEX: #004d6c
CMYK: 100%, 29%, 0%, 58%
RGB: 19, 52, 63
HEX: #13343f
CMYK: 90%, 66%, 55%, 52%
Secondary colours
The secondary colour palette is intended to give the brand more warmth, a refreshing contrast to the cool primary colour palette and the minimalist aesthetic. Shades of green should be used in imagery and photography.
RGB: 222, 215, 91
HEX: #ddd75b
CMYK: 0%, 3%, 59%, 13%
RGB: 157, 199, 95
HEX: #9ec75f
CMYK: 21%, 0%, 52%, 22%
RGB: 51, 157, 117
HEX: #339d75
CMYK: 74%, 8%, 62%, 8%
RGB: 0, 120, 90
HEX: #00795b
CMYK: 100%, 0%, 25%, 53%
RGB: 45, 84, 63
HEX: #2d543f
CMYK: 46%, 0%, 25%, 67%
Black and white
The use of black and white is also acceptable in some cases without the need of using Tritium’s Primary or Secondary colours. This is only applicable when using the Tritium logo. Alternatively , Black and white can be used in any circumstance in combination with Tritiums primary colour palette.
Shades of Grey
It is crucial to use neutral shades of grey that are not warm or cool. this prevents a clash when placed against the cool tones of blue or warmer shades of green.
RGB: 237, 237, 237
HEX: #eeeeee
CMYK: 0%, 0%, 0%, 7%
RGB: 204, 204, 204
HEX: #cccccc
CMYK: 0%, 0%, 0%, 20%
RGB: 74, 79, 84
HEX: #494e53
CMYK: 12%, 6%, 0%, 67%
RGB: 51, 51, 51
HEX: #333333
CMYK: 0%, 0%, 0%, 80%
RGB: 33, 33, 33
HEX: #222222
CMYK: 0%, 0%, 0%, 87%
Extra Graph Colours
Graphs, diagrams, and data charts can require extra colours. First and foremost, Tritium’s primary and secondary colours are ideally used to display this information. In the instance where you need more colours, using the aqua colour palette can blend nicely with Tritium’s Primary and Secondary colour palette.
RGB: 90, 217, 219
HEX: #59d9db
CMYK: 59%, 1%, 0%, 14%
RGB: 37, 179, 171
HEX: #25b2ab
CMYK: 79%, 0%, 4%, 30%
RGB: 32, 149, 150
HEX: #1f9496
CMYK: 79%, 1%, 0%, 41%
RGB: 22, 115, 120
HEX: #157277
CMYK: 82%, 4%, 0%, 53%
RGB: 0, 82, 84
HEX: #005254
CMYK: 100%, 2%, 0%, 67
Alerts, Warnings, and Information notification colours
Red is a more aggressive warning and alert. Highlights to the user the error of their action.
Orange is a less aggressive attention. Highlight to the user the condition of their action.
Green is used as an additional note. Highlights to the user an additional note, info or success of their action.
Warning Colour
RGB: 177,42,82
HEX: #b12a52
CMYK: 0%,76%,54%,31%
Attention Colour
RGB: 237,138,34
HEX: #ed8a22
CMYK: 0%,42%,86%,7%
Additional Note colour
RGB: 51,157,117
HEX: #339d75
CMYK: 68%,0%,25%,38%
Contrast Ratio Guidelines
- 4.5:1: This is the minimum ratio for normal-sized text and images of text to be legible.
- 3:1: This is the minimum ratio for large text, which is defined as 18pt or 14pt bold.
Why These Ratios Matter
- Low Vision: The 4.5:1 ratio is designed to compensate for moderately low visual acuity, allowing users to distinguish content even with vision loss.
- Color Blindness: These contrast levels help users with color vision deficiencies, who may perceive colors differently and struggle with low-contrast designs.
- Aging Eyes: As people age, contrast sensitivity decreases, making higher contrast ratios crucial for maintaining readability.
- Environmental Factors: Good contrast also improves readability on small screens in bright sunlight, where colors can appear washed out.
Where These Standards Apply
- Digital Content: This includes websites, digital documents (like PDFs), and even text within images such as infographics.
- User Interface Elements: Buttons, icons, and other graphics also need to meet these contrast requirements to ensure they are distinguishable and usable.
