首先确定了品牌色：#0073FF，科技蓝

采用四方色配色法（在色轮上用正方形对应的4个颜色）来选择辅助色，使用Adobe的色轮工具：色輪、調色盤產生器 | Adobe Color，色彩调和选择正方形，在下方的左侧第一个输入框输入品牌色，得到如下颜色

#57C3C2，#DEF05D，#B35DF0，#F0925D，#89709B，#647070

再使用Ant Design的主题编辑器：主题编辑器 - Ant Design (antgroup.com)

每一种颜色作为品牌色Color Primary，结合梯度变量Map Token得到一系列颜色

品牌色colorPrimary：#57c3c2

主色浅色背景色colorPrimaryBg：#f0fffc

主色浅色背景悬浮态colorPrimaryBgHover：#e6f5f3

主色描边色colorPrimaryBorder：#d8e8e6

主色描边色悬浮态colorPrimaryBorderHover：#a9dbd7

主色悬浮态colorPrimaryHover：#7ecfcb

主色colorPrimary：#57c3c2

主色激活态colorPrimaryActive：#3e9a9c

主色文本悬浮态colorPrimaryTextHover：#7ecfcb

主色文本colorPrimaryText：#57c3c2

主色文本激活态colorPrimaryTextActive：#3e9a9c

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#172223
主色浅色背景悬浮态colorPrimaryBgHover：#1f3636
主色描边色colorPrimaryBorder：#284948
主色描边色悬浮态colorPrimaryBorderHover：#326362
主色悬浮态colorPrimaryHover：#73bcb9
主色colorPrimary：#4da9a8

主色激活态colorPrimaryActive：#408685
主色文本悬浮态colorPrimaryTextHover：#73bcb9
主色文本colorPrimaryText：#4da9a8
主色文本激活态colorPrimaryTextActive：#408685

 

辅色AcolorPrimary：#DEF05D
主色浅色背景色colorPrimaryBg：#fffef0
主色浅色背景悬浮态colorPrimaryBgHover：#fffff0
主色描边色colorPrimaryBorder：#feffde
主色描边色悬浮态colorPrimaryBorderHover：#fbffb5
主色悬浮态colorPrimaryHover：#f3fc8b
主色colorPrimary：#def05d
主色激活态colorPrimaryActive：#b6c944
主色文本悬浮态colorPrimaryTextHover：#f3fc8b
主色文本colorPrimaryText：#def05d
主色文本激活态colorPrimaryTextActive：#b6c944

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#262918

主色浅色背景悬浮态colorPrimaryBgHover：#3d4120

主色描边色colorPrimaryBorder：#51562a

主色描边色悬浮态colorPrimaryBorderHover：#6f7735

主色悬浮态colorPrimaryHover：#dde57f

主色colorPrimary：#c0cf52

主色激活态colorPrimaryActive：#97a343

主色文本悬浮态colorPrimaryTextHover：#dde57f

主色文本colorPrimaryText：#c0cf52

主色文本激活态colorPrimaryTextActive：#97a343

 

辅色BcolorPrimary：#B35DF0
主色浅色背景色colorPrimaryBg：#fbf0ff
主色浅色背景悬浮态colorPrimaryBgHover：#fbf0ff
主色描边色colorPrimaryBorder：#f5deff
主色描边色悬浮态colorPrimaryBorderHover：#e5b5ff
主色悬浮态colorPrimaryHover：#d18bfc
主色colorPrimary：#b35df0
主色激活态colorPrimaryActive：#8e44c9
主色文本悬浮态colorPrimaryTextHover：#d18bfc
主色文本colorPrimaryText：#b35df0
主色文本激活态colorPrimaryTextActive：#8e44c9

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#211829

主色浅色背景悬浮态colorPrimaryBgHover：#332041

主色描边色colorPrimaryBorder：#442a56

主色描边色悬浮态colorPrimaryBorderHover：#5c3577

