Skip to content

Design token reference

Semantic tokens

Use dark colors for code blocksCopy
1
@import "@esri/calcite-design-tokens/dist/css/index.css";

Colors

Name
Light value
Dark value
Platform tokenscsscssscsses6
Background
default
#f7f7f7
#363636
var(--calcite-color-background)
none
rgba(255, 255, 255, 0)
rgba(255, 255, 255, 0)
var(--calcite-color-background-none)
Foreground
1
#ffffff
#2b2b2b
var(--calcite-color-foreground-1)
2
#f2f2f2
#212121
var(--calcite-color-foreground-2)
3
#ebebeb
#141414
var(--calcite-color-foreground-3)
highlight
#d6efff
#2b465f
var(--calcite-color-surface-highlight)
Transparent
default
rgba(0, 0, 0, 0)
rgba(255, 255, 255, 0)
var(--calcite-color-transparent)
hover
rgba(0, 0, 0, 0.04)
rgba(255, 255, 255, 0.12)
var(--calcite-color-transparent-hover)
press
rgba(0, 0, 0, 0.08)
rgba(255, 255, 255, 0.16)
var(--calcite-color-transparent-press)
scrim
rgba(255, 255, 255, 0.85)
rgba(0, 0, 0, 0.85)
var(--calcite-color-transparent-scrim)
tint
rgba(255, 255, 255, 0.8)
rgba(43, 43, 43, 0.8)
var(--calcite-color-transparent-tint)
Transparent: inverse
hover
rgba(255, 255, 255, 0.12)
rgba(0, 0, 0, 0.04)
var(--calcite-color-transparent-inverse-hover)
press
rgba(255, 255, 255, 0.16)
rgba(0, 0, 0, 0.08)
var(--calcite-color-transparent-inverse-press)
Brand
default
#007ac2
#009af2
var(--calcite-color-brand)
hover
#00619b
#007ac2
var(--calcite-color-brand-hover)
press
#004874
#00619b
var(--calcite-color-brand-press)
underline
rgba(0, 97, 155, 0.4)
rgba(0, 160, 255, 0.4)
var(--calcite-color-brand-underline)
Status: info
default
#00619b
#00a0ff
var(--calcite-color-status-info)
hover
#004874
#3db8ff
var(--calcite-color-status-info-hover)
press
#00304d
#009af2
var(--calcite-color-status-info-press)
Status: success
default
#35ac46
#36da43
var(--calcite-color-status-success)
hover
#288835
#3bed52
var(--calcite-color-status-success-hover)
press
#1a6324
#00b81b
var(--calcite-color-status-success-press)
Status: warning
default
#f89927
#f89927
var(--calcite-color-status-warning)
hover
#d17300
#ffb54d
var(--calcite-color-status-warning-hover)
press
#9a5b10
#ff9500
var(--calcite-color-status-warning-press)
Status: danger
default
#d83020
#fe583e
var(--calcite-color-status-danger)
hover
#a82b1e
#ff0015
var(--calcite-color-status-danger-hover)
press
#7c1d13
#d90012
var(--calcite-color-status-danger-press)
Inverse
default
#363636
#f7f7f7
var(--calcite-color-inverse)
hover
#2b2b2b
#ffffff
var(--calcite-color-inverse-hover)
press
#212121
#f2f2f2
var(--calcite-color-inverse-press)
Text
1
#141414
#ffffff
var(--calcite-color-text-1)
2
#4a4a4a
#bfbfbf
var(--calcite-color-text-2)
3
#6b6b6b
#9e9e9e
var(--calcite-color-text-3)
highlight
#004874
#d6efff
var(--calcite-color-text-highlight)
inverse
#ffffff
#141414
var(--calcite-color-text-inverse)
Border
1
#c9c9c9
#545454
var(--calcite-color-border-1)
2
#d4d4d4
#4a4a4a
var(--calcite-color-border-2)
3
#dedede
#404040
var(--calcite-color-border-3)
input
#949494
#757575
var(--calcite-color-border-input)
ghost
rgba(0, 0, 0, 0.3)
rgba(117, 117, 117, 0.3)
var(--calcite-color-border-ghost)
white
#ffffff
#f7f7f7
var(--calcite-color-border-white)
Focus
default
#007ac2
#009af2
var(--calcite-color-focus)

Border

Name
Value
Platform tokenscsscssscsses6
Width
none
0
var(--calcite-border-width-none)
sm
1px
var(--calcite-border-width-sm)
md
2px
var(--calcite-border-width-md)
lg
4px
var(--calcite-border-width-lg)

Corner radius

Name
Value
Platform tokenscsscssscsses6
default
0
var(--calcite-corner-radius)
none
0
var(--calcite-corner-radius-none)
xs
2px
var(--calcite-corner-radius-xs)
sm
4px
var(--calcite-corner-radius-sm)
pill
100%
var(--calcite-corner-radius-pill)

Shadow

Name
Value
Platform tokenscsscssscsses6
none
0 0 0 0 rgba(0, 0, 0, 0)
var(--calcite-shadow-none)
sm
0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08)
var(--calcite-shadow-sm)
md
0 4px 20px 0 rgba(0, 0, 0, 0.08), 0 12px 32px -2px rgba(0, 0, 0, 0.1)
var(--calcite-shadow-md)

Opacity

Name
Value
Platform tokenscsscssscsses6
light
0.4
var(--calcite-opacity-light)
half
0.5
var(--calcite-opacity-half)
dark
0.85
var(--calcite-opacity-dark)
full
1
var(--calcite-opacity-full)
disabled
0.5
var(--calcite-opacity-disabled)

Stacking

Name
Value
Platform tokenscsscssscsses6
deep
-999999
var(--calcite-z-index-deep)
default
1
var(--calcite-z-index)
sticky
300
var(--calcite-z-index-sticky)
header
400
var(--calcite-z-index-header)
toast
500
var(--calcite-z-index-toast)
overlay
700
var(--calcite-z-index-overlay)
tooltip
901
var(--calcite-z-index-tooltip)

Font

