## 色彩 {% raw %}

基础调色板

red
pink
purple
deep-purple
indigo
blue
light-blue
cyan
teal
green
light-green
lime
yellow
amber
orange
deep-orange
brown
grey
blue-grey
black

以上基础调色板均以背景色为示例，对应的字体颜色去掉bg即可。例如：背景色为.bg-grey，字体色为.grey

调色板

调色板包含了主色和不同色阶的颜色

具体使用

1、引入u.css文件

2、背景色使用样式类名为'.bg-颜色的名字'，字体使用样式类名为'.颜色的名字'。例如红色A700对应的背景色为.bg-red-A700,字体色为.red-A700

red
  • A700 / #d50000
  • A400 / #ff1744
  • A200 / #ff5252
  • A100 / #ff8a80
  • 900 / #b71c1c
  • 800 / #c62828
  • 700 / #d32f2f
  • 600 / #e53935
  • 500 / #f44336
  • 400 / #ef5350
  • 300 / #e57373
  • 200 / #ef9a9a
  • 100 / #ffcdd2
  • 50 / #ffebee
pink
  • a700 / #c51162
  • a400 / #f50057
  • a200 / #ff4081
  • a100 / #ff80ab
  • 900 / #880e4f
  • 800 / #ad1457
  • 700 / #c2185b
  • 600 / #d81b60
  • 500 / #e91e63
  • 400 / #ec407a
  • 300 / #f06292
  • 200 / #f48fb1
  • 100 / #f8bbd0
  • 50 / #fce4ec
purple
  • a700 / #aa00ff
  • a400 / #d500f9
  • a200 / #e040fb
  • a100 / #ea80fc
  • 900 / #4a148c
  • 800 / #6a1b9a
  • 700 / #7b1fa2
  • 600 / #8e24aa
  • 500 / #9c27b0
  • 400 / #ab47bc
  • 300 / #ba68c8
  • 200 / #ce93d8
  • 100 / #e1bee7
  • 50 / #f3e5f5
deep-purple
  • a700 / #6200ea
  • a400 / #651fff
  • a200 / #7c4dff
  • a100 / #b388ff
  • 900 / #311b92
  • 800 / #4527a0
  • 700 / #512da8
  • 600 / #5e35b1
  • 500 / #673ab7
  • 400 / #7e57c2
  • 300 / #9575cd
  • 200 / #b39ddb
  • 100 / #d1c4e9
  • 50 / #ede7f6
indigo
  • a700 / #304ffe
  • a400 / #3d5afe
  • a200 / #536dfe
  • a100 / #8c9eff
  • 900 / #1a237e
  • 800 / #283593
  • 700 / #303f9f
  • 600 / #3949ab
  • 500 / #3f51b5
  • 400 / #5c6bc0
  • 300 / #7986cb
  • 200 / #9fa8da
  • 100 / #c5cae9
  • 50 / #e8eaf6
blue
  • a700 / #2962ff
  • a400 / #2979ff
  • a200 / #448aff
  • a100 / #82b1ff
  • 900 / #0d47a1
  • 800 / #1565c0
  • 700 / #1976d2
  • 600 / #1e88e5
  • 500 / #2196f3
  • 400 / #42a5f5
  • 300 / #64b5f6
  • 200 / #90caf9
  • 100 / #bbdefb
  • 50 / #e3f2fd
light-blue
  • a700 / #0091ea
  • a400 / #00b0ff
  • a200 / #40c4ff
  • a100 / #80d8ff
  • 900 / #01579b
  • 800 / #0277bd
  • 700 / #0288d1
  • 600 / #039be5
  • 500 / #03a9f4
  • 400 / #29b6f6
  • 300 / #4fc3f7
  • 200 / #81d4fa
  • 100 / #b3e5fc
  • 50 / #e1f5fe
cyan
  • a700 / #00b8d4
  • a400 / #00e5ff
  • a200 / #18ffff
  • a100 / #84ffff
  • 900 / #006064
  • 800 / #00838f
  • 700 / #0097a7
  • 600 / #00acc1
  • 500 / #00bcd4
  • 400 / #26c6da
  • 300 / #4dd0e1
  • 200 / #80deea
  • 100 / #b2ebf2
  • 50 / #e0f7fa