主色悬浮态colorPrimaryHover：#be7fe5

主色colorPrimary：#9b52cf

主色激活态colorPrimaryActive：#7b43a3

主色文本悬浮态colorPrimaryTextHover：#be7fe5

主色文本colorPrimaryText：#9b52cf

主色文本激活态colorPrimaryTextActive：#7b43a3

 

反色colorPrimary：#F0925D
主色浅色背景色colorPrimaryBg：#fff8f0
主色浅色背景悬浮态colorPrimaryBgHover：#fff7f0
主色描边色colorPrimaryBorder：#ffedde
主色描边色悬浮态colorPrimaryBorderHover：#ffd5b5
主色悬浮态colorPrimaryHover：#fcb88b
主色colorPrimary：#f0925d
主色激活态colorPrimaryActive：#c97144
主色文本悬浮态colorPrimaryTextHover：#fcb88b
主色文本colorPrimaryText：#f0925d
主色文本激活态colorPrimaryTextActive：#c97144

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#291d18

主色浅色背景悬浮态colorPrimaryBgHover：#412b20

主色描边色colorPrimaryBorder：#563a2a

主色描边色悬浮态colorPrimaryBorderHover：#774d35

主色悬浮态colorPrimaryHover：#e5a87f

主色colorPrimary：#cf7f52

主色激活态colorPrimaryActive：#a36643

主色文本悬浮态colorPrimaryTextHover：#e5a87f

主色文本colorPrimaryText：#cf7f52

主色文本激活态colorPrimaryTextActive：#a36643

 

备用色colorPrimary：#89709B
主色浅色背景色colorPrimaryBg：#d8cedb
主色浅色背景悬浮态colorPrimaryBgHover：#cbc2cf
主色描边色colorPrimaryBorder：#beb6c2
主色描边色悬浮态colorPrimaryBorderHover：#b1aab5
主色悬浮态colorPrimaryHover：#a194a8
主色colorPrimary：#89709b
主色激活态colorPrimaryActive：#644f75
主色文本悬浮态colorPrimaryTextHover：#a194a8
主色文本colorPrimaryText：#89709b
主色文本激活态colorPrimaryTextActive：#644f75

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#1b181d

主色浅色背景悬浮态colorPrimaryBgHover：#28232c

主色描边色colorPrimaryBorder：#37303d

主色描边色悬浮态colorPrimaryBorderHover：#493d51

主色悬浮态colorPrimaryHover：#938799

主色colorPrimary：#776287

主色激活态colorPrimaryActive：#60506c

主色文本悬浮态colorPrimaryTextHover：#938799

主色文本colorPrimaryText：#776287

主色文本激活态colorPrimaryTextActive：#60506c

 

灰度色colorPrimary：#647070
主色浅色背景色colorPrimaryBg：#a5b0ae
主色浅色背景悬浮态colorPrimaryBgHover：#99a3a2
主色描边色colorPrimaryBorder：#8d9696
主色描边色悬浮态colorPrimaryBorderHover：#818a89
主色悬浮态colorPrimaryHover：#757d7d
主色colorPrimary：#647070
主色激活态colorPrimaryActive：#3e4a4a
主色文本悬浮态colorPrimaryTextHover：#757d7d
主色文本colorPrimaryText：#647070
主色文本激活态colorPrimaryTextActive：#3e4a4a

以下是暗黑模式

主色浅色背景色colorPrimaryBg：#151616

主色浅色背景悬浮态colorPrimaryBgHover：#1f2222

主色描边色colorPrimaryBorder：#2c3030

主色描边色悬浮态colorPrimaryBorderHover：#383d3d

主色悬浮态colorPrimaryHover：#6b7373

主色colorPrimary：#586262

主色激活态colorPrimaryActive：#485050

主色文本悬浮态colorPrimaryTextHover：#6b7373

主色文本colorPrimaryText：#586262

主色文本激活态colorPrimaryTextActive：#485050

 

以上用PPT整理得到