Name
Value
Platform tokenscsscssscsses6
Family
default
AaBbCc
123456
["Avenir Next","Avenir","Helvetica Neue","sans-serif"]
var(--calcite-font-family)
code
AaBbCc
123456
["Monaco","Consolas","Andale Mono","Lucida Console","monospace"]
var(--calcite-font-family-code)
Weight
light
AaBbCc
123456
300
var(--calcite-font-weight-light)
normal
AaBbCc
123456
400
var(--calcite-font-weight-normal)
regular
AaBbCc
123456
400
var(--calcite-font-weight-regular)
medium
AaBbCc
123456
500
var(--calcite-font-weight-medium)
semibold
AaBbCc
123456
600
var(--calcite-font-weight-semibold)
bold
AaBbCc
123456
600
var(--calcite-font-weight-bold)
Size
xs
AaBbCc
123456
10px
var(--calcite-font-size-xs)
sm
AaBbCc
123456
12px
var(--calcite-font-size-sm)
default
AaBbCc
123456
14px
var(--calcite-font-size)
md
AaBbCc
123456
16px
var(--calcite-font-size-md)
lg
AaBbCc
123456
18px
var(--calcite-font-size-lg)
xl
AaBbCc
123456
20px
var(--calcite-font-size-xl)
xxl
AaBbCc
123456
24px
var(--calcite-font-size-xxl)
Style
emphasis
AaBbCc
123456
italic
var(--calcite-font-style-emphasis)
Line height: fixed
sm
AaBbCc
123456
12px
var(--calcite-font-line-height-fixed-sm)
base
AaBbCc
123456
16px
var(--calcite-font-line-height-fixed-base)
lg
AaBbCc
123456
20px
var(--calcite-font-line-height-fixed-lg)
xl
AaBbCc
123456
24px
var(--calcite-font-line-height-fixed-xl)
2xl
AaBbCc
123456
32px
var(--calcite-font-line-height-fixed-2xl)
3xl
AaBbCc
123456
40px
var(--calcite-font-line-height-fixed-3xl)
4xl
AaBbCc
123456
48px
var(--calcite-font-line-height-fixed-4xl)
5xl
AaBbCc
123456
64px
var(--calcite-font-line-height-fixed-5xl)
6xl
AaBbCc
123456
80px
var(--calcite-font-line-height-fixed-6xl)
Line height: relative
default
AaBbCc
123456
normal
var(--calcite-font-line-height-relative)
base
AaBbCc
123456
1
var(--calcite-font-line-height-relative-base)
tight
AaBbCc
123456
1.25
var(--calcite-font-line-height-relative-tight)
snug
AaBbCc
123456
1.375
var(--calcite-font-line-height-relative-snug)
normal
AaBbCc
123456
1.5
var(--calcite-font-line-height-relative-normal)
relaxed
AaBbCc
123456
1.625
var(--calcite-font-line-height-relative-relaxed)
loose
AaBbCc
123456
2
var(--calcite-font-line-height-relative-loose)
Letter spacing
tight
AaBbCc
123456
-0.4px
var(--calcite-font-letter-spacing-tight)
normal
AaBbCc
123456
0
var(--calcite-font-letter-spacing-normal)
wide
AaBbCc
123456
0.4px
var(--calcite-font-letter-spacing-wide)
Paragraph spacing
normal
AaBbCc
123456
4px
var(--calcite-font-paragraph-spacing-normal)
Text decoration
none
AaBbCc
123456
none
var(--calcite-font-text-decoration-none)
underline
AaBbCc
123456
underline
var(--calcite-font-text-decoration-underline)
Text case
none
AaBbCc
123456
none
var(--calcite-font-text-case-none)
uppercase
AaBbCc
123456
uppercase
var(--calcite-font-text-case-uppercase)
lowercase
AaBbCc
123456
lowercase
var(--calcite-font-text-case-lowercase)
capitalize
AaBbCc
123456
capitalize
var(--calcite-font-text-case-capitalize)

Spacing

Name
Value
Platform tokenscsscssscsses6
none
0
var(--calcite-spacing-none)
px
1px
var(--calcite-spacing-px)
base
2px
var(--calcite-spacing-base)
xxs
0.25rem
var(--calcite-spacing-xxs)
xs
0.375rem
var(--calcite-spacing-xs)
sm
0.5rem
var(--calcite-spacing-sm)
sm+
0.625rem
var(--calcite-spacing-sm-plus)
md
0.75rem
var(--calcite-spacing-md)
md+
0.875rem
var(--calcite-spacing-md-plus)
lg
1rem
var(--calcite-spacing-lg)
xl
1.25rem
var(--calcite-spacing-xl)
xxl
1.5rem
var(--calcite-spacing-xxl)
xxxl
2rem
var(--calcite-spacing-xxxl)

Core tokens

Use dark colors for code blocksCopy
1
@import "@esri/calcite-design-tokens/dist/css/core.css";

Colors

