Colour Palette

Dashvar provides CSS Variables for different carefully chosen colours to be distinct from each other and flexible to support different use cases.

Gray

var(--white)
#ffffff
var(--gray-50)
#f9fafb
var(--gray-100)
#f3f4f6
var(--gray-200)
#e5e7eb
var(--gray-300)
#d1d5db
var(--gray-400)
#9ca3af
var(--gray-500)
#6b7280
var(--gray-600)
#4b5563
var(--gray-700)
#374151
var(--gray-800)
#1f2937
var(--gray-900)
#111827
var(--black)
#000000

Red

var(--red-50)
#fef2f2
var(--red-100)
#fee2e2
var(--red-200)
#fecaca
var(--red-300)
#fca5a5
var(--red-400)
#f87171
var(--red-500)
#ef4444
var(--red-600)
#dc2626
var(--red-700)
#b91c1c
var(--red-800)
#991b1b
var(--red-900)
#7f1d1d

Yellow

var(--yellow-50)
#fffbeb
var(--yellow-100)
#fef3c7
var(--yellow-200)
#fde68a
var(--yellow-300)
#fcd34d
var(--yellow-400)
#fbbf24
var(--yellow-500)
#f59e0b
var(--yellow-600)
#d97706
var(--yellow-700)
#b45309
var(--yellow-800)
#92400e
var(--yellow-900)
#78350f

Green

var(--green-50)
#ecfdf5
var(--green-100)
#d1fae5
var(--green-200)
#a7f3d0
var(--green-300)
#6ee7b7
var(--green-400)
#34d399
var(--green-500)
#10b981
var(--green-600)
#059669
var(--green-700)
#047857
var(--green-800)
#065f46
var(--green-900)
#064e3b

Blue

var(--blue-50)
#eff6ff
var(--blue-100)
#dbeafe
var(--blue-200)
#bfdbfe
var(--blue-300)
#93c5fd
var(--blue-400)
#60a5fa
var(--blue-500)
#3b82f6
var(--blue-600)
#2563eb
var(--blue-700)
#1d4ed8
var(--blue-800)
#1e40af
var(--blue-900)
#1e3a8a

Indigo

var(--indigo-50)
#eef2ff
var(--indigo-100)
#e0e7ff
var(--indigo-200)
#c7d2fe
var(--indigo-300)
#a5b4fc
var(--indigo-400)
#818cf8
var(--indigo-500)
#6366f1
var(--indigo-600)
#4f46e5
var(--indigo-700)
#4338ca
var(--indigo-800)
#3730a3
var(--indigo-900)
#312e81

Purple

var(--purple-50)
#f5f3ff
var(--purple-100)
#ede9fe
var(--purple-200)
#ddd6fe
var(--purple-300)
#c4b5fd
var(--purple-400)
#a78bfa
var(--purple-500)
#8b5cf6
var(--purple-600)
#7c3aed
var(--purple-700)
#6d28d9
var(--purple-800)
#5b21b6
var(--purple-900)
#4c1d95

Pink

var(--pink-50)
#fdf2f8
var(--pink-100)
#fce7f3
var(--pink-200)
#fbcfe8
var(--pink-300)
#f9a8d4
var(--pink-400)
#f472b6
var(--pink-500)
#ec4899
var(--pink-600)
#db2777
var(--pink-700)
#be185d
var(--pink-800)
#9d174d
var(--pink-900)
#831843

Interactive Example

Feel free to play with this interactive example to get comfortable with the tool.