Color

Our interface color palette should be used to establish visual consistency across products and provide emphasis between different components.

Palette

Blues, grays, navy, and black can be used throughout our interfaces as component or background colors. See more specific details on usage in the tints section below.

Primary Blue	White	Black
color-blue-700	color-white	color-black
#1D4ED8	#FFFFFF	#000000
rgb(29, 78, 216)	rbg(255, 255, 255)	rgb(0, 0, 0)

Dark Navy	Blue Gray	Blue Gray 50
color-dark-navy	color-blue-gray-500	color-blue-gray-50
#1E2135	#607D9C	#F4F7FB
rbg(30, 33, 53)	rbg(96, 125, 156)	rbg(244, 247, 251)

Tints

Tints supplement the primary and secondary color palettes to aid in the creation of visual coherence when combining complicated map drawings and data visualizations graphics.

Primary Blue

Primary blue should be used to provide strong visual emphasis to key interactive components like buttons, links, and icons.

Note: To achieve text contrast, blue-700 should be used for text on a light background, and white text on bg-blue-700.

Title	Class	Properties
	blue-50	#EFF6FF	rgb(239, 246, 255)
	blue-100	#DBEAFE	rgb(219, 234, 254)
	blue-200	#BFDBFE	rgb(191, 219, 254)
	blue-300	#93C5FD	rgb(147, 197, 253)
	blue-400	#60A5FA	rgb(96, 165, 250)
	blue-500	#3B82F6	rgb(59, 130, 246)
	blue-600	#2563EB	rgb(37, 99, 235)
	blue-700	#1D4ED8	rgb(29, 78, 216)
	blue-800	#1E40AF	rgb(30, 64, 175)
	blue-900	#1E3A8A	rgb(30, 58, 138)

Blue Gray

Blue Gray should primarily be used for background colors of interface components and for text color to differentiate text hierarchy (in addition to text size).

Title	Class	Properties
	blue-gray-50	#F4F7FB	rbg(244, 247, 251)
	blue-gray-100	#E6ECF3	rbg(230, 236, 243)
	blue-gray-200	#D9E2ED	rbg(217, 226, 237)
	blue-gray-300	#C6D2E2	rbg(198, 210, 226)
	blue-gray-400	#92A6BE	rbg(146, 166, 190)
	blue-gray-500	#607D9C	rbg(96, 125, 156)
	blue-gray-600	#48627F	rbg(72, 98, 127)
	blue-gray-700	#3B526E	rbg(59, 82, 110)
	blue-gray-800	#273D56	rbg(39, 61, 86)
	blue-gray-900	#182635	rbg(24, 38, 53)

Accessibility

Our goal is to conform to the W3C Web Content Accessibility 2.0 Level AA Guidelines for color contrast. WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). View examples of accessible text and background color combinations.

To learn more, refer to the http://www.section508.gov.

To test contrast ratios for color combinations, you can use webaim.org/resources/contrastchecker (among many other open source tools available online)