Name
Value
Platform tokenscsscssscsses6
Neutral
blk-000
#ffffff
var(--calcite-color-neutral-blk-000)
blk-005
#f7f7f7
var(--calcite-color-neutral-blk-005)
blk-010
#f2f2f2
var(--calcite-color-neutral-blk-010)
blk-020
#ebebeb
var(--calcite-color-neutral-blk-020)
blk-030
#dedede
var(--calcite-color-neutral-blk-030)
blk-040
#d4d4d4
var(--calcite-color-neutral-blk-040)
blk-050
#c9c9c9
var(--calcite-color-neutral-blk-050)
blk-060
#bfbfbf
var(--calcite-color-neutral-blk-060)
blk-070
#b5b5b5
var(--calcite-color-neutral-blk-070)
blk-080
#ababab
var(--calcite-color-neutral-blk-080)
blk-090
#9e9e9e
var(--calcite-color-neutral-blk-090)
blk-100
#949494
var(--calcite-color-neutral-blk-100)
blk-110
#8a8a8a
var(--calcite-color-neutral-blk-110)
blk-120
#808080
var(--calcite-color-neutral-blk-120)
blk-130
#757575
var(--calcite-color-neutral-blk-130)
blk-140
#6b6b6b
var(--calcite-color-neutral-blk-140)
blk-150
#616161
var(--calcite-color-neutral-blk-150)
blk-160
#545454
var(--calcite-color-neutral-blk-160)
blk-170
#4a4a4a
var(--calcite-color-neutral-blk-170)
blk-180
#404040
var(--calcite-color-neutral-blk-180)
blk-190
#363636
var(--calcite-color-neutral-blk-190)
blk-200
#2b2b2b
var(--calcite-color-neutral-blk-200)
blk-210
#212121
var(--calcite-color-neutral-blk-210)
blk-220
#141414
var(--calcite-color-neutral-blk-220)
blk-230
#0a0a0a
var(--calcite-color-neutral-blk-230)
blk-235
#050505
var(--calcite-color-neutral-blk-235)
blk-240
#000000
var(--calcite-color-neutral-blk-240)
Low saturation
l-bb-010
#edf3f7
var(--calcite-color-low-saturation-blue-l-bb-010)
l-bb-020
#d7e1e7
var(--calcite-color-low-saturation-blue-l-bb-020)
l-bb-030
#c1cfd7
var(--calcite-color-low-saturation-blue-l-bb-030)
l-bb-040
#acbcc6
var(--calcite-color-low-saturation-blue-l-bb-040)
l-bb-050
#96aab6
var(--calcite-color-low-saturation-blue-l-bb-050)
l-bb-060
#8098a6
var(--calcite-color-low-saturation-blue-l-bb-060)
l-bb-070
#647883
var(--calcite-color-low-saturation-blue-l-bb-070)
l-bb-080
#495860
var(--calcite-color-low-saturation-blue-l-bb-080)
l-bb-090
#2d373d
var(--calcite-color-low-saturation-blue-l-bb-090)
l-bb-100
#11171a
var(--calcite-color-low-saturation-blue-l-bb-100)
l-gb-010
#e8f2f2
var(--calcite-color-low-saturation-green-blue-l-gb-010)
l-gb-020
#d7e8e8
var(--calcite-color-low-saturation-green-blue-l-gb-020)
l-gb-030
#c2d7d7
var(--calcite-color-low-saturation-green-blue-l-gb-030)
l-gb-040
#b1c9c9
var(--calcite-color-low-saturation-green-blue-l-gb-040)
l-gb-050
#98b3b2
var(--calcite-color-low-saturation-green-blue-l-gb-050)
l-gb-060
#88a6a5
var(--calcite-color-low-saturation-green-blue-l-gb-060)
l-gb-070
#658584
var(--calcite-color-low-saturation-green-blue-l-gb-070)
l-gb-080
#4b6160
var(--calcite-color-low-saturation-green-blue-l-gb-080)
l-gb-090
#2f3d3d
var(--calcite-color-low-saturation-green-blue-l-gb-090)
l-gb-100
#121a1a
var(--calcite-color-low-saturation-green-blue-l-gb-100)
l-gg-010
#f0f7f0
var(--calcite-color-low-saturation-green-l-gg-010)
l-gg-020
#dde7dd
var(--calcite-color-low-saturation-green-l-gg-020)
l-gg-030
#cad7ca
var(--calcite-color-low-saturation-green-l-gg-030)
l-gg-040
#b7c6b6
var(--calcite-color-low-saturation-green-l-gg-040)
l-gg-050
#a4b6a3
var(--calcite-color-low-saturation-green-l-gg-050)
l-gg-060
#91a690
var(--calcite-color-low-saturation-green-l-gg-060)
l-gg-070
#728371
var(--calcite-color-low-saturation-green-l-gg-070)
l-gg-080
#536053
var(--calcite-color-low-saturation-green-l-gg-080)
l-gg-090
#343d34
var(--calcite-color-low-saturation-green-l-gg-090)
l-gg-100
#151a15
var(--calcite-color-low-saturation-green-l-gg-100)
l-yg-010
#f4f7eb
var(--calcite-color-low-saturation-yellow-green-l-yg-010)
l-yg-020
#e3e7d8
var(--calcite-color-low-saturation-yellow-green-l-yg-020)
l-yg-030
#d2d7c5
var(--calcite-color-low-saturation-yellow-green-l-yg-030)
l-yg-040
#c2c6b3
var(--calcite-color-low-saturation-yellow-green-l-yg-040)
l-yg-050
#b1b6a0
var(--calcite-color-low-saturation-yellow-green-l-yg-050)
l-yg-060
#a0a68d
var(--calcite-color-low-saturation-yellow-green-l-yg-060)
l-yg-070
#7e836f
var(--calcite-color-low-saturation-yellow-green-l-yg-070)
l-yg-080
#5d6051
var(--calcite-color-low-saturation-yellow-green-l-yg-080)
l-yg-090
#3b3d33
var(--calcite-color-low-saturation-yellow-green-l-yg-090)
l-yg-100
#191a15
var(--calcite-color-low-saturation-yellow-green-l-yg-100)
l-br-010
#f7f1eb
var(--calcite-color-low-saturation-brown-l-br-010)
l-br-020
#e4ddd4
var(--calcite-color-low-saturation-brown-l-br-020)
l-br-030
#d1c8be
var(--calcite-color-low-saturation-brown-l-br-030)
l-br-040
#bfb4a7
var(--calcite-color-low-saturation-brown-l-br-040)
l-br-050
#ac9f91
var(--calcite-color-low-saturation-brown-l-br-050)
l-br-060
#998b7a
var(--calcite-color-low-saturation-brown-l-br-060)
l-br-070
#796e60
var(--calcite-color-low-saturation-brown-l-br-070)
l-br-080
#5a5146
var(--calcite-color-low-saturation-brown-l-br-080)
l-br-090
#3a332b
var(--calcite-color-low-saturation-brown-l-br-090)
l-br-100
#1a1611
var(--calcite-color-low-saturation-brown-l-br-100)
l-yy-010
#f7f5e6
var(--calcite-color-low-saturation-yellow-l-yy-010)
l-yy-020
#e7e4d1
var(--calcite-color-low-saturation-yellow-l-yy-020)
l-yy-030
#d7d3bc
var(--calcite-color-low-saturation-yellow-l-yy-030)
l-yy-040
#c6c1a6
var(--calcite-color-low-saturation-yellow-l-yy-040)
l-yy-050
#b6b091
var(--calcite-color-low-saturation-yellow-l-yy-050)
l-yy-060
#a69f7c
var(--calcite-color-low-saturation-yellow-l-yy-060)
l-yy-070
#837e61
var(--calcite-color-low-saturation-yellow-l-yy-070)
l-yy-080
#605c47
var(--calcite-color-low-saturation-yellow-l-yy-080)
l-yy-090
#3d3b2c
var(--calcite-color-low-saturation-yellow-l-yy-090)
l-yy-100
#1a1911
var(--calcite-color-low-saturation-yellow-l-yy-100)
l-oy-010
#faf3eb
var(--calcite-color-low-saturation-orange-yellow-l-oy-010)
l-oy-020
#e9e0d5
var(--calcite-color-low-saturation-orange-yellow-l-oy-020)
l-oy-030
#d8cdbf
var(--calcite-color-low-saturation-orange-yellow-l-oy-030)
l-oy-040
#c8b9a8
var(--calcite-color-low-saturation-orange-yellow-l-oy-040)
l-oy-050
#b7a692
var(--calcite-color-low-saturation-orange-yellow-l-oy-050)
l-oy-060
#a6937c
var(--calcite-color-low-saturation-orange-yellow-l-oy-060)
l-oy-070
#837461
var(--calcite-color-low-saturation-orange-yellow-l-oy-070)
l-oy-080
#605547
var(--calcite-color-low-saturation-orange-yellow-l-oy-080)
l-oy-090
#3d352c
var(--calcite-color-low-saturation-orange-yellow-l-oy-090)
l-oy-100
#1a1611
var(--calcite-color-low-saturation-orange-yellow-l-oy-100)
l-oo-010
#faf1eb
var(--calcite-color-low-saturation-orange-l-oo-010)
l-oo-020
#e9ddd5
var(--calcite-color-low-saturation-orange-l-oo-020)
l-oo-030
#d8c9bf
var(--calcite-color-low-saturation-orange-l-oo-030)
l-oo-040
#c8b4a8
var(--calcite-color-low-saturation-orange-l-oo-040)
l-oo-050
#b7a092
var(--calcite-color-low-saturation-orange-l-oo-050)
l-oo-060
#a68c7c
var(--calcite-color-low-saturation-orange-l-oo-060)
l-oo-070
#836e61
var(--calcite-color-low-saturation-orange-l-oo-070)
l-oo-080
#605047
var(--calcite-color-low-saturation-orange-l-oo-080)
l-oo-090
#3d322c
var(--calcite-color-low-saturation-orange-l-oo-090)
l-oo-100
#1a1411
var(--calcite-color-low-saturation-orange-l-oo-100)
l-ro-010
#faf3f0
var(--calcite-color-low-saturation-red-orange-l-ro-010)
l-ro-020
#e9ddd9
var(--calcite-color-low-saturation-red-orange-l-ro-020)
l-ro-030
#d8c8c1
var(--calcite-color-low-saturation-red-orange-l-ro-030)
l-ro-040
#c8b2aa
var(--calcite-color-low-saturation-red-orange-l-ro-040)
l-ro-050
#b79d92
var(--calcite-color-low-saturation-red-orange-l-ro-050)
l-ro-060
#a6877b
var(--calcite-color-low-saturation-red-orange-l-ro-060)
l-ro-070
#836b61
var(--calcite-color-low-saturation-red-orange-l-ro-070)
l-ro-080
#604e47
var(--calcite-color-low-saturation-red-orange-l-ro-080)
l-ro-090
#3d302c
var(--calcite-color-low-saturation-red-orange-l-ro-090)
l-ro-100
#1a1311
var(--calcite-color-low-saturation-red-orange-l-ro-100)
l-rr-010
#faf1f0
var(--calcite-color-low-saturation-red-l-rr-010)
l-rr-020
#eddfdd
var(--calcite-color-low-saturation-red-l-rr-020)
l-rr-030
#dbc6c4
var(--calcite-color-low-saturation-red-l-rr-030)
l-rr-040
#c8adaa
var(--calcite-color-low-saturation-red-l-rr-040)
l-rr-050
#ba9995
var(--calcite-color-low-saturation-red-l-rr-050)
l-rr-060
#ab837e
var(--calcite-color-low-saturation-red-l-rr-060)
l-rr-070
#876764
var(--calcite-color-low-saturation-red-l-rr-070)
l-rr-080
#604a47
var(--calcite-color-low-saturation-red-l-rr-080)
l-rr-090
#3d2e2c
var(--calcite-color-low-saturation-red-l-rr-090)
l-rr-100
#1a1211
var(--calcite-color-low-saturation-red-l-rr-100)
l-pk-010
#faf0f6
var(--calcite-color-low-saturation-pink-l-pk-010)
l-pk-020
#e8d7e2
var(--calcite-color-low-saturation-pink-l-pk-020)
l-pk-030
#dbc2d2
var(--calcite-color-low-saturation-pink-l-pk-030)
l-pk-040
#c9abbe
var(--calcite-color-low-saturation-pink-l-pk-040)
l-pk-050
#b897ab
var(--calcite-color-low-saturation-pink-l-pk-050)
l-pk-060
#a68097
var(--calcite-color-low-saturation-pink-l-pk-060)
l-pk-070
#856376
var(--calcite-color-low-saturation-pink-l-pk-070)
l-pk-080
#614755
var(--calcite-color-low-saturation-pink-l-pk-080)
l-pk-090
#3d2c35
var(--calcite-color-low-saturation-pink-l-pk-090)
l-pk-100
#1a1111
var(--calcite-color-low-saturation-pink-l-pk-100)
l-vr-010
#f5edf7
var(--calcite-color-low-saturation-violet-red-l-vr-010)
l-vr-020
#e1d6e4
var(--calcite-color-low-saturation-violet-red-l-vr-020)
l-vr-030
#cebcd1
var(--calcite-color-low-saturation-violet-red-l-vr-030)
l-vr-040
#baa8bf
var(--calcite-color-low-saturation-violet-red-l-vr-040)
l-vr-050
#a791ac
var(--calcite-color-low-saturation-violet-red-l-vr-050)
l-vr-060
#937a99
var(--calcite-color-low-saturation-violet-red-l-vr-060)
l-vr-070
#746079
var(--calcite-color-low-saturation-violet-red-l-vr-070)
l-vr-080
#56465a
var(--calcite-color-low-saturation-violet-red-l-vr-080)
l-vr-090
#372b3a
var(--calcite-color-low-saturation-violet-red-l-vr-090)
l-vr-100
#18111a
var(--calcite-color-low-saturation-violet-red-l-vr-100)
l-vv-010
#f0edf7
var(--calcite-color-low-saturation-violet-l-vv-010)
l-vv-020
#dcd8e7
var(--calcite-color-low-saturation-violet-l-vv-020)
l-vv-030
#c8c3d7
var(--calcite-color-low-saturation-violet-l-vv-030)
l-vv-040
#b5aec6
var(--calcite-color-low-saturation-violet-l-vv-040)
l-vv-050
#a199b6
var(--calcite-color-low-saturation-violet-l-vv-050)
l-vv-060
#8d84a6
var(--calcite-color-low-saturation-violet-l-vv-060)
l-vv-070
#6f6783
var(--calcite-color-low-saturation-violet-l-vv-070)
l-vv-080
#504b60
var(--calcite-color-low-saturation-violet-l-vv-080)
l-vv-090
#322e3d
var(--calcite-color-low-saturation-violet-l-vv-090)
l-vv-1000
#13111a
var(--calcite-color-low-saturation-violet-l-vv-1000)
Medium saturation
m-bb-010
#dfeffa
var(--calcite-color-medium-saturation-blue-m-bb-010)
m-bb-020
#c8e3f5
var(--calcite-color-medium-saturation-blue-m-bb-020)
m-bb-030
#b1d8f1
var(--calcite-color-medium-saturation-blue-m-bb-030)
m-bb-040
#9bccec
var(--calcite-color-medium-saturation-blue-m-bb-040)
m-bb-050
#84c1e8
var(--calcite-color-medium-saturation-blue-m-bb-050)
m-bb-060
#6db5e3
var(--calcite-color-medium-saturation-blue-m-bb-060)
m-bb-070
#548eb4
var(--calcite-color-medium-saturation-blue-m-bb-070)
m-bb-080
#3a6884
var(--calcite-color-medium-saturation-blue-m-bb-080)
m-bb-090
#2b465f
var(--calcite-color-medium-saturation-blue-m-bb-090)
m-bb-100
#071a26
var(--calcite-color-medium-saturation-blue-m-bb-100)
m-gb-010
#dbf2f1
var(--calcite-color-medium-saturation-green-blue-m-gb-010)
m-gb-020
#beedec
var(--calcite-color-medium-saturation-green-blue-m-gb-020)
m-gb-030
#9fe6e5
var(--calcite-color-medium-saturation-green-blue-m-gb-030)
m-gb-040
#8be0df
var(--calcite-color-medium-saturation-green-blue-m-gb-040)
m-gb-050
#70d9d7
var(--calcite-color-medium-saturation-green-blue-m-gb-050)
m-gb-060
#5cbfbc
var(--calcite-color-medium-saturation-green-blue-m-gb-060)
m-gb-070
#53a6a4
var(--calcite-color-medium-saturation-green-blue-m-gb-070)
m-gb-080
#40807e
var(--calcite-color-medium-saturation-green-blue-m-gb-080)
m-gb-090
#2a5958
var(--calcite-color-medium-saturation-green-blue-m-gb-090)
m-gb-100
#102928
var(--calcite-color-medium-saturation-green-blue-m-gb-100)
m-gg-010
#e4f0e4
var(--calcite-color-medium-saturation-green-m-gg-010)
m-gg-020
#cbe2cb
var(--calcite-color-medium-saturation-green-m-gg-020)
m-gg-030
#b2d4b2
var(--calcite-color-medium-saturation-green-m-gg-030)
m-gg-040
#9ac699
var(--calcite-color-medium-saturation-green-m-gg-040)
m-gg-050
#81b880
var(--calcite-color-medium-saturation-green-m-gg-050)
m-gg-060
#68aa67
var(--calcite-color-medium-saturation-green-m-gg-060)
m-gg-070
#548953
var(--calcite-color-medium-saturation-green-m-gg-070)
m-gg-080
#3f683f
var(--calcite-color-medium-saturation-green-m-gg-080)
m-gg-090
#2b472a
var(--calcite-color-medium-saturation-green-m-gg-090)
m-gg-100
#172616
var(--calcite-color-medium-saturation-green-m-gg-100)
m-yg-010
#f0f7da
var(--calcite-color-medium-saturation-yellow-green-m-yg-010)
m-yg-020
#e5efc6
var(--calcite-color-medium-saturation-yellow-green-m-yg-020)
m-yg-030
#dae7b1
var(--calcite-color-medium-saturation-yellow-green-m-yg-030)
m-yg-040
#cede9d
var(--calcite-color-medium-saturation-yellow-green-m-yg-040)
m-yg-050
#c3d688
var(--calcite-color-medium-saturation-yellow-green-m-yg-050)
m-yg-060
#b8ce74
var(--calcite-color-medium-saturation-yellow-green-m-yg-060)
m-yg-070
#90a15b
var(--calcite-color-medium-saturation-yellow-green-m-yg-070)
m-yg-080
#687442
var(--calcite-color-medium-saturation-yellow-green-m-yg-080)
m-yg-090
#3f4728
var(--calcite-color-medium-saturation-yellow-green-m-yg-090)
m-yg-100
#171a0f
var(--calcite-color-medium-saturation-yellow-green-m-yg-100)
m-br-010
#faeddf
var(--calcite-color-medium-saturation-brown-m-br-010)
m-br-020
#edd9c3
var(--calcite-color-medium-saturation-brown-m-br-020)
m-br-030
#e0c6a8
var(--calcite-color-medium-saturation-brown-m-br-030)
m-br-040
#d2b28c
var(--calcite-color-medium-saturation-brown-m-br-040)
m-br-050
#c59f71
var(--calcite-color-medium-saturation-brown-m-br-050)
m-br-060
#b88b55
var(--calcite-color-medium-saturation-brown-m-br-060)
m-br-070
#926d41
var(--calcite-color-medium-saturation-brown-m-br-070)
m-br-080
#6c4f2d
var(--calcite-color-medium-saturation-brown-m-br-080)
m-br-090
#45311a
var(--calcite-color-medium-saturation-brown-m-br-090)
m-br-100
#1f1306
var(--calcite-color-medium-saturation-brown-m-br-100)
m-yy-010
#faf7dc
var(--calcite-color-medium-saturation-yellow-m-yy-010)
m-yy-020
#f6f0c1
var(--calcite-color-medium-saturation-yellow-m-yy-020)
m-yy-030
#f2e8a6
var(--calcite-color-medium-saturation-yellow-m-yy-030)
m-yy-040
#ede18b
var(--calcite-color-medium-saturation-yellow-m-yy-040)
m-yy-050
#e9d970
var(--calcite-color-medium-saturation-yellow-m-yy-050)
m-yy-060
#e5d255
var(--calcite-color-medium-saturation-yellow-m-yy-060)
m-yy-070
#bcaa45
var(--calcite-color-medium-saturation-yellow-m-yy-070)
m-yy-080
#8a7d31
var(--calcite-color-medium-saturation-yellow-m-yy-080)
m-yy-090
#584f1c
var(--calcite-color-medium-saturation-yellow-m-yy-090)
m-yy-100
#262107
var(--calcite-color-medium-saturation-yellow-m-yy-100)
m-oy-010
#ffedd6
var(--calcite-color-medium-saturation-orange-yellow-m-oy-010)
m-oy-020
#fce0bd
var(--calcite-color-medium-saturation-orange-yellow-m-oy-020)
m-oy-030
#f8d2a4
var(--calcite-color-medium-saturation-orange-yellow-m-oy-030)
m-oy-040
#f5c58c
var(--calcite-color-medium-saturation-orange-yellow-m-oy-040)
m-oy-050
#f1b773
var(--calcite-color-medium-saturation-orange-yellow-m-oy-050)
m-oy-060
#eeaa5a
var(--calcite-color-medium-saturation-orange-yellow-m-oy-060)
m-oy-070
#bc8645
var(--calcite-color-medium-saturation-orange-yellow-m-oy-070)
m-oy-080
#8a6130
var(--calcite-color-medium-saturation-orange-yellow-m-oy-080)
m-oy-090
#583d1c
var(--calcite-color-medium-saturation-orange-yellow-m-oy-090)
m-oy-100
#261807
var(--calcite-color-medium-saturation-orange-yellow-m-oy-100)
m-oo-010
#ffece0
var(--calcite-color-medium-saturation-orange-m-oo-010)
m-oo-020
#fcdac5
var(--calcite-color-medium-saturation-orange-m-oo-020)
m-oo-030
#f8c7aa
var(--calcite-color-medium-saturation-orange-m-oo-030)
m-oo-040
#f5b590
var(--calcite-color-medium-saturation-orange-m-oo-040)
m-oo-050
#f1a275
var(--calcite-color-medium-saturation-orange-m-oo-050)
m-oo-060
#ee905a
var(--calcite-color-medium-saturation-orange-m-oo-060)
m-oo-070
#bc7145
var(--calcite-color-medium-saturation-orange-m-oo-070)
m-oo-080
#8a5131
var(--calcite-color-medium-saturation-orange-m-oo-080)
m-oo-090
#58321c
var(--calcite-color-medium-saturation-orange-m-oo-090)
m-oo-100
#261207
var(--calcite-color-medium-saturation-orange-m-oo-100)
m-ro-010
#f7e4dc
var(--calcite-color-medium-saturation-red-orange-m-ro-010)
m-ro-020
#f5d0c2
var(--calcite-color-medium-saturation-red-orange-m-ro-020)
m-ro-030
#f3bba7
var(--calcite-color-medium-saturation-red-orange-m-ro-030)
m-ro-040
#f1a78d
var(--calcite-color-medium-saturation-red-orange-m-ro-040)
m-ro-050
#ef9272
var(--calcite-color-medium-saturation-red-orange-m-ro-050)
m-ro-060
#ed7e58
var(--calcite-color-medium-saturation-red-orange-m-ro-060)
m-ro-070
#bc6345
var(--calcite-color-medium-saturation-red-orange-m-ro-070)
m-ro-080
#8a4731
var(--calcite-color-medium-saturation-red-orange-m-ro-080)
m-ro-090
#582b1c
var(--calcite-color-medium-saturation-red-orange-m-ro-090)
m-ro-100
#27120c
var(--calcite-color-medium-saturation-red-orange-m-ro-100)
m-rr-010
#fadfdc
var(--calcite-color-medium-saturation-red-m-rr-010)
m-rr-020
#fccac5
var(--calcite-color-medium-saturation-red-m-rr-020)
m-rr-030
#ffb9b0
var(--calcite-color-medium-saturation-red-m-rr-030)
m-rr-040
#f79e94
var(--calcite-color-medium-saturation-red-m-rr-040)
m-rr-050
#f5867a
var(--calcite-color-medium-saturation-red-m-rr-050)
m-rr-060
#eb6c5e
var(--calcite-color-medium-saturation-red-m-rr-060)
m-rr-070
#c25347
var(--calcite-color-medium-saturation-red-m-rr-070)
m-rr-080
#913d34
var(--calcite-color-medium-saturation-red-m-rr-080)
m-rr-090
#5e241e
var(--calcite-color-medium-saturation-red-m-rr-090)
m-rr-100
#260a07
var(--calcite-color-medium-saturation-red-m-rr-100)
m-pk-010
#fadef0
var(--calcite-color-medium-saturation-pink-m-pk-010)
m-pk-020
#facdea
var(--calcite-color-medium-saturation-pink-m-pk-020)
m-pk-030
#f2b1da
var(--calcite-color-medium-saturation-pink-m-pk-030)
m-pk-040
#eb9dcf
var(--calcite-color-medium-saturation-pink-m-pk-040)
m-pk-050
#e688c2
var(--calcite-color-medium-saturation-pink-m-pk-050)
m-pk-060
#e070b4
var(--calcite-color-medium-saturation-pink-m-pk-060)
m-pk-070
#b8588f
var(--calcite-color-medium-saturation-pink-m-pk-070)
m-pk-080
#8c4267
var(--calcite-color-medium-saturation-pink-m-pk-080)
m-pk-090
#592440
var(--calcite-color-medium-saturation-pink-m-pk-090)
m-pk-100
#260b0b
var(--calcite-color-medium-saturation-pink-m-pk-100)
m-vr-010
#f6e1fa
var(--calcite-color-medium-saturation-violet-red-m-vr-010)
m-vr-020
#e9ceee
var(--calcite-color-medium-saturation-violet-red-m-vr-020)
m-vr-030
#dbbbe2
var(--calcite-color-medium-saturation-violet-red-m-vr-030)
m-vr-040
#cea8d5
var(--calcite-color-medium-saturation-violet-red-m-vr-040)
m-vr-050
#c095c9
var(--calcite-color-medium-saturation-violet-red-m-vr-050)
m-vr-060
#b382bd
var(--calcite-color-medium-saturation-violet-red-m-vr-060)
m-vr-070
#8e6397
var(--calcite-color-medium-saturation-violet-red-m-vr-070)
m-vr-080
#6a4572
var(--calcite-color-medium-saturation-violet-red-m-vr-080)
m-vr-090
#46264c
var(--calcite-color-medium-saturation-violet-red-m-vr-090)
m-vr-100
#210726
var(--calcite-color-medium-saturation-violet-red-m-vr-100)
m-vv-010
#ece6ff
var(--calcite-color-medium-saturation-violet-m-vv-010)
m-vv-020
#dcd2f2
var(--calcite-color-medium-saturation-violet-m-vv-020)
m-vv-030
#ccbee5
var(--calcite-color-medium-saturation-violet-m-vv-030)
m-vv-040
#bbaad7
var(--calcite-color-medium-saturation-violet-m-vv-040)
m-vv-050
#ab96ca
var(--calcite-color-medium-saturation-violet-m-vv-050)
m-vv-060
#9b82bd
var(--calcite-color-medium-saturation-violet-m-vv-060)
m-vv-070
#796397
var(--calcite-color-medium-saturation-violet-m-vv-070)
m-vv-080
#584572
var(--calcite-color-medium-saturation-violet-m-vv-080)
m-vv-090
#36264c
var(--calcite-color-medium-saturation-violet-m-vv-090)
m-vv-100
#140726
var(--calcite-color-medium-saturation-violet-m-vv-100)
High saturation
h-bb-010
#d6efff
var(--calcite-color-high-saturation-blue-h-bb-010)
h-bb-020
#9fd4f3
var(--calcite-color-high-saturation-blue-h-bb-020)
h-bb-030
#77bde7
var(--calcite-color-high-saturation-blue-h-bb-030)
h-bb-040
#50a7da
var(--calcite-color-high-saturation-blue-h-bb-040)
h-bb-050
#2890ce
var(--calcite-color-high-saturation-blue-h-bb-050)
h-bb-060
#007ac2
var(--calcite-color-high-saturation-blue-h-bb-060)
h-bb-070
#00619b
var(--calcite-color-high-saturation-blue-h-bb-070)
h-bb-080
#004874
var(--calcite-color-high-saturation-blue-h-bb-080)
h-bb-090
#00304d
var(--calcite-color-high-saturation-blue-h-bb-090)
h-bb-100
#001726
var(--calcite-color-high-saturation-blue-h-bb-100)
h-gb-010
#cef5f4
var(--calcite-color-high-saturation-green-blue-h-gb-010)
h-gb-020
#afedec
var(--calcite-color-high-saturation-green-blue-h-gb-020)
h-gb-030
#8fe6e5
var(--calcite-color-high-saturation-green-blue-h-gb-030)
h-gb-040
#5ae0de
var(--calcite-color-high-saturation-green-blue-h-gb-040)
h-gb-050
#28cecb
var(--calcite-color-high-saturation-green-blue-h-gb-050)
h-gb-060
#00bab5
var(--calcite-color-high-saturation-green-blue-h-gb-060)
h-gb-070
#009b98
var(--calcite-color-high-saturation-green-blue-h-gb-070)
h-gb-080
#007472
var(--calcite-color-high-saturation-green-blue-h-gb-080)
h-gb-090
#004d4c
var(--calcite-color-high-saturation-green-blue-h-gb-090)
h-gb-100
#002625
var(--calcite-color-high-saturation-green-blue-h-gb-100)
h-gg-010
#bdf2c4
var(--calcite-color-high-saturation-green-h-gg-010)
h-gg-020
#a2e4ab
var(--calcite-color-high-saturation-green-h-gg-020)
h-gg-030
#87d692
var(--calcite-color-high-saturation-green-h-gg-030)
h-gg-040
#6bc878
var(--calcite-color-high-saturation-green-h-gg-040)
h-gg-050
#50ba5f
var(--calcite-color-high-saturation-green-h-gg-050)
h-gg-060
#35ac46
var(--calcite-color-high-saturation-green-h-gg-060)
h-gg-070
#288835
var(--calcite-color-high-saturation-green-h-gg-070)
h-gg-080
#1a6324
var(--calcite-color-high-saturation-green-h-gg-080)
h-gg-090
#0d3f14
var(--calcite-color-high-saturation-green-h-gg-090)
h-gg-100
#001a03
var(--calcite-color-high-saturation-green-h-gg-100)
h-yg-010
#e5f7b4
var(--calcite-color-high-saturation-yellow-green-h-yg-010)
h-yg-020
#d9ef9f
var(--calcite-color-high-saturation-yellow-green-h-yg-020)
h-yg-030
#cde78a
var(--calcite-color-high-saturation-yellow-green-h-yg-030)
h-yg-040
#c2e075
var(--calcite-color-high-saturation-yellow-green-h-yg-040)
h-yg-050
#b6d860
var(--calcite-color-high-saturation-yellow-green-h-yg-050)
h-yg-060
#aad04b
var(--calcite-color-high-saturation-yellow-green-h-yg-060)
h-yg-070
#84a338
var(--calcite-color-high-saturation-yellow-green-h-yg-070)
h-yg-080
#5e7526
var(--calcite-color-high-saturation-yellow-green-h-yg-080)
h-yg-090
#384813
var(--calcite-color-high-saturation-yellow-green-h-yg-090)
h-yg-100
#121a00
var(--calcite-color-high-saturation-yellow-green-h-yg-100)
h-yy-010
#fff7cc
var(--calcite-color-high-saturation-yellow-h-yy-010)
h-yy-020
#fef3ad
var(--calcite-color-high-saturation-yellow-h-yy-020)
h-yy-030
#fcee8d
var(--calcite-color-high-saturation-yellow-h-yy-030)
h-yy-040
#fbea6e
var(--calcite-color-high-saturation-yellow-h-yy-040)
h-yy-050
#f9e54e
var(--calcite-color-high-saturation-yellow-h-yy-050)
h-yy-060
#edd317
var(--calcite-color-high-saturation-yellow-h-yy-060)
h-yy-070
#d9bc00
var(--calcite-color-high-saturation-yellow-h-yy-070)
h-yy-080
#bfa200
var(--calcite-color-high-saturation-yellow-h-yy-080)
h-yy-090
#8c7500
var(--calcite-color-high-saturation-yellow-h-yy-090)
h-yy-100
#5c4e00
var(--calcite-color-high-saturation-yellow-h-yy-100)
h-oy-010
#ffe2bf
var(--calcite-color-high-saturation-orange-yellow-h-oy-010)
h-oy-020
#fed3a1
var(--calcite-color-high-saturation-orange-yellow-h-oy-020)
h-oy-030
#fcc582
var(--calcite-color-high-saturation-orange-yellow-h-oy-030)
h-oy-040
#fbb664
var(--calcite-color-high-saturation-orange-yellow-h-oy-040)
h-oy-050
#f9a845
var(--calcite-color-high-saturation-orange-yellow-h-oy-050)
h-oy-060
#f89927
var(--calcite-color-high-saturation-orange-yellow-h-oy-060)
h-oy-070
#c67718
var(--calcite-color-high-saturation-orange-yellow-h-oy-070)
h-oy-080
#9a5b10
var(--calcite-color-high-saturation-orange-yellow-h-oy-080)
h-oy-090
#6d3f08
var(--calcite-color-high-saturation-orange-yellow-h-oy-090)
h-oy-100
#402300
var(--calcite-color-high-saturation-orange-yellow-h-oy-100)
h-oo-010
#ffd8bf
var(--calcite-color-high-saturation-orange-h-oo-010)
h-oo-020
#fdc39f
var(--calcite-color-high-saturation-orange-h-oo-020)
h-oo-030
#faae7f
var(--calcite-color-high-saturation-orange-h-oo-030)
h-oo-040
#f89960
var(--calcite-color-high-saturation-orange-h-oo-040)
h-oo-050
#f58440
var(--calcite-color-high-saturation-orange-h-oo-050)
h-oo-060
#f36f20
var(--calcite-color-high-saturation-orange-h-oo-060)
h-oo-070
#c65a18
var(--calcite-color-high-saturation-orange-h-oo-070)
h-oo-080
#9a4410
var(--calcite-color-high-saturation-orange-h-oo-080)
h-oo-090
#6d2f08
var(--calcite-color-high-saturation-orange-h-oo-090)
h-oo-100
#401900
var(--calcite-color-high-saturation-orange-h-oo-100)
h-ro-010
#ffc7b3
var(--calcite-color-high-saturation-red-orange-h-ro-010)
h-ro-020
#f8af95
var(--calcite-color-high-saturation-red-orange-h-ro-020)
h-ro-030
#f09677
var(--calcite-color-high-saturation-red-orange-h-ro-030)
h-ro-040
#e97e5a
var(--calcite-color-high-saturation-red-orange-h-ro-040)
h-ro-050
#e1653c
var(--calcite-color-high-saturation-red-orange-h-ro-050)
h-ro-060
#da4d1e
var(--calcite-color-high-saturation-red-orange-h-ro-060)
h-ro-070
#ad3c16
var(--calcite-color-high-saturation-red-orange-h-ro-070)
h-ro-080
#802c0f
var(--calcite-color-high-saturation-red-orange-h-ro-080)
h-ro-090
#531b07
var(--calcite-color-high-saturation-red-orange-h-ro-090)
h-ro-100
#260a00
var(--calcite-color-high-saturation-red-orange-h-ro-100)
h-rr-010
#ffc6bf
var(--calcite-color-high-saturation-red-h-rr-010)
h-rr-020
#ffaaa1
var(--calcite-color-high-saturation-red-h-rr-020)
h-rr-030
#f2877b
var(--calcite-color-high-saturation-red-h-rr-030)
h-rr-040
#f07062
var(--calcite-color-high-saturation-red-h-rr-040)
h-rr-050
#e65240
var(--calcite-color-high-saturation-red-h-rr-050)
h-rr-060
#d83020
var(--calcite-color-high-saturation-red-h-rr-060)
h-rr-070
#a82b1e
var(--calcite-color-high-saturation-red-h-rr-070)
h-rr-080
#7c1d13
var(--calcite-color-high-saturation-red-h-rr-080)
h-rr-090
#4f0e08
var(--calcite-color-high-saturation-red-h-rr-090)
h-rr-100
#210300
var(--calcite-color-high-saturation-red-h-rr-100)
h-pk-010
#ffd1ef
var(--calcite-color-high-saturation-pink-h-pk-010)
h-pk-020
#fabee4
var(--calcite-color-high-saturation-pink-h-pk-020)
h-pk-030
#f2a5d6
var(--calcite-color-high-saturation-pink-h-pk-030)
h-pk-040
#eb8dc9
var(--calcite-color-high-saturation-pink-h-pk-040)
h-pk-050
#e673bb
var(--calcite-color-high-saturation-pink-h-pk-050)
h-pk-060
#e04ea6
var(--calcite-color-high-saturation-pink-h-pk-060)
h-pk-070
#ba2f7e
var(--calcite-color-high-saturation-pink-h-pk-070)
h-pk-080
#851b52
var(--calcite-color-high-saturation-pink-h-pk-080)
h-pk-090
#590b32
var(--calcite-color-high-saturation-pink-h-pk-090)
h-pk-100
#260404
var(--calcite-color-high-saturation-pink-h-pk-100)
h-vr-010
#fadbff
var(--calcite-color-high-saturation-violet-red-h-vr-010)
h-vr-020
#e4beeb
var(--calcite-color-high-saturation-violet-red-h-vr-020)
h-vr-030
#cfa1d7
var(--calcite-color-high-saturation-violet-red-h-vr-030)
h-vr-040
#b983c3
var(--calcite-color-high-saturation-violet-red-h-vr-040)
h-vr-050
#a466af
var(--calcite-color-high-saturation-violet-red-h-vr-050)
h-vr-060
#8e499b
var(--calcite-color-high-saturation-violet-red-h-vr-060)
h-vr-070
#73377e
var(--calcite-color-high-saturation-violet-red-h-vr-070)
h-vr-080
#572561
var(--calcite-color-high-saturation-violet-red-h-vr-080)
h-vr-090
#3c1243
var(--calcite-color-high-saturation-violet-red-h-vr-090)
h-vr-100
#200026
var(--calcite-color-high-saturation-violet-red-h-vr-100)
h-vv-010
#e8d9ff
var(--calcite-color-high-saturation-violet-h-vv-010)
h-vv-020
#cdb9eb
var(--calcite-color-high-saturation-violet-h-vv-020)
h-vv-030
#b39ad7
var(--calcite-color-high-saturation-violet-h-vv-030)
h-vv-040
#987ac3
var(--calcite-color-high-saturation-violet-h-vv-040)
h-vv-050
#7e5baf
var(--calcite-color-high-saturation-violet-h-vv-050)
h-vv-060
#633b9b
var(--calcite-color-high-saturation-violet-h-vv-060)
h-vv-070
#4e2c7e
var(--calcite-color-high-saturation-violet-h-vv-070)
h-vv-080
#3a1e61
var(--calcite-color-high-saturation-violet-h-vv-080)
h-vv-090
#250f43
var(--calcite-color-high-saturation-violet-h-vv-090)
h-vv-100
#100026
var(--calcite-color-high-saturation-violet-h-vv-100)
Vibrant
v-bb-120
#59d6ff
var(--calcite-color-vibrant-blue-v-bb-120)
v-bb-140
#3db8ff
var(--calcite-color-vibrant-blue-v-bb-140)
v-bb-160
#009af2
var(--calcite-color-vibrant-blue-v-bb-160)
v-bb-180
#0089de
var(--calcite-color-vibrant-blue-v-bb-180)
v-gb-120
#59fffc
var(--calcite-color-vibrant-green-blue-v-gb-120)
v-gb-140
#00f7f3
var(--calcite-color-vibrant-green-blue-v-gb-140)
v-gb-160
#00e6e2
var(--calcite-color-vibrant-green-blue-v-gb-160)
v-gb-180
#00cfca
var(--calcite-color-vibrant-green-blue-v-gb-180)
v-gg-120
#73ff84
var(--calcite-color-vibrant-green-v-gg-120)
v-gg-140
#3bed52
var(--calcite-color-vibrant-green-v-gg-140)
v-gg-160
#00b81b
var(--calcite-color-vibrant-green-v-gg-160)
v-gg-180
#00a118
var(--calcite-color-vibrant-green-v-gg-180)
v-yg-120
#d7ff73
var(--calcite-color-vibrant-yellow-green-v-yg-120)
v-yg-140
#bbed3b
var(--calcite-color-vibrant-yellow-green-v-yg-140)
v-yg-160
#96cc00
var(--calcite-color-vibrant-yellow-green-v-yg-160)
v-yg-180
#7fab00
var(--calcite-color-vibrant-yellow-green-v-yg-180)
v-yy-120
#fff766
var(--calcite-color-vibrant-yellow-v-yy-120)
v-yy-140
#ffee33
var(--calcite-color-vibrant-yellow-v-yy-140)
v-yy-160
#f5d000
var(--calcite-color-vibrant-yellow-v-yy-160)
v-yy-180
#ebba17
var(--calcite-color-vibrant-yellow-v-yy-180)
v-oy-120
#ffb54d
var(--calcite-color-vibrant-orange-yellow-v-oy-120)
v-oy-140
#ff9500
var(--calcite-color-vibrant-orange-yellow-v-oy-140)
v-oy-160
#e68600
var(--calcite-color-vibrant-orange-yellow-v-oy-160)
v-oy-180
#d17300
var(--calcite-color-vibrant-orange-yellow-v-oy-180)
v-ro-120
#ff824d
var(--calcite-color-vibrant-red-orange-v-ro-120)
v-ro-140
#ff4d00
var(--calcite-color-vibrant-red-orange-v-ro-140)
v-ro-160
#de4300
var(--calcite-color-vibrant-red-orange-v-ro-160)
v-ro-180
#c93b00
var(--calcite-color-vibrant-red-orange-v-ro-180)
v-rr-120
#ff624d
var(--calcite-color-vibrant-red-v-rr-120)
v-rr-140
#ff0015
var(--calcite-color-vibrant-red-v-rr-140)
v-rr-160
#d90012
var(--calcite-color-vibrant-red-v-rr-160)
v-rr-180
#b3000f
var(--calcite-color-vibrant-red-v-rr-180)
v-pk-120
#ff66c2
var(--calcite-color-vibrant-pink-v-pk-120)
v-pk-140
#ff19a4
var(--calcite-color-vibrant-pink-v-pk-140)
v-pk-160
#d11486
var(--calcite-color-vibrant-pink-v-pk-160)
v-pk-180
#c00073
var(--calcite-color-vibrant-pink-v-pk-180)
v-vr-120
#ea80ff
var(--calcite-color-vibrant-violet-red-v-vr-120)
v-vr-140
#dd33ff
var(--calcite-color-vibrant-violet-red-v-vr-140)
v-vr-160
#ac08cc
var(--calcite-color-vibrant-violet-red-v-vr-160)
v-vr-180
#83009e
var(--calcite-color-vibrant-violet-red-v-vr-180)
v-vv-120
#b580ff
var(--calcite-color-vibrant-violet-v-vv-120)
v-vv-140
#974dff
var(--calcite-color-vibrant-violet-v-vv-140)
v-vv-160
#8129ff
var(--calcite-color-vibrant-violet-v-vv-160)
v-vv-180
#6a0be6
var(--calcite-color-vibrant-violet-v-vv-180)
Dark
d-gg-410
#44ed51
var(--calcite-color-dark-green-d-gg-410)
d-gg-420
#36da43
var(--calcite-color-dark-green-d-gg-420)
d-gg-430
#11ad1d
var(--calcite-color-dark-green-d-gg-430)
d-yy-410
#ffe24d
var(--calcite-color-dark-yellow-d-yy-410)
d-yy-420
#ffc900
var(--calcite-color-dark-yellow-d-yy-420)
d-yy-430
#f4b000
var(--calcite-color-dark-yellow-d-yy-430)
d-rr-410
#ff7465
var(--calcite-color-dark-red-d-rr-410)
d-rr-420
#fe583e
var(--calcite-color-dark-red-d-rr-420)
d-rr-430
#f3381b
var(--calcite-color-dark-red-d-rr-430)
d-bb-410
#47bbff
var(--calcite-color-dark-blue-d-bb-410)
d-bb-420
#00a0ff
var(--calcite-color-dark-blue-d-bb-420)
d-bb-430
#0087d7
var(--calcite-color-dark-blue-d-bb-430)

