Color

Maintaining color consistency across applications is an essential part of what makes an application an Astro Application. In Astro four key colors (primary, secondary, tertiary and quaternary) along with their respective light and dark variants provide a formalized approach to color. Additional color palettes with light and dark variants are provided for status colors and non-status colors.

Color palettes are provided here with their respective RGB and CSS values as well as their CSS Custom Property names, which can be used in conjunction with the Astro CSS library. Example text overlays use the optimal colors for WCAG contrast compliance.  

Primary

The primary color palette is typically, though not universally, used for interface elements in their default state. When creating an element or pattern not defined in the guidelines, start with the primary color palette.

RGB
rgb(0, 90, 143)
HEX
#005a8f
CSS
--colorPrimary
  • RGB
    rgb(203, 222, 233)
    HEX
    #cbdee9
    CSS
    --colorPrimaryLighten4
  • RGB
    rgb(152, 189, 211)
    HEX
    #98bdd3
    CSS
    --colorPrimaryLighten3
  • RGB
    rgb(100, 156, 189)
    HEX
    #649cbd
    CSS
    --colorPrimaryLighten2
  • RGB
    rgb(47, 122, 167)
    HEX
    #2f7aa7
    CSS
    --colorPrimaryLighten1
  • RGB
    rgb(0, 90, 143)
    HEX
    #005a8f
    CSS
    --colorPrimary
  • RGB
    rgb(0, 72, 114)
    HEX
    #004872
    CSS
    --colorPrimaryDarken1
  • RGB
    rgb(0, 54, 85)
    HEX
    #003655
    CSS
    --colorPrimaryDarken2
  • RGB
    rgb(0, 36, 57)
    HEX
    #002439
    CSS
    --colorPrimaryDarken3
  • RGB
    rgb(0, 18, 28)
    HEX
    #00121c
    CSS
    --colorPrimaryDarken4

Secondary

The secondary color palette can be utilized for accents as well as active and hover states of interface elements.

RGB
rgb(77, 172, 255)
HEX
#4dacff
CSS
--colorSecondary
  • RGB
    rgb(218, 238, 255)
    HEX
    #daeeff
    CSS
    --colorSecondaryLighten4
  • RGB
    rgb(183, 220, 255)
    HEX
    #b7dcff
    CSS
    --colorSecondaryLighten3
  • RGB
    rgb(146, 203, 255)
    HEX
    #92cbff
    CSS
    --colorSecondaryLighten2
  • RGB
    rgb(110, 186, 255)
    HEX
    #6ebaff
    CSS
    --colorSecondaryLighten1
  • RGB
    rgb(77, 172, 255)
    HEX
    #4dacff
    CSS
    --colorSecondary
  • RGB
    rgb(58, 135, 207)
    HEX
    #3a87cf
    CSS
    --colorSecondaryDarken1
  • RGB
    rgb(43, 101, 155)
    HEX
    #2b659b
    CSS
    --colorSecondaryDarken2
  • RGB
    rgb(29, 67, 103)
    HEX
    #1d4367
    CSS
    --colorSecondaryDarken3
  • RGB
    rgb(14, 34, 52)
    HEX
    #0e2234
    CSS
    --colorSecondaryDarken4

Tertiary

The tertiary color palette is typically used in dark-themed Astro applications for container elements (e.g., Global Status Bar) and overall application background. Take care when utilizing the tertiary palette for user interface elements in a dark-themed application, as this palette runs the risk of blending in with dark-themed background elements.

RGB
rgb(39, 64, 89)
HEX
#274059
CSS
--colorTertiary
  • RGB
    rgb(212, 216, 221)
    HEX
    #d4d8dd
    CSS
    --colorTertiaryLighten4
  • RGB
    rgb(169, 178, 188)
    HEX
    #a9b2bc
    CSS
    --colorTertiaryLighten3
  • RGB
    rgb(126, 140, 155)
    HEX
    #7e8c9b
    CSS
    --colorTertiaryLighten2
  • RGB
    rgb(82, 102, 122)
    HEX
    #52667a
    CSS
    --colorTertiaryLighten1
  • RGB
    rgb(39, 64, 89)
    HEX
    #274059
    CSS
    --colorTertiary
  • RGB
    rgb(31, 51, 71)
    HEX
    #1f3347
    CSS
    --colorTertiaryDarken1
  • RGB
    rgb(23, 38, 53)
    HEX
    #172635
    CSS
    --colorTertiaryDarken2
  • RGB
    rgb(16, 25, 35)
    HEX
    #101923
    CSS
    --colorTertiaryDarken3
  • RGB
    rgb(8, 12, 17)
    HEX
    #080c11
    CSS
    --colorTertiaryDarken4

Quaternary

The quaternary color palette is typically used in light-themed Astro applications for container elements and overall application background. Take care when utilizing the quaternary palette for user interface elements in a light-themed application, as this palette runs the risk of blending in with light-themed background elements.

RGB
rgb(206, 214, 228)
HEX
#ced6e4
CSS
--colorQuaternary
  • RGB
    rgb(245, 246, 249)
    HEX
    #f5f6f9
    CSS
    --colorQuaternaryLighten4
  • RGB
    rgb(234, 238, 244)
    HEX
    #eaeef4
    CSS
    --colorQuaternaryLighten3
  • RGB
    rgb(225, 230, 239)
    HEX
    #e1e6ef
    CSS
    --colorQuaternaryLighten2
  • RGB
    rgb(215, 222, 233)
    HEX
    #d7dee9
    CSS
    --colorQuaternaryLighten1
  • RGB
    rgb(206, 214, 228)
    HEX
    #ced6e4
    CSS
    --colorQuaternary
  • RGB
    rgb(164, 171, 182)
    HEX
    #a4abb6
    CSS
    --colorQuaternaryDarken1
  • RGB
    rgb(123, 128, 137)
    HEX
    #7b8089
    CSS
    --colorQuaternaryDarken2
  • RGB
    rgb(81, 85, 91)
    HEX
    #51555b
    CSS
    --colorQuaternaryDarken3
  • RGB
    rgb(41, 42, 45)
    HEX
    #292a2d
    CSS
    --colorQuaternaryDarken4

