Wide, single-column sheets for every named palette in dartwork-mpl. Each preview
below is full-width so the swatch labels stay readable on both desktop and
mobile.
Palette sheets
dartwork Color. 23 hand-curated categorical palettes built specifically for
data visualization. Use dc.vivid0–dc.vivid5 for high-contrast
presentations, dc.pastel0–dc.pastel5 for soft backgrounds, or
dc.acid0–dc.acid5 for bold fluorescent accents.
dartwork Color
dc.autumn
0#EEC643
1#DA7B5C
2#A77B5C
3#BC4749
4#386641
5#6A4C3C
dc.cyber
0#4CC9F0
1#00B4D8
2#F72585
3#4361EE
4#7209B7
5#3A0CA3
dc.forest
0#95D5B2
1#74C69D
2#52B788
3#B5838D
4#2D6A4F
5#1B4332
dc.nordic
0#B2BEC3
1#00B894
2#0984E3
3#D63031
4#636E72
5#2D3436
dc.ocean
0#62B6CB
1#1B98E0
2#00838F
3#4A6FA5
4#0B3D91
5#2E4057
dc.pop
0#FFCA3A
1#8AC926
2#FF924C
3#FF595E
4#1982C4
5#6A4C93
dc.sunset
0#FFC857
1#F28C28
2#E63946
3#457B9D
4#6B4D57
5#264653
dc.vivid
0#F59E0B
1#06B6D4
2#16A34A
3#DC2626
4#9333EA
5#2563EB
OpenColor. Balanced neutrals and calm hues for dashboards and UI frames. Even
weight steps make layered backgrounds straightforward.
OpenColor
oc.blue
0#e7f5ff
1#d0ebff
2#a5d8ff
3#74c0fc
4#4dabf7
5#339af0
6#228be6
7#1c7ed6
8#1971c2
9#1864ab
oc.cyan
0#e3fafc
1#c5f6fa
2#99e9f2
3#66d9e8
4#3bc9db
5#22b8cf
6#15aabf
7#1098ad
8#0c8599
9#0b7285
oc.grape
0#f8f0fc
1#f3d9fa
2#eebefa
3#e599f7
4#da77f2
5#cc5de8
6#be4bdb
7#ae3ec9
8#9c36b5
9#862e9c
oc.gray
0#f8f9fa
1#f1f3f5
2#e9ecef
3#dee2e6
4#ced4da
5#adb5bd
6#868e96
7#495057
8#343a40
9#212529
oc.green
0#ebfbee
1#d3f9d8
2#b2f2bb
3#8ce99a
4#69db7c
5#51cf66
6#40c057
7#37b24d
8#2f9e44
9#2b8a3e
oc.indigo
0#edf2ff
1#dbe4ff
2#bac8ff
3#91a7ff
4#748ffc
5#5c7cfa
6#4c6ef5
7#4263eb
8#3b5bdb
9#364fc7
oc.lime
0#f4fce3
1#e9fac8
2#d8f5a2
3#c0eb75
4#a9e34b
5#94d82d
6#82c91e
7#74b816
8#66a80f
9#5c940d
oc.orange
0#fff4e6
1#ffe8cc
2#ffd8a8
3#ffc078
4#ffa94d
5#ff922b
6#fd7e14
7#f76707
8#e8590c
9#d9480f
oc.pink
0#fff0f6
1#ffdeeb
2#fcc2d7
3#faa2c1
4#f783ac
5#f06595
6#e64980
7#d6336c
8#c2255c
9#a61e4d
oc.purple
0#f6f0fe
1#ecdafc
2#e0bffc
3#cc98fa
4#ba76f6
5#aa5ef0
6#9e4ee6
7#9243d8
8#853bc7
9#7635b0
oc.red
0#fff5f5
1#ffe3e3
2#ffc9c9
3#ffa8a8
4#ff8787
5#ff6b6b
6#fa5252
7#f03e3e
8#e03131
9#c92a2a
oc.teal
0#e6fcf5
1#c3fae8
2#96f2d7
3#63e6be
4#38d9a9
5#20c997
6#12b886
7#0ca678
8#099268
9#087f5b
oc.violet
0#f3f0ff
1#e5dbff
2#d0bfff
3#b197fc
4#9775fa
5#845ef7
6#7950f2
7#7048e8
8#6741d9
9#5f3dc4
oc.yellow
0#fff9db
1#fff3bf
2#ffec99
3#ffe066
4#ffd43b
5#fcc419
6#fab005
7#f59f00
8#f08c00
9#e67700
Tailwind. The broadest weight range (50–950) for precise contrast tuning.
Perfect when you already think in Tailwind classes.
Tailwind
tw.amber
50#fffbeb
100#fef3c7
200#fde68a
300#fcd34d
400#fbbf24
500#f59e0b
600#d97706
700#b45309
800#92400e
900#78350f
950#451a03
tw.blue
50#eff6ff
100#dbeafe
200#bfdbfe
300#93c5fd
400#60a5fa
500#3b82f6
600#2563eb
700#1d4ed8
800#1e40af
900#1e3a8a
950#172554
tw.cyan
50#ecfeff
100#cffafe
200#a5f3fc
300#67e8f9
400#22d3ee
500#06b6d4
600#0891b2
700#0e7490
800#155e75
900#164e63
950#083344
tw.emerald
50#ecfdf5
100#d1fae5
200#a7f3d0
300#6ee7b7
400#34d399
500#10b981
600#059669
700#047857
800#065f46
900#064e3b
950#022c22
tw.fuchsia
50#fdf4ff
100#fae8ff
200#f5d0fe
300#f0abfc
400#e879f9
500#d946ef
600#c026d3
700#a21caf
800#86198f
900#701a75
950#4a044e
tw.gray
50#f9fafb
100#f3f4f6
200#e5e7eb
300#d1d5db
400#9ca3af
500#6b7280
600#4b5563
700#374151
800#1f2937
900#111827
950#030712
tw.green
50#f0fdf4
100#dcfce7
200#bbf7d0
300#86efac
400#4ade80
500#22c55e
600#16a34a
700#15803d
800#166534
900#14532d
950#052e16
tw.indigo
50#eef2ff
100#e0e7ff
200#c7d2fe
300#a5b4fc
400#818cf8
500#6366f1
600#4f46e5
700#4338ca
800#3730a3
900#312e81
950#1e1b4b
tw.lime
50#f7fee7
100#ecfccb
200#d9f99d
300#bef264
400#a3e635
500#84cc16
600#65a30d
700#4d7c0f
800#3f6212
900#365314
950#1a2e05
tw.neutral
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
tw.orange
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
950#431407
tw.pink
50#fdf2f8
100#fce7f3
200#fbcfe8
300#f9a8d4
400#f472b6
500#ec4899
600#db2777
700#be185d
800#9d174d
900#831843
950#500724
tw.purple
50#faf5ff
100#f3e8ff
200#e9d5ff
300#d8b4fe
400#c084fc
500#a855f7
600#9333ea
700#7e22ce
800#6b21a8
900#581c87
950#3b0764
tw.red
50#fef2f2
100#fee2e2
200#fecaca
300#fca5a5
400#f87171
500#ef4444
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
950#450a0a
tw.rose
50#fff1f2
100#ffe4e6
200#fecdd3
300#fda4af
400#fb7185
500#f43f5e
600#e11d48
700#be123c
800#9f1239
900#881337
950#4c0519
tw.sky
50#f0f9ff
100#e0f2fe
200#bae6fd
300#7dd3fc
400#38bdf8
500#0ea5e9
600#0284c7
700#0369a1
800#075985
900#0c4a6e
950#082f49
tw.slate
50#f8fafc
100#f1f5f9
200#e2e8f0
300#cbd5e1
400#94a3b8
500#64748b
600#475569
700#334155
800#1e293b
900#0f172a
950#020617
tw.stone
50#fafaf9
100#f5f5f4
200#e7e5e4
300#d6d3d1
400#a8a29e
500#78716c
600#57534e
700#44403c
800#292524
900#1c1917
950#0c0a09
tw.teal
50#f0fdfa
100#ccfbf1
200#99f6e4
300#5eead4
400#2dd4bf
500#14b8a6
600#0d9488
700#0f766e
800#115e59
900#134e4a
950#042f2e
tw.violet
50#f5f3ff
100#ede9fe
200#ddd6fe
300#c4b5fd
400#a78bfa
500#8b5cf6
600#7c3aed
700#6d28d9
800#5b21b6
900#4c1d95
950#2e1065
tw.yellow
50#fefce8
100#fef9c3
200#fef08a
300#fde047
400#facc15
500#eab308
600#ca8a04
700#a16207
800#854d0e
900#713f12
950#422006
tw.zinc
50#fafafa
100#f4f4f5
200#e4e4e7
300#d4d4d8
400#a1a1aa
500#71717a
600#52525b
700#3f3f46
800#27272a
900#18181b
950#09090b
Material Design. Saturated primaries and secondaries that read clearly on
white backgrounds, with consistent 50–900 steps.
Material Design
md.amber
50#fff8e1
100#ffecb3
200#ffe082
300#ffd54f
400#ffca28
500#ffc107
600#ffb300
700#ffa000
800#ff8f00
900#ff6f00
md.blue
50#e3f2fd
100#bbdefb
200#90caf9
300#64b5f6
400#42a5f5
500#2196f3
600#1e88e5
700#1976d2
800#1565c0
900#0d47a1
md.bluegrey
50#eceff1
100#cfd8dc
200#b0bec5
300#90a4ae
400#78909c
500#607d8b
600#546e7a
700#455a64
800#37474f
900#263238
md.brown
50#efebe9
100#d7ccc8
200#bcaaa4
300#a1887f
400#8d6e63
500#795548
600#6d4c41
700#5d4037
800#4e342e
900#3e2723
md.cyan
50#e0f7fa
100#b2ebf2
200#80deea
300#4dd0e1
400#26c6da
500#00bcd4
600#00acc1
700#0097a7
800#00838f
900#006064
md.deeporange
50#fbe9e7
100#ffccbc
200#ffab91
300#ff8a65
400#ff7043
500#ff5722
600#f4511e
700#e64a19
800#d84315
900#bf360c
md.deeppurple
50#ede7f6
100#d1c4e9
200#b39ddb
300#9575cd
400#7e57c2
500#673ab7
600#5e35b1
700#512da8
800#4527a0
900#311b92
md.green
50#e8f5e9
100#c8e6c9
200#a5d6a7
300#81c784
400#66bb6a
500#4caf50
600#43a047
700#388e3c
800#2e7d32
900#1b5e20
md.grey
50#fafafa
100#f5f5f5
200#eeeeee
300#e0e0e0
400#bdbdbd
500#9e9e9e
600#757575
700#616161
800#424242
900#212121
md.indigo
50#e8eaf6
100#c5cae9
200#9fa8da
300#7986cb
400#5c6bc0
500#3f51b5
600#3949ab
700#303f9f
800#283593
900#1a237e
md.lightblue
50#e1f5fe
100#b3e5fc
200#81d4fa
300#4fc3f7
400#29b6f6
500#03a9f4
600#039be5
700#0288d1
800#0277bd
900#01579b
md.lightgreen
50#f1f8e9
100#dcedc8
200#c5e1a5
300#aed581
400#9ccc65
500#8bc34a
600#7cb342
700#689f38
800#558b2f
900#33691e
md.lime
50#f9fbe7
100#f0f4c3
200#e6ee9c
300#dce775
400#d4e157
500#cddc39
600#c0ca33
700#afb42b
800#9e9d24
900#827717
md.orange
50#fff3e0
100#ffe0b2
200#ffcc80
300#ffb74d
400#ffa726
500#ff9800
600#fb8c00
700#f57c00
800#ef6c00
900#e65100
md.pink
50#fce4ec
100#f8bbd0
200#f48fb1
300#f06292
400#ec407a
500#e91e63
600#d81b60
700#c2185b
800#ad1457
900#880e4f
md.purple
50#f3e5f5
100#e1bee7
200#ce93d8
300#ba68c8
400#ab47bc
500#9c27b0
600#8e24aa
700#7b1fa2
800#6a1b9a
900#4a148c
md.red
50#ffebee
100#ffcdd2
200#ef9a9a
300#e57373
400#ef5350
500#f44336
600#e53935
700#d32f2f
800#c62828
900#b71c1c
md.teal
50#e0f2f1
100#b2dfdb
200#80cbc4
300#4db6ac
400#26a69a
500#009688
600#00897b
700#00796b
800#00695c
900#004d40
md.yellow
50#fffde7
100#fff9c4
200#fff59d
300#fff176
400#ffee58
500#ffeb3b
600#fdd835
700#fbc02d
800#f9a825
900#f57f17
Ant Design. Compact 1–10 weight system tuned for dense, data-heavy UIs with
both warm and cool tracks that stay legible in small marks.
Ant Design
ad.blue
1#e6f7ff
2#bae7ff
3#91d5ff
4#69c0ff
5#40a9ff
6#1890ff
7#096dd9
8#0050b3
9#003a8c
10#002766
ad.cyan
1#e6fffb
2#b5f5ec
3#87e8de
4#5cdbd3
5#36cfc9
6#13c2c2
7#08979c
8#006d75
9#00474f
10#002329
ad.geekblue
1#f0f5ff
2#d6e4ff
3#adc6ff
4#85a5ff
5#597ef7
6#2f54eb
7#1d39c4
8#10239e
9#061178
10#030852
ad.gold
1#fffbe6
2#fff1b8
3#ffe58f
4#ffd666
5#ffc53d
6#faad14
7#d48806
8#ad6800
9#874d00
10#613400
ad.green
1#f6ffed
2#d9f7be
3#b7eb8f
4#95de64
5#73d13d
6#52c41a
7#389e0d
8#237804
9#135200
10#092b00
ad.grey
1#fafafa
2#f5f5f5
3#f0f0f0
4#d9d9d9
5#bfbfbf
6#8c8c8c
7#595959
8#434343
9#262626
10#141414
ad.lime
1#fcffe6
2#f4ffb8
3#eaff8f
4#d3f261
5#bae637
6#a0d911
7#7cb305
8#5b8c00
9#3f6600
10#254000
ad.magenta
1#fff0f6
2#ffd6e7
3#ffadd2
4#ff85c0
5#f759ab
6#eb2f96
7#c41d7f
8#9e1068
9#780650
10#520339
ad.orange
1#fff7e6
2#ffe7ba
3#ffd591
4#ffc069
5#ffa940
6#fa8c16
7#d46b08
8#ad4e00
9#873800
10#612500
ad.purple
1#f9f0ff
2#efdbff
3#d3adf7
4#b37feb
5#9254de
6#722ed1
7#531dab
8#391085
9#22075e
10#120338
ad.red
1#fff1f0
2#ffccc7
3#ffa39e
4#ff7875
5#ff4d4f
6#f5222d
7#cf1322
8#a8071a
9#820014
10#5c0011
ad.volcano
1#fff2e8
2#ffd8bf
3#ffbb96
4#ff9c6e
5#ff7a45
6#fa541c
7#d4380d
8#ad2102
9#871400
10#610b00
ad.yellow
1#feffe6
2#ffffb8
3#fffb8f
4#fff566
5#ffec3d
6#fadb14
7#d4b106
8#ad8b00
9#876800
10#614700
Chakra UI. Soft, friendly ramps ideal for product illustrations, covers, and
muted backgrounds that do not overpower overlays.
Chakra UI
cu.blue
50#ebf8ff
100#bee3f8
200#90cdf4
300#63b3ed
400#4299e1
500#3182ce
600#2b77cb
700#2c5282
800#2a4365
900#1a365d
cu.cyan
50#edfdfd
100#c4f1f9
200#9decf9
300#76e4f7
400#0bc5ea
500#00b5d8
600#00a3c4
700#0987a0
800#086f83
900#065666
cu.gray
50#f7fafc
100#edf2f7
200#e2e8f0
300#cbd5e0
400#a0aec0
500#718096
600#4a5568
700#2d3748
800#1a202c
900#171923
cu.green
50#f0fff4
100#c6f6d5
200#9ae6b4
300#68d391
400#48bb78
500#38a169
600#2f855a
700#276749
800#22543d
900#1c4532
cu.orange
50#ffe5d9
100#ffccb3
200#ffb28c
300#ff9966
400#ff7f40
500#ff6600
600#cc5200
700#993d00
800#662900
900#331400
cu.pink
50#fff5f7
100#fed7e2
200#fbb6ce
300#f687b3
400#ed64a6
500#d53f8c
600#b83280
700#97266d
800#702459
900#521b41
cu.purple
50#faf5ff
100#e9d8fd
200#d6bcfa
300#b794f4
400#9f7aea
500#805ad5
600#6b46c1
700#553c9a
800#44337a
900#322659
cu.red
50#fed7d7
100#feb2b2
200#fc8181
300#f56565
400#e53e3e
500#c53030
600#9b2c2c
700#742a2a
800#63171b
900#521b1f
cu.teal
50#e6fffa
100#b2f5ea
200#81e6d9
300#4fd1c7
400#38b2ac
500#319795
600#2c7a7b
700#285e61
800#234e52
900#1d4044
cu.yellow
50#fffbeb
100#fef3c7
200#fde68a
300#fcd34d
400#fbbf24
500#f59e0b
600#d97706
700#b45309
800#92400e
900#78350f
Primer. GitHub-inspired neutrals with subtle tints and shadows—great when
you need desaturated accents with strong contrast.
Primer
pr.blue
0#cae8ff
1#a5d0ff
2#79c0ff
3#58a6ff
4#388bfd
5#1f6feb
6#1158c7
7#0d419d
8#0c2d6b
9#051d4d
pr.coral
0#ffddd2
1#ffc2b2
2#ffa28b
3#f78166
4#ea6045
5#cf462d
6#ac3220
7#872012
8#640d04
9#460701
pr.gray
0#f6f8fa
1#eaeef2
2#d0d7de
3#afb8c1
4#8c959f
5#6e7781
6#57606a
7#424a53
8#32383f
9#24292f
pr.green
0#aff5b4
1#7ee787
2#56d364
3#3fb950
4#2ea043
5#1a7f37
6#116329
7#0a4f1e
8#033a16
9#002d11
pr.orange
0#ffdfb6
1#ffc680
2#ffa657
3#f0883e
4#db6d28
5#bd561d
6#9b4215
7#762d0a
8#5a1e02
9#3d1300
pr.pink
0#ffd7eb
1#ffb3d8
2#fc8dc7
3#e85aad
4#bf3989
5#99286e
6#772057
7#611347
8#4d0336
9#3a0226
pr.purple
0#eddeff
1#e2c5ff
2#d2a8ff
3#bc8cff
4#a371f7
5#8957e5
6#6e40c9
7#553098
8#3c1e70
9#271052
pr.red
0#ffdcd7
1#ffc1ba
2#ffa198
3#ff7b72
4#f85149
5#da3633
6#b62324
7#8e1519
8#67060c
9#490202
pr.yellow
0#f8e3a1
1#f2cc60
2#e3b341
3#d29922
4#bb8009
5#9e6a03
6#845306
7#693e00
8#4b2900
9#341a00