Shadow

Name
Value
Platform tokenscsscssscsses6
0
0 0 0 0 rgba(0, 0, 0, 0)
var(--calcite-shadow-0)
1
0 2px 8px 0 rgba(0, 0, 0, 0.04)
var(--calcite-shadow-1)
2
0 4px 16px 0 rgba(0, 0, 0, 0.08)
var(--calcite-shadow-2)
3
0 4px 20px 0 rgba(0, 0, 0, 0.08)
var(--calcite-shadow-3)
4
0 12px 32px -2px rgba(0, 0, 0, 0.1)
var(--calcite-shadow-4)

Opacity

Name
Value
Platform tokenscsscssscsses6
0
0
var(--calcite-opacity-0)
4
0.04
var(--calcite-opacity-4)
8
0.08
var(--calcite-opacity-8)
10
0.1
var(--calcite-opacity-10)
12
0.12
var(--calcite-opacity-12)
16
0.16
var(--calcite-opacity-16)
20
0.2
var(--calcite-opacity-20)
30
0.3
var(--calcite-opacity-30)
40
0.4
var(--calcite-opacity-40)
50
0.5
var(--calcite-opacity-50)
60
0.6
var(--calcite-opacity-60)
70
0.7
var(--calcite-opacity-70)
80
0.8
var(--calcite-opacity-80)
85
0.85
var(--calcite-opacity-85)
90
0.9
var(--calcite-opacity-90)
92
0.92
var(--calcite-opacity-92)
96
0.96
var(--calcite-opacity-96)
100
1
var(--calcite-opacity-100)

Stacking

Name
Value
Platform tokenscsscssscsses6
0
-999999
var(--calcite-z-index-0)
1
1
var(--calcite-z-index-1)
3
300
var(--calcite-z-index-3)
4
400
var(--calcite-z-index-4)
5
500
var(--calcite-z-index-5)
6
600
var(--calcite-z-index-6)
7
700
var(--calcite-z-index-7)
8
800
var(--calcite-z-index-8)
9
900
var(--calcite-z-index-9)

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.