Primary
Our primary pallet builds the bulk of our creative and should represent the strongest hues across any piece.
Colors
Our color pallet is rooted in our history and the foundation of our appearance. It can be used to strike a bold, confident presence or convey a clear expertise.
Our color pallet has been organized to support a wide variety of visual scenarios and mediums while striking clear consistency. Tints, transparencies or opaque values of the pallet should be avoided. Instead stick to specified shades.
Shades
For flexibility the 3 main color pallets are available in different shade values. Do not tint or add transparency and use the shades as-is.
Black & White
Black
Black 100
HEX#000000
CMYK60 50 40 100
White
White 100
HEX#FFFFFF
CMYK0 0 0 0
Neutral Shades
Neutral 1200
HEX#0C121D
CMYK100 79 44 93
Neutral 1100
HEX#141B27
CMYK88 76 30 82
Neutral 1000
HEX#172234
CMYK95 72 15 67
Neutral 900
HEX#24324B
CMYK95 74 7 44
Neutral 800
HEX#344565
CMYK78 58 6 32
Neutral 700
HEX#475B81
CMYK60 40 5 20
Neutral 600
HEX#607497
CMYK43 25 3 8
Neutral 500
HEX#A9B2C4
CMYK34 17 2 7
Neutral 400
HEX#C7CCD5
CMYK24 12 2 6
Neutral 300
HEX#DEE0E4
CMYK14 7 3 5
Neutral 200
HEX#EBECEE
CMYK4 2 3 4
Neutral 100
HEX#F8F9F9
CMYK2 1 2 2
Blue Shades
P
Midnight
Blue 1200
HEX#050F22
CMYK100 80 0 90
Blue 1100
HEX#091B3B
CMYK100 79 12 70
P
Navy
Blue 1000
HEX#0D2654
CMYK100 79 12 59
Blue 900
HEX#123D8B
CMYK100 75 2 18
Blue 800
HEX#1854C3
CMYK100 75 0 0
P
Blue
Blue 700
HEX#1D6BFC
CMYK90 48 0 0
Blue 600
HEX#357BFC
CMYK88 40 0 0
Blue 500
HEX#5690FD
CMYK87 30 0 0
Blue 400
HEX#77A6FD
CMYK85 21 0 0
Blue 300
HEX#A5C4FE
CMYK60 6 0 0
Blue 200
HEX#C6DAFE
CMYK34 3 0 0
Blue 100
HEX#E8F0FF
CMYK7 1 0 0
Accents
To accent our primary pallet we also have a set of electric pallets for communicating movement and drawing attention to specific areas. Accent colors should never be used as large swashes of color and should constitute less 5% of the layout.
Technology Teal
Teal 1200
HEX#001D1E
CMYK100 41 35 87
Teal 1100
HEX#013E42
CMYK100 21 28 76
Teal 1000
HEX#016065
CMYK100 16 24 60
Teal 900
HEX#018288
CMYK100 12 21 44
Teal 800
HEX#02A3AC
CMYK100 10 29 20
Teal 700
HEX#02C5CF
CMYK98 0 28 4
P
Teal
Teal 600
HEX#02E9F5
CMYK74 0 13 0
Teal 500
HEX#28F2FD
CMYK62 0 8 0
Teal 400
HEX#58F5FD
CMYK48 0 9 0
Teal 300
HEX#88F8FE
CMYK36 0 9 0
Teal 200
HEX#B8FBFE
CMYK23 0 1 0
Teal 100
HEX#E8FEFF
CMYK10 2 0 0
Safety Green
Green 1200
HEX#002318
CMYK93 33 68 85
Green 1100
HEX#004832
CMYK94 28 74 73
Green 1000
HEX#006C4C
CMYK89 19 72 60
Green 900
HEX#009165
CMYK90 14 62 43
Green 800
HEX#00B67F
CMYK100 5 65 26
Green 700
HEX#00DA99
CMYK99 0 69 0
P
Green
Green 600
HEX#00FFB2
CMYK66 0 48 0
Green 500
HEX#2DFFC0
CMYK55 0 38 0
Green 400
HEX#59FFCD
CMYK43 0 28 0
Green 300
HEX#86FFDB
CMYK33 0 18 0
Green 200
HEX#B3FFE8
CMYK20 0 14 0
Green 100
HEX#DFFFF5
CMYK17 0 12 0
Danger Red
Red 1200
HEX#290009
CMYK42 69 37 85
Red 1100
HEX#530013
CMYK30 85 59 70
Red 1000
HEX#7E001D
CMYK9 100 64 48
Red 900
HEX#A90027
CMYK7 100 68 32
Red 800
HEX#D40031
CMYK3 100 70 12
P
Red
Red 700
HEX#FF003D
CMYK0 100 72 0
Red 600
HEX#FF254A
CMYK0 94 64 0
Red 500
HEX#FF495E
CMYK0 76 54 0
Red 400
HEX#FF6E75
CMYK0 54 38 0
Red 300
HEX#FF9392
CMYK0 42 18 0
Red 200
HEX#FFBAB7
CMYK0 23 6 0
Red 100
HEX#FFDFDB
CMYK0 14 5 1
Warning Orange
Orange 1200
HEX#2B0C00
CMYK32 72 99 81
Orange 1100
HEX#551A00
CMYK15 67 100 65
Orange 1000
HEX#802B00
CMYK10 72 100 46
Orange 900
HEX#AA3E00
CMYK6 71 100 32
Orange 800
HEX#D55300
CMYK2 77 100 9
P
Orange
Orange 700
HEX#FF6B00
CMYK0 70 100 0
Orange 600
HEX#FF8025
CMYK0 59 80 0
Orange 500
HEX#FF954A
CMYK0 46 70 0
Orange 400
HEX#FFAB6F
CMYK0 33 57 0
Orange 300
HEX#FFC094
CMYK0 27 40 0
Orange 200
HEX#FFD6B9
CMYK0 16 32 0
Orange 100
HEX#FFEBDE
CMYK0 8 16 0
Caution Yellow
Yellow 1200
HEX#251E00
CMYK39 43 80 91
Yellow 1100
HEX#493C00
CMYK23 38 89 70
Yellow 1000
HEX#6D5A00
CMYK19 37 100 59
Yellow 900
HEX#927800
CMYK10 23 100 43
Yellow 800
HEX#B69700
CMYK8 21 100 28
Yellow 700
HEX#DBB600
CMYK2 22 100 8
P
Yellow
Yellow 600
HEX#FFD600
CMYK0 11 97 2
Yellow 500
HEX#FFDC2B
CMYK0 8 86 0
Yellow 400
HEX#FFE355
CMYK0 7 75 0
Yellow 300
HEX#FFEA80
CMYK0 4 62 0
Yellow 200
HEX#FFF1AA
CMYK0 3 43 0
Yellow 100
HEX#FFF8D5
CMYK0 4 27 0
Education Purple
Purple 1200
HEX#170618
CMYK100 100 10 79
Purple 1100
HEX#290B2C
CMYK91 100 8 59
P
Academy
Purple 1000
HEX#3E1142
CMYK85 100 6 38
Purple 900
HEX#5E1A64
CMYK75 100 8 26
Purple 800
HEX#7F2387
CMYK67 95 4 16
P
Purple
Purple 700
HEX#9F2CAA
CMYK58 90 0 0
Purple 600
HEX#BF36CB
CMYK51 79 0 0
Purple 500
HEX#CA59D4
CMYK36 60 0 0
Purple 400
HEX#D57CDD
CMYK27 52 0 0
Purple 300
HEX#E09FE6
CMYK26 37 0 0
Purple 200
HEX#ECC2EF
CMYK17 20 0 1
Purple 100
HEX#F7E5F8
CMYK3 6 0 2
Usage & Context
The careful selection of color and its context is pivotal in shaping the creative narrative, evoking emotions, and ensuring visual harmony across design elements. Use type color to create a comfortable reading experience and use color evoke action. Never use an action color as a headline. Reserve our Blue for action and links and avoid using for static type. Be sure to review the accessibility guidelines for proper type contrast requirements.
Text
Graphics
Gradients
Gradients add a sense depth and help to communicate layering within the composition. They can also be used to color grade and shade areas for typography. Use graduated color as a way to draw the viewer's eye in a direction through the content.
When building gradients try to keep the effect subtle and use a pallet in a skip-step fashion by skipping a color step in a shade group for definition. Mixing color groups can be a way to bring dynamic color to a piece. Avoid using accent heavy gradients as large swashes of color on a piece.
Color Blocking
Text
Electric
To create our electric effect, use the guidelines below to ensure a consistent look across different experiences.
Use the shades of a color group and build your icon group as shown below. Similar techniques might be used for other illustration shapes, like lines or borders. Glow and spot light size and opacity will need to scale with graphic or text to make the effect subtle and clean.
For type, the same color combinations can be used but pay close attention to accessibility. Avoid using the technique on large, bold font or tiny type. Adjust optional spotlights to form fit the text block.
Specifications shown are for Figma. Adjustments will need to be made to visually match in our applications.
Formula
Variations
Type
Accessibility
Primary
To ensure as many of our customers as possible have a consistent experience we always want to remain as accessible as possible. One way we can do that is by adhering to WCAG 2.1 guidelines for contrast ratios for text.
Below you’ll see the full testing of our colors used with our font at 16 pt for acceptable text blocking colors. If marked as “Caution” that means it meets only AA standards and should only be used for large or a bolded weight text.
Action
Our OPSWAT Blue color is our main CTA color shade and special attention should be used when placing over our primary color blocks.
Accents
When using our status and accents be extra careful for accessibility. If a font color and blocking are shown below they are not recommended.
Academy
When using our Academy Purple be extra careful for accessibility. If a font color and blocking are shown below they are not recommended.
