Colors

All colors on this page have been tested for web accessibility color contrast requirements with black and white. AA indicates that the color passes for large text in that combination. aa indicates the color passes for regular text in that combination. To check contrast with combinations other than black and white, use webaim.org.

AA - Large text is the equivalent of 14px bold or greater or 18px regular or greater
aa - Regular text is less than 14px bold or less than 18px regular

Grayscale

AAaa
$white
#ffffff
rgb(255, 255, 255)
AAaa
$off-white
#f8f8f8
rgb(248, 248, 248)
AAaa
$transparent-white
N/A
rgba(255, 255, 255, 0.8)
AAaa
$calcite-gray-lightest
#efefef
rgb(239, 239, 239)
AAaa
$calcite-gray-lighter
#cccccc
rgb(204, 204, 204)
AAaa
$calcite-gray-light
#a9a9a9
rgb(169, 169, 169)
AAaa
$calcite-gray-core
#959595
rgb(149, 149, 149)
AAaa
AA
$calcite-gray-dark
#828282
rgb(130, 130, 130)
AA
AAaa
$calcite-gray-darker
#6e6e6e
rgb(110, 110, 110)

AAaa
$calcite-gray-darkest
#595959
rgb(89, 89, 89)

AAaa
$off-black
#4c4c4c
rgb(76, 76, 76)

AAaa
$black
#323232
rgb(50, 50, 50)

AAaa
$transparent-black
N/A
rgba(0, 0, 0, 0.75)

AAaa
$true-black
#000000
rgb(0, 0, 0)

Bright

AAaa
$calcite-blue-lightest
#D2E9F9
rgb(210, 233, 249)
AA
$calcite-blue-lighter
#BCDAED
rgb(188, 218, 237)
AAaa
$calcite-blue-light
#56A5D8
rgb(86, 165, 216)
AAaa
AAaa
$calcite-blue-core
#0079c1
rgb(0, 121, 193)
AA
AAaa
$calcite-blue-dark
#005E95
rgb(0, 94, 149)
AAaa
$calcite-green-light
#9BC19C
rgb(155, 193, 156)
AAaa
AA
$calcite-green-core
#5A9359
rgb(90, 147, 89)
AA
AAaa
$calcite-green-dark
#338033
rgb(51, 128, 51)
AA
$calcite-orange-light
#E8912E
rgb(232, 145, 46)
AAaa
AA
$calcite-orange-core
#D17E21
rgb(209, 126, 33)
AAaa
AAaa
$calcite-orange-dark
#AD6511
rgb(173, 101, 17)
AAaa
$calcite-red-light
#E4A793
rgb(228, 167, 147)
AAaa
AA
$calcite-red-core
#DE2900
rgb(222, 41, 0)
AA
AAaa
$calcite-red-dark
#AB3C16
rgb(171, 60, 22)
AAaa
$calcite-yellow-light
#EFE397
rgb(239, 227, 151)
AAaa
$calcite-yellow-core
#E4D154
rgb(228, 209, 84)
AAaa
$calcite-yellow-dark
#D9BF2B
rgb(217, 191, 43)
AAaa
$calcite-purple-light
#C4BCDC
rgb(196, 188, 220)
AAaa
AA
$calcite-purple-core
#9081BC
rgb(144, 129, 188)
AA
AAaa
$calcite-purple-dark
#7461A8
rgb(116, 97, 168)
AAaa
$calcite-brown-light
#D2B38F
rgb(210, 179, 143)
AAaa
AA
$calcite-brown-core
#A57946
rgb(165, 121, 70)
AA
AAaa
$calcite-brown-dark
#8C5E2A
rgb(140, 94, 42)

Calcite Accents

AA
AAaa
$calcite-blue-accent
#005e95
rgb(0, 94, 149)

AAaa
$calcite-green-accent
#2b622b
rgb(43, 98, 43)

ESRI Bright

AAaa
AAaa
$esri-blue-core
#0079c1
rgb(0, 121, 193)
AAaa
$esri-green-core
#35ac46
rgb(53, 172, 70)
AAaa
AAaa
$esri-orange-core
#da4d1e
rgb(218, 77, 30)
AA
AAaa
$esri-purple-core
#6c1a78
rgb(108, 26, 120)