Status Colors

Status colors have been selected to adhere to MIL Standard 2525D, MIL Standard 1472G and WCAG 2.0. Deviation from the primary color for each status is non-compliant. See the status page for additional information about status color usage.

Non-Status Colors

Non-Status colors are designated for user interface elements that require distinct colors, but colors that do not conflict with status.

Tag 1

RGB
rgb(0, 199, 203)
HEX
#00c7cb
CSS
--colorTag1
  • RGB
    rgb(208, 244, 244)
    HEX
    #d0f4f4
    CSS
    --colorTag1Lighten4
  • RGB
    rgb(161, 233, 235)
    HEX
    #a1e9eb
    CSS
    --colorTag1Lighten3
  • RGB
    rgb(112, 221, 224)
    HEX
    #70dde0
    CSS
    --colorTag1Lighten2
  • RGB
    rgb(62, 210, 214)
    HEX
    #3ed2d6
    CSS
    --colorTag1Lighten1
  • RGB
    rgb(0, 199, 203)
    HEX
    #00c7cb
    CSS
    --colorTag1
  • RGB
    rgb(0, 159, 163)
    HEX
    #009fa3
    CSS
    --colorTag1Darken1
  • RGB
    rgb(0, 119, 122)
    HEX
    #00777a
    CSS
    --colorTag1Darken2
  • RGB
    rgb(3, 80, 81)
    HEX
    #035051
    CSS
    --colorTag1Darken3
  • RGB
    rgb(3, 40, 40)
    HEX
    #032828
    CSS
    --colorTag1Darken4

Tag 2

RGB
rgb(120, 109, 211)
HEX
#786dd3
CSS
--colorTag2
  • RGB
    rgb(228, 226, 247)
    HEX
    #e4e2f7
    CSS
    --colorTag2Lighten4
  • RGB
    rgb(201, 197, 237)
    HEX
    #c9c5ed
    CSS
    --colorTag2Lighten3
  • RGB
    rgb(174, 168, 229)
    HEX
    #aea8e5
    CSS
    --colorTag2Lighten2
  • RGB
    rgb(147, 139, 219)
    HEX
    #938bdb
    CSS
    --colorTag2Lighten1
  • RGB
    rgb(120, 109, 211)
    HEX
    #786dd3
    CSS
    --colorTag2
  • RGB
    rgb(96, 88, 168)
    HEX
    #6058a8
    CSS
    --colorTag2Darken1
  • RGB
    rgb(72, 65, 127)
    HEX
    #48417f
    CSS
    --colorTag2Darken2
  • RGB
    rgb(48, 44, 84)
    HEX
    #302c54
    CSS
    --colorTag2Darken3
  • RGB
    rgb(24, 21, 43)
    HEX
    #18152b
    CSS
    --colorTag2Darken4

Tag 3

RGB
rgb(162, 0, 193)
HEX
#a200c1
CSS
--colorTag3
  • RGB
    rgb(237, 206, 243)
    HEX
    #edcef3
    CSS
    --colorTag3Lighten4
  • RGB
    rgb(218, 156, 231)
    HEX
    #da9ce7
    CSS
    --colorTag3Lighten3
  • RGB
    rgb(199, 106, 218)
    HEX
    #c76ada
    CSS
    --colorTag3Lighten2
  • RGB
    rgb(181, 52, 206)
    HEX
    #b534ce
    CSS
    --colorTag3Lighten1
  • RGB
    rgb(162, 0, 193)
    HEX
    #a200c1
    CSS
    --colorTag3
  • RGB
    rgb(129, 0, 154)
    HEX
    #81009a
    CSS
    --colorTag3Darken1
  • RGB
    rgb(97, 0, 116)
    HEX
    #610074
    CSS
    --colorTag3Darken2
  • RGB
    rgb(65, 0, 77)
    HEX
    #41004d
    CSS
    --colorTag3Darken3
  • RGB
    rgb(32, 2, 39)
    HEX
    #200227
    CSS
    --colorTag3Darken4

Tag 4

RGB
rgb(218, 83, 9)
HEX
#da5309
CSS
--colorTag4
  • RGB
    rgb(248, 221, 209)
    HEX
    #f8ddd1
    CSS
    --colorTag4Lighten4
  • RGB
    rgb(240, 186, 163)
    HEX
    #f0baa3
    CSS
    --colorTag4Lighten3
  • RGB
    rgb(234, 152, 117)
    HEX
    #ea9875
    CSS
    --colorTag4Lighten2
  • RGB
    rgb(226, 117, 69)
    HEX
    #e27545
    CSS
    --colorTag4Lighten1
  • RGB
    rgb(218, 83, 9)
    HEX
    #da5309
    CSS
    --colorTag4
  • RGB
    rgb(175, 66, 10)
    HEX
    #af420a
    CSS
    --colorTag4Darken1
  • RGB
    rgb(131, 50, 9)
    HEX
    #833209
    CSS
    --colorTag4Darken2
  • RGB
    rgb(87, 33, 8)
    HEX
    #572108
    CSS
    --colorTag4Darken3
  • RGB
    rgb(43, 17, 5)
    HEX
    #2b1105
    CSS
    --colorTag4Darken4
×