Kleurenpallet
Het volledige kleurenpallet met alle beschikbare tinten. Dit zijn de primitieve kleuren die als basis dienen voor de semantische tokens. Klik op een kleur om de hex waarde te kopieren.
Over het pallet
Het kleurenpallet bestaat uit 15 kleurschalen, elk met tinten van licht (50) naar donker (900/950). Deze primitieve kleuren worden niet direct in componenten gebruikt, maar vormen de basis voor de semantische kleur tokens pagina.
Neutral
0#ffffff
50#fafafa
100#f5f5f5
200#e5e5e5
300#d4d4d4
400#a3a3a3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0a0a0a
Navy
50#e8eaf2
100#c5c9db
200#9ea5c2
300#7680a9
400#525d8f
500#2e3b75
600#242e5c
700#1a2244
800#11162d
900#0a0e1f
950#060813
Blue
50#eff6ff
100#dbeafe
200#bfdbfe
300#93c5fd
400#60a5fa
500#3b82f6
600#2563eb
700#1d4ed8
800#1e40af
900#1e3a8a
Purple
50#f5f3ff
100#ede9fe
200#ddd6fe
300#c4b5fd
400#a78bfa
500#8b5cf6
600#7c3aed
700#6d28d9
800#5b21b6
900#4c1d95
Orange
50#fff7ed
100#ffedd5
200#fed7aa
300#fdba74
400#fb923c
500#f97316
600#ea580c
700#c2410c
800#9a3412
900#7c2d12
Amber
50#fffbeb
100#fef3c7
200#fde68a
300#fcd34d
400#fbbf24
500#f59e0b
600#d97706
700#b45309
800#92400e
900#78350f
Yellow
50#fefce8
100#fef9c3
200#fef08a
300#fde047
400#facc15
500#eab308
600#ca8a04
700#a16207
800#854d0e
900#713f12
Green
50#f0fdf4
100#dcfce7
200#bbf7d0
300#86efac
400#4ade80
500#22c55e
600#16a34a
700#15803d
800#166534
900#14532d
Red
50#fef2f2
100#fee2e2
200#fecaca
300#fca5a5
400#f87171
500#ef4444
600#dc2626
700#b91c1c
800#991b1b
900#7f1d1d
Pink
50#fdf2f8
100#fce7f3
200#fbcfe8
300#f9a8d4
400#f472b6
500#ec4899
600#db2777
700#be185d
800#9d174d
900#831843
Teal
50#f0fdfa
100#ccfbf1
200#99f6e4
300#5eead4
400#2dd4bf
500#14b8a6
600#0d9488
700#0f766e
800#115e59
900#134e4a
Indigo
50#efedfc
100#e0dcf9
200#c5bdf4
300#9a8dec
400#6b58e4
500#3b23d7
600#311db4
700#281891
800#1e126e
900#140c4b
950#0c072c
Magenta
50#fdedf5
100#fadbea
200#f6bcd8
300#ef8abb
400#e8549c
500#e22e84
600#b81966
700#941452
800#700f3e
900#4c0a2a
950#2d0619
Saffron
50#fff8eb
100#fff0d6
200#ffe3b2
300#ffce7a
400#ffb83d
500#f29800
600#c27b00
700#996100
800#754a00
900#4c3000
950#2e1d00
Jade
50#f0f9f7
100#e2f4ee
200#c8eadf
300#a0dac8
400#73c9af
500#45b191
600#388f75
700#2c725d
800#225848
900#173b30
950#0e251e