Color Palette
17 color scales × 10 shades each (-0 lightest through -9 darkest). 16 scales include semantic tokens — -filled, -light, and -outline — that automatically shift shades between light and dark mode.
Color Scales
All raw palette values are available as --dv-color-{name}-{0-9}. These are static hex values that never change with the theme — use them when you need a specific shade directly.
Dark
0#c9c9c9
1#a6a6a6
2#7f7f7f
3#595959
4#404040
5#2b2b2b
6#1c1c1c
7#0d0d0d
8#0a0a0a
9#050505
White
0#ffffff
1#f2f2f2
2#e6e6e6
3#d9d9d9
4#cccccc
5#bfbfbf
6#b3b3b3
7#a6a6a6
8#999999
9#8c8c8c
Black
0#090909
1#080808
2#070707
3#060606
4#050505
5#040404
6#030303
7#020202
8#010101
9#000000
Gray
0#f8f9fa
1#f1f3f5
2#e9ecef
3#dee2e6
4#ced4da
5#adb5bd
6#868e96
7#495057
8#343a40
9#212529
Red
0#fff5f5
1#ffe3e3
2#ffc9c9
3#ffa8a8
4#ff8787
5#ff6b6b
6#fa5252
7#f03e3e
8#e03131
9#c92a2a
Crimson
0#fff0f3
1#ffd8e1
2#ffb0c0
3#ff8aa3
4#ff6385
5#ff406a
6#f52a52
7#e91c40
8#d91030
9#c90a2a
Pink
0#fff0f6
1#ffdeea
2#fcc2d7
3#faa2c1
4#f883ac
5#f565a0
6#f0478e
7#e62e7a
8#d61c6f
9#b91c59
Grape
0#f8f0fc
1#f3d9fa
2#eebefa
3#e599f7
4#da77f2
5#cc5de8
6#be4bdb
7#ae3ec9
8#9c36b5
9#862e9c
Violet
0#f3f0ff
1#e5dbff
2#d0bfff
3#b197fc
4#9775fa
5#845ef7
6#7950f2
7#7048e8
8#6741d9
9#5f3dc4
Indigo
0#edf2ff
1#dbe4ff
2#bac8ff
3#9aa5ff
4#7d87ff
5#606cd8
6#4a56c9
7#3a44b0
8#2c3399
9#1e2280
Blue
0#e7f5ff
1#d0ebff
2#a5d8ff
3#74c0fc
4#4dabf7
5#339af0
6#228be6
7#1c7ed6
8#1971c2
9#1864ab
Cyan
0#e3fafc
1#c5f6fa
2#99e9f2
3#66d9e8
4#3bc9db
5#22b8cf
6#15aabf
7#1098ad
8#0c8599
9#0b7285
Teal
0#e6fcf5
1#c3fae8
2#96f2d7
3#63e6be
4#38d9a9
5#20c997
6#12b886
7#0ca678
8#099268
9#087f5b
Green
0#ebfbee
1#d3f9d8
2#b2f2bb
3#8ce99a
4#69db7c
5#51cf66
6#40c057
7#37b24d
8#2f9e44
9#2b8a3e
Lime
0#f4fce3
1#e9fac8
2#d8f5a2
3#c0eb75
4#a9e34b
5#94d82d
6#82c91e
7#74b816
8#66a80f
9#5c940d
Yellow
0#fff9db
1#fff3bf
2#ffec99
3#ffe066
4#ffd43b
5#fcc419
6#fab005
7#f59f00
8#f08c00
9#e67700
Orange
0#fff4e6
1#ffe8cc
2#ffd8a8
3#ffc078
4#ffa94d
5#ff922b
6#fd7e14
7#f76707
8#e8590c
9#d9480f
Semantic Variants
16 scales have semantic variant tokens that components consume. Each exposes a filled (solid background), light (tinted background), and outline (border only) variant. Toggle the theme in the sidebar to see how each shifts between modes.
White
filled
light
outline
Black
filled
light
outline
Gray
filled
light
outline
Red
filled
light
outline
Crimson
filled
light
outline
Pink
filled
light
outline
Grape
filled
light
outline
Violet
filled
light
outline
Indigo
filled
light
outline
Blue
filled
light
outline
Cyan
filled
light
outline
Teal
filled
light
outline
Green
filled
light
outline
Lime
filled
light
outline
Yellow
filled
light
outline
Orange
filled
light
outline
Surface & Interface Tokens
These tokens define the base UI surfaces and switch between light and dark mode automatically via the data-dv-color-scheme attribute on <html>.
Light Mode
--dv-color-body
#ffffff — Page background
--dv-color-surface
#f8f9fa — Sidebar, panels, elevated surfaces
--dv-color-text
#212529 — Primary body text
--dv-color-border
#dee2e6 — Borders & dividers
--dv-color-dimmed
#868e96 — Secondary / muted text
--dv-color-bright
#000000 — Maximum contrast text
--dv-color-default
#ffffff — Default button / input fill
--dv-color-default-border
#ced4da — Default input border
--dv-color-default-color
#212529 — Default element text
Dark Mode
--dv-color-body
#1a1b1e — Page background
--dv-color-surface
#25262b — Sidebar, panels, elevated surfaces
--dv-color-text
#c1c2c5 — Primary body text
--dv-color-border
#373a40 — Borders & dividers
--dv-color-dimmed
#adb5bd — Secondary / muted text
--dv-color-bright
#ffffff — Maximum contrast text
--dv-color-default
#25262b — Default button / input fill
--dv-color-default-border
#373a40 — Default input border
--dv-color-default-color
#c1c2c5 — Default element text
CSS Variable Reference
| Pattern | Example | Notes |
|---|---|---|
--dv-color-{name}-{0-9} | --dv-color-blue-6 | Raw palette shade — static, never changes with theme |
--dv-color-{name}-filled | --dv-color-blue-filled | Filled variant background (shade 6 light / shade 7 dark) |
--dv-color-{name}-filled-hover | --dv-color-blue-filled-hover | Filled variant hover state |
--dv-color-{name}-filled-color | --dv-color-blue-filled-color | Text color on filled background (usually white) |
--dv-color-{name}-light | --dv-color-blue-light | Light variant background (shade 0 in light / rgba 0.15 in dark) |
--dv-color-{name}-light-hover | --dv-color-blue-light-hover | Light variant hover state |
--dv-color-{name}-light-color | --dv-color-blue-light-color | Text color on light background (shade 7 light / shade 2–4 dark) |
--dv-color-{name}-outline | --dv-color-blue-outline | Outline variant border color |
--dv-color-{name}-outline-hover | --dv-color-blue-outline-hover | Background on hover for outline variant |
--dv-color-{name}-outline-color | --dv-color-blue-outline-color | Text color for outline variant |
--dv-color-primary-* | --dv-color-primary-filled | Alias pointing to the active primary color (default: blue) |