teal
  • a700 / #00bfa5
  • a400 / #1de9b6
  • a200 / #64ffda
  • a100 / #a7ffeb
  • 900 / #004d40
  • 800 / #00695c
  • 700 / #00796b
  • 600 / #00897b
  • 500 / #009688
  • 400 / #26a69a
  • 300 / #4db6ac
  • 200 / #80cbc4
  • 100 / #b2dfdb
  • 50 / #e0f2f1
green
  • a700 / #00c853
  • a400 / #00e676
  • a200 / #69f0ae
  • a100 / #b9f6ca
  • 900 / #1b5e20
  • 800 / #2e7d32
  • 700 / #388e3c
  • 600 / #43a047
  • 500 / #4caf50
  • 400 / #66bb6a
  • 300 / #81c784
  • 200 / #a5d6a7
  • 100 / #c8e6c9
  • 50 / #e8f5e9
light-green
  • a700 / #64dd17
  • a400 / #76ff03
  • a200 / #b2ff59
  • a100 / #ccff90
  • 900 / #33691e
  • 800 / #558b2f
  • 700 / #689f38
  • 600 / #7cb342
  • 500 / #8bc34a
  • 400 / #9ccc65
  • 300 / #aed581
  • 200 / #c5e1a5
  • 100 / #dcedc8
  • 50 / #f1f8e9
lime
  • a700 / #aeea00
  • a400 / #c6ff00
  • a200 / #eeff41
  • a100 / #f4ff81
  • 900 / #827717
  • 800 / #9e9d24
  • 700 / #afb42b
  • 600 / #c0ca33
  • 500 / #cddc39
  • 400 / #d4e157
  • 300 / #dce775
  • 200 / #e6ee9c
  • 100 / #f0f4c3
  • 50 / #f9fbe7
yellow
  • a700 / #ffd600
  • a400 / #ffea00
  • a200 / #ffff00
  • a100 / #ffff8d
  • 900 / #f57f17
  • 800 / #f9a825
  • 700 / #fbc02d
  • 600 / #fdd835
  • 500 / #ffeb3b
  • 400 / #ffee58
  • 300 / #fff176
  • 200 / #fff59d
  • 100 / #fff9c4
  • 50 / #fffde7
amber
  • a700 / #ffab00
  • a400 / #ffc400
  • a200 / #ffd740
  • a100 / #ffe57f
  • 900 / #ff6f00
  • 800 / #ff8f00
  • 700 / #ffa000
  • 600 / #ffb300
  • 500 / #ffc107
  • 400 / #ffca28
  • 300 / #ffd54f
  • 200 / #ffe082
  • 100 / #ffecb3
  • 50 / #fff8e1
orange
  • a700 / #ff6d00
  • a400 / #ff9100
  • a200 / #ffab40
  • a100 / #ffd180
  • 900 / #e65100
  • 800 / #ef6c00
  • 700 / #f57c00
  • 600 / #fb8c00
  • 500 / #ff9800
  • 400 / #ffa726
  • 300 / #ffb74d
  • 200 / #ffcc80
  • 100 / #ffe0b2
  • 50 / #fff3e0
deep-orange
  • a700 / #dd2c00
  • a400 / #ff3d00
  • a200 / #ff6e40
  • a100 / #ff9e80
  • 900 / #bf360c
  • 800 / #d84315
  • 700 / #e64a19
  • 600 / #f4511e
  • 500 / #ff5722
  • 400 / #ff7043
  • 300 / #ff8a65
  • 200 / #ffab91
  • 100 / #ffccbc
  • 50 / #fbe9e7
brown
  • 900 / #3e2723
  • 800 / #4e342e
  • 700 / #5d4037
  • 600 / #6d4c41
  • 500 / #795548
  • 400 / #8d6e63
  • 300 / #a1887f
  • 200 / #bcaaa4
  • 100 / #d7ccc8
  • 50 / #efebe9
grey
  • 900 / #212121
  • 800 / #424242
  • 700 / #616161
  • 600 / #757575
  • 500 / #9e9e9e
  • 400 / #bdbdbd
  • 300 / #e0e0e0
  • 200 / #eeeeee
  • 100 / #f5f5f5
  • 50 / #fafafa
blue-grey
  • 900 / #263238
  • 800 / #37474f
  • 700 / #455a64
  • 600 / #546e7a
  • 500 / #607d8b
  • 400 / #78909c
  • 300 / #90a4ae
  • 200 / #b0bec5
  • 100 / #cfd8dc
  • 50 / #eceff1
{% endraw %}