Color · Design System · iantype.com

展示

系统样例

中性

色相 255

50oklch(0.98 0 255)

100oklch(0.95 0 255)

200oklch(0.9 0.002 255)

300oklch(0.82 0.004 255)

400oklch(0.73 0.008 255)

500oklch(0.64 0.013 255)

600oklch(0.56 0.013 255)

700oklch(0.47 0.01 255)

800oklch(0.38 0.007 255)

900oklch(0.29 0.003 255)

950oklch(0.2 0.001 255)

蓝

色相 261.395

50oklch(0.98 0.001 261.395)

100oklch(0.95 0.006 261.395)

200oklch(0.9 0.019 261.395)

300oklch(0.82 0.052 261.395)

400oklch(0.73 0.101 261.395)

500oklch(0.64 0.158 261.395)

600oklch(0.56 0.206 261.395)

700oklch(0.47 0.167 261.395)

800oklch(0.368 0.161 261.395)

900oklch(0.29 0.058 261.395)

950oklch(0.2 0.022 261.395)

靛青

色相 278

50oklch(0.98 0.001 278)

100oklch(0.95 0.005 278)

200oklch(0.9 0.018 278)

300oklch(0.82 0.05 278)

400oklch(0.73 0.096 278)

500oklch(0.64 0.151 278)

600oklch(0.56 0.197 278)

700oklch(0.47 0.217 278)

800oklch(0.38 0.143 278)

900oklch(0.29 0.075 278)

950oklch(0.2 0.029 278)

紫

色相 305

50oklch(0.98 0.001 305)

100oklch(0.95 0.006 305)

200oklch(0.9 0.022 305)

300oklch(0.82 0.059 305)

400oklch(0.73 0.114 305)

500oklch(0.64 0.18 305)

600oklch(0.56 0.223 305)

700oklch(0.47 0.176 305)

800oklch(0.38 0.115 305)

900oklch(0.29 0.061 305)

950oklch(0.2 0.023 305)

粉

色相 350

50oklch(0.98 0.001 350)

100oklch(0.95 0.006 350)

200oklch(0.9 0.022 350)

300oklch(0.82 0.063 350)

400oklch(0.73 0.129 350)

500oklch(0.64 0.197 350)

600oklch(0.56 0.179 350)

700oklch(0.47 0.141 350)

800oklch(0.38 0.093 350)

900oklch(0.29 0.049 350)

950oklch(0.2 0.019 350)

红

色相 25

50oklch(0.98 0.001 25)

100oklch(0.95 0.006 25)

200oklch(0.9 0.02 25)

300oklch(0.82 0.056 25)

400oklch(0.73 0.114 25)

500oklch(0.64 0.191 25)

600oklch(0.56 0.183 25)

700oklch(0.47 0.145 25)

800oklch(0.38 0.095 25)

900oklch(0.29 0.05 25)

950oklch(0.2 0.019 25)

橙

色相 55

50oklch(0.98 0.001 55)

100oklch(0.95 0.006 55)

200oklch(0.9 0.022 55)

300oklch(0.82 0.061 55)

400oklch(0.73 0.117 55)

500oklch(0.64 0.117 55)

600oklch(0.56 0.106 55)

700oklch(0.47 0.084 55)

800oklch(0.38 0.055 55)

900oklch(0.29 0.029 55)

950oklch(0.2 0.011 55)

黄

色相 90

50oklch(0.98 0.002 90)

100oklch(0.95 0.012 90)

200oklch(0.9 0.042 90)

300oklch(0.82 0.08 90)

400oklch(0.73 0.088 90)

500oklch(0.64 0.088 90)

600oklch(0.56 0.08 90)

700oklch(0.47 0.063 90)

800oklch(0.38 0.041 90)

900oklch(0.29 0.022 90)

950oklch(0.2 0.008 90)

绿

色相 150

50oklch(0.98 0.003 150)

100oklch(0.95 0.017 150)

200oklch(0.9 0.062 150)

300oklch(0.82 0.113 150)

400oklch(0.73 0.124 150)

500oklch(0.64 0.124 150)

600oklch(0.56 0.113 150)

700oklch(0.47 0.089 150)

800oklch(0.38 0.059 150)

900oklch(0.29 0.031 150)

950oklch(0.2 0.012 150)

薄荷

色相 170

50oklch(0.98 0.003 170)

100oklch(0.95 0.014 170)

200oklch(0.9 0.049 170)

300oklch(0.82 0.073 170)

400oklch(0.73 0.081 170)

500oklch(0.64 0.081 170)

600oklch(0.56 0.074 170)

700oklch(0.47 0.058 170)

800oklch(0.38 0.038 170)

900oklch(0.29 0.02 170)

950oklch(0.2 0.008 170)

青绿

色相 195

50oklch(0.98 0.003 195)

100oklch(0.95 0.014 195)

200oklch(0.9 0.048 195)

300oklch(0.82 0.063 195)

400oklch(0.73 0.07 195)

500oklch(0.64 0.07 195)

600oklch(0.56 0.063 195)

700oklch(0.47 0.05 195)

800oklch(0.38 0.033 195)

900oklch(0.29 0.017 195)

950oklch(0.2 0.007 195)

青

色相 220

50oklch(0.98 0.001 220)

100oklch(0.95 0.007 220)

200oklch(0.9 0.023 220)

300oklch(0.82 0.063 220)

400oklch(0.73 0.078 220)

500oklch(0.64 0.078 220)

600oklch(0.56 0.071 220)

700oklch(0.47 0.056 220)

800oklch(0.38 0.037 220)

900oklch(0.29 0.019 220)

950oklch(0.2 0.007 220)

Token

1 个分类

名称	类型	浅色	深色
`global.color.neutral.50`中性 50	color	`oklch(0.98 0 255)`	`oklch(0.98 0 255)`
`global.color.neutral.100`中性 100	color	`oklch(0.95 0 255)`	`oklch(0.95 0 255)`
`global.color.neutral.200`中性 200	color	`oklch(0.9 0.002 255)`	`oklch(0.9 0.002 255)`
`global.color.neutral.300`中性 300	color	`oklch(0.82 0.004 255)`	`oklch(0.82 0.004 255)`
`global.color.neutral.400`中性 400	color	`oklch(0.73 0.008 255)`	`oklch(0.73 0.008 255)`
`global.color.neutral.500`中性 500	color	`oklch(0.64 0.013 255)`	`oklch(0.64 0.013 255)`
`global.color.neutral.600`中性 600	color	`oklch(0.56 0.013 255)`	`oklch(0.56 0.013 255)`
`global.color.neutral.700`中性 700	color	`oklch(0.47 0.01 255)`	`oklch(0.47 0.01 255)`
`global.color.neutral.800`中性 800	color	`oklch(0.38 0.007 255)`	`oklch(0.38 0.007 255)`
`global.color.neutral.900`中性 900	color	`oklch(0.29 0.003 255)`	`oklch(0.29 0.003 255)`
`global.color.neutral.950`中性 950	color	`oklch(0.2 0.001 255)`	`oklch(0.2 0.001 255)`
`global.color.blue.50`蓝 50	color	`oklch(0.98 0.001 261.395)`	`oklch(0.98 0.001 261.395)`
`global.color.blue.100`蓝 100	color	`oklch(0.95 0.006 261.395)`	`oklch(0.95 0.006 261.395)`
`global.color.blue.200`蓝 200	color	`oklch(0.9 0.019 261.395)`	`oklch(0.9 0.019 261.395)`
`global.color.blue.300`蓝 300	color	`oklch(0.82 0.052 261.395)`	`oklch(0.82 0.052 261.395)`
`global.color.blue.400`蓝 400	color	`oklch(0.73 0.101 261.395)`	`oklch(0.73 0.101 261.395)`
`global.color.blue.500`蓝 500	color	`oklch(0.64 0.158 261.395)`	`oklch(0.64 0.158 261.395)`
`global.color.blue.600`蓝 600	color	`oklch(0.56 0.206 261.395)`	`oklch(0.56 0.206 261.395)`
`global.color.blue.700`蓝 700	color	`oklch(0.47 0.167 261.395)`	`oklch(0.47 0.167 261.395)`
`global.color.blue.800`蓝 800	color	`oklch(0.368 0.161 261.395)`	`oklch(0.368 0.161 261.395)`
`global.color.blue.900`蓝 900	color	`oklch(0.29 0.058 261.395)`	`oklch(0.29 0.058 261.395)`
`global.color.blue.950`蓝 950	color	`oklch(0.2 0.022 261.395)`	`oklch(0.2 0.022 261.395)`
`global.color.indigo.50`靛青 50	color	`oklch(0.98 0.001 278)`	`oklch(0.98 0.001 278)`
`global.color.indigo.100`靛青 100	color	`oklch(0.95 0.005 278)`	`oklch(0.95 0.005 278)`
`global.color.indigo.200`靛青 200	color	`oklch(0.9 0.018 278)`	`oklch(0.9 0.018 278)`
`global.color.indigo.300`靛青 300	color	`oklch(0.82 0.05 278)`	`oklch(0.82 0.05 278)`
`global.color.indigo.400`靛青 400	color	`oklch(0.73 0.096 278)`	`oklch(0.73 0.096 278)`
`global.color.indigo.500`靛青 500	color	`oklch(0.64 0.151 278)`	`oklch(0.64 0.151 278)`
`global.color.indigo.600`靛青 600	color	`oklch(0.56 0.197 278)`	`oklch(0.56 0.197 278)`
`global.color.indigo.700`靛青 700	color	`oklch(0.47 0.217 278)`	`oklch(0.47 0.217 278)`
`global.color.indigo.800`靛青 800	color	`oklch(0.38 0.143 278)`	`oklch(0.38 0.143 278)`
`global.color.indigo.900`靛青 900	color	`oklch(0.29 0.075 278)`	`oklch(0.29 0.075 278)`
`global.color.indigo.950`靛青 950	color	`oklch(0.2 0.029 278)`	`oklch(0.2 0.029 278)`
`global.color.purple.50`紫 50	color	`oklch(0.98 0.001 305)`	`oklch(0.98 0.001 305)`
`global.color.purple.100`紫 100	color	`oklch(0.95 0.006 305)`	`oklch(0.95 0.006 305)`
`global.color.purple.200`紫 200	color	`oklch(0.9 0.022 305)`	`oklch(0.9 0.022 305)`
`global.color.purple.300`紫 300	color	`oklch(0.82 0.059 305)`	`oklch(0.82 0.059 305)`
`global.color.purple.400`紫 400	color	`oklch(0.73 0.114 305)`	`oklch(0.73 0.114 305)`
`global.color.purple.500`紫 500	color	`oklch(0.64 0.18 305)`	`oklch(0.64 0.18 305)`
`global.color.purple.600`紫 600	color	`oklch(0.56 0.223 305)`	`oklch(0.56 0.223 305)`
`global.color.purple.700`紫 700	color	`oklch(0.47 0.176 305)`	`oklch(0.47 0.176 305)`
`global.color.purple.800`紫 800	color	`oklch(0.38 0.115 305)`	`oklch(0.38 0.115 305)`
`global.color.purple.900`紫 900	color	`oklch(0.29 0.061 305)`	`oklch(0.29 0.061 305)`
`global.color.purple.950`紫 950	color	`oklch(0.2 0.023 305)`	`oklch(0.2 0.023 305)`
`global.color.pink.50`粉 50	color	`oklch(0.98 0.001 350)`	`oklch(0.98 0.001 350)`
`global.color.pink.100`粉 100	color	`oklch(0.95 0.006 350)`	`oklch(0.95 0.006 350)`
`global.color.pink.200`粉 200	color	`oklch(0.9 0.022 350)`	`oklch(0.9 0.022 350)`
`global.color.pink.300`粉 300	color	`oklch(0.82 0.063 350)`	`oklch(0.82 0.063 350)`
`global.color.pink.400`粉 400	color	`oklch(0.73 0.129 350)`	`oklch(0.73 0.129 350)`
`global.color.pink.500`粉 500	color	`oklch(0.64 0.197 350)`	`oklch(0.64 0.197 350)`
`global.color.pink.600`粉 600	color	`oklch(0.56 0.179 350)`	`oklch(0.56 0.179 350)`
`global.color.pink.700`粉 700	color	`oklch(0.47 0.141 350)`	`oklch(0.47 0.141 350)`
`global.color.pink.800`粉 800	color	`oklch(0.38 0.093 350)`	`oklch(0.38 0.093 350)`
`global.color.pink.900`粉 900	color	`oklch(0.29 0.049 350)`	`oklch(0.29 0.049 350)`
`global.color.pink.950`粉 950	color	`oklch(0.2 0.019 350)`	`oklch(0.2 0.019 350)`
`global.color.red.50`红 50	color	`oklch(0.98 0.001 25)`	`oklch(0.98 0.001 25)`
`global.color.red.100`红 100	color	`oklch(0.95 0.006 25)`	`oklch(0.95 0.006 25)`
`global.color.red.200`红 200	color	`oklch(0.9 0.02 25)`	`oklch(0.9 0.02 25)`
`global.color.red.300`红 300	color	`oklch(0.82 0.056 25)`	`oklch(0.82 0.056 25)`
`global.color.red.400`红 400	color	`oklch(0.73 0.114 25)`	`oklch(0.73 0.114 25)`
`global.color.red.500`红 500	color	`oklch(0.64 0.191 25)`	`oklch(0.64 0.191 25)`
`global.color.red.600`红 600	color	`oklch(0.56 0.183 25)`	`oklch(0.56 0.183 25)`
`global.color.red.700`红 700	color	`oklch(0.47 0.145 25)`	`oklch(0.47 0.145 25)`
`global.color.red.800`红 800	color	`oklch(0.38 0.095 25)`	`oklch(0.38 0.095 25)`
`global.color.red.900`红 900	color	`oklch(0.29 0.05 25)`	`oklch(0.29 0.05 25)`
`global.color.red.950`红 950	color	`oklch(0.2 0.019 25)`	`oklch(0.2 0.019 25)`
`global.color.orange.50`橙 50	color	`oklch(0.98 0.001 55)`	`oklch(0.98 0.001 55)`
`global.color.orange.100`橙 100	color	`oklch(0.95 0.006 55)`	`oklch(0.95 0.006 55)`
`global.color.orange.200`橙 200	color	`oklch(0.9 0.022 55)`	`oklch(0.9 0.022 55)`
`global.color.orange.300`橙 300	color	`oklch(0.82 0.061 55)`	`oklch(0.82 0.061 55)`
`global.color.orange.400`橙 400	color	`oklch(0.73 0.117 55)`	`oklch(0.73 0.117 55)`
`global.color.orange.500`橙 500	color	`oklch(0.64 0.117 55)`	`oklch(0.64 0.117 55)`
`global.color.orange.600`橙 600	color	`oklch(0.56 0.106 55)`	`oklch(0.56 0.106 55)`
`global.color.orange.700`橙 700	color	`oklch(0.47 0.084 55)`	`oklch(0.47 0.084 55)`
`global.color.orange.800`橙 800	color	`oklch(0.38 0.055 55)`	`oklch(0.38 0.055 55)`
`global.color.orange.900`橙 900	color	`oklch(0.29 0.029 55)`	`oklch(0.29 0.029 55)`
`global.color.orange.950`橙 950	color	`oklch(0.2 0.011 55)`	`oklch(0.2 0.011 55)`
`global.color.yellow.50`黄 50	color	`oklch(0.98 0.002 90)`	`oklch(0.98 0.002 90)`
`global.color.yellow.100`黄 100	color	`oklch(0.95 0.012 90)`	`oklch(0.95 0.012 90)`
`global.color.yellow.200`黄 200	color	`oklch(0.9 0.042 90)`	`oklch(0.9 0.042 90)`
`global.color.yellow.300`黄 300	color	`oklch(0.82 0.08 90)`	`oklch(0.82 0.08 90)`
`global.color.yellow.400`黄 400	color	`oklch(0.73 0.088 90)`	`oklch(0.73 0.088 90)`
`global.color.yellow.500`黄 500	color	`oklch(0.64 0.088 90)`	`oklch(0.64 0.088 90)`
`global.color.yellow.600`黄 600	color	`oklch(0.56 0.08 90)`	`oklch(0.56 0.08 90)`
`global.color.yellow.700`黄 700	color	`oklch(0.47 0.063 90)`	`oklch(0.47 0.063 90)`
`global.color.yellow.800`黄 800	color	`oklch(0.38 0.041 90)`	`oklch(0.38 0.041 90)`
`global.color.yellow.900`黄 900	color	`oklch(0.29 0.022 90)`	`oklch(0.29 0.022 90)`
`global.color.yellow.950`黄 950	color	`oklch(0.2 0.008 90)`	`oklch(0.2 0.008 90)`
`global.color.green.50`绿 50	color	`oklch(0.98 0.003 150)`	`oklch(0.98 0.003 150)`
`global.color.green.100`绿 100	color	`oklch(0.95 0.017 150)`	`oklch(0.95 0.017 150)`
`global.color.green.200`绿 200	color	`oklch(0.9 0.062 150)`	`oklch(0.9 0.062 150)`
`global.color.green.300`绿 300	color	`oklch(0.82 0.113 150)`	`oklch(0.82 0.113 150)`
`global.color.green.400`绿 400	color	`oklch(0.73 0.124 150)`	`oklch(0.73 0.124 150)`
`global.color.green.500`绿 500	color	`oklch(0.64 0.124 150)`	`oklch(0.64 0.124 150)`
`global.color.green.600`绿 600	color	`oklch(0.56 0.113 150)`	`oklch(0.56 0.113 150)`
`global.color.green.700`绿 700	color	`oklch(0.47 0.089 150)`	`oklch(0.47 0.089 150)`
`global.color.green.800`绿 800	color	`oklch(0.38 0.059 150)`	`oklch(0.38 0.059 150)`
`global.color.green.900`绿 900	color	`oklch(0.29 0.031 150)`	`oklch(0.29 0.031 150)`
`global.color.green.950`绿 950	color	`oklch(0.2 0.012 150)`	`oklch(0.2 0.012 150)`
`global.color.mint.50`薄荷 50	color	`oklch(0.98 0.003 170)`	`oklch(0.98 0.003 170)`
`global.color.mint.100`薄荷 100	color	`oklch(0.95 0.014 170)`	`oklch(0.95 0.014 170)`
`global.color.mint.200`薄荷 200	color	`oklch(0.9 0.049 170)`	`oklch(0.9 0.049 170)`
`global.color.mint.300`薄荷 300	color	`oklch(0.82 0.073 170)`	`oklch(0.82 0.073 170)`
`global.color.mint.400`薄荷 400	color	`oklch(0.73 0.081 170)`	`oklch(0.73 0.081 170)`
`global.color.mint.500`薄荷 500	color	`oklch(0.64 0.081 170)`	`oklch(0.64 0.081 170)`
`global.color.mint.600`薄荷 600	color	`oklch(0.56 0.074 170)`	`oklch(0.56 0.074 170)`
`global.color.mint.700`薄荷 700	color	`oklch(0.47 0.058 170)`	`oklch(0.47 0.058 170)`
`global.color.mint.800`薄荷 800	color	`oklch(0.38 0.038 170)`	`oklch(0.38 0.038 170)`
`global.color.mint.900`薄荷 900	color	`oklch(0.29 0.02 170)`	`oklch(0.29 0.02 170)`
`global.color.mint.950`薄荷 950	color	`oklch(0.2 0.008 170)`	`oklch(0.2 0.008 170)`
`global.color.teal.50`青绿 50	color	`oklch(0.98 0.003 195)`	`oklch(0.98 0.003 195)`
`global.color.teal.100`青绿 100	color	`oklch(0.95 0.014 195)`	`oklch(0.95 0.014 195)`
`global.color.teal.200`青绿 200	color	`oklch(0.9 0.048 195)`	`oklch(0.9 0.048 195)`
`global.color.teal.300`青绿 300	color	`oklch(0.82 0.063 195)`	`oklch(0.82 0.063 195)`
`global.color.teal.400`青绿 400	color	`oklch(0.73 0.07 195)`	`oklch(0.73 0.07 195)`
`global.color.teal.500`青绿 500	color	`oklch(0.64 0.07 195)`	`oklch(0.64 0.07 195)`
`global.color.teal.600`青绿 600	color	`oklch(0.56 0.063 195)`	`oklch(0.56 0.063 195)`
`global.color.teal.700`青绿 700	color	`oklch(0.47 0.05 195)`	`oklch(0.47 0.05 195)`
`global.color.teal.800`青绿 800	color	`oklch(0.38 0.033 195)`	`oklch(0.38 0.033 195)`
`global.color.teal.900`青绿 900	color	`oklch(0.29 0.017 195)`	`oklch(0.29 0.017 195)`
`global.color.teal.950`青绿 950	color	`oklch(0.2 0.007 195)`	`oklch(0.2 0.007 195)`
`global.color.cyan.50`青 50	color	`oklch(0.98 0.001 220)`	`oklch(0.98 0.001 220)`
`global.color.cyan.100`青 100	color	`oklch(0.95 0.007 220)`	`oklch(0.95 0.007 220)`
`global.color.cyan.200`青 200	color	`oklch(0.9 0.023 220)`	`oklch(0.9 0.023 220)`
`global.color.cyan.300`青 300	color	`oklch(0.82 0.063 220)`	`oklch(0.82 0.063 220)`
`global.color.cyan.400`青 400	color	`oklch(0.73 0.078 220)`	`oklch(0.73 0.078 220)`
`global.color.cyan.500`青 500	color	`oklch(0.64 0.078 220)`	`oklch(0.64 0.078 220)`
`global.color.cyan.600`青 600	color	`oklch(0.56 0.071 220)`	`oklch(0.56 0.071 220)`
`global.color.cyan.700`青 700	color	`oklch(0.47 0.056 220)`	`oklch(0.47 0.056 220)`
`global.color.cyan.800`青 800	color	`oklch(0.38 0.037 220)`	`oklch(0.38 0.037 220)`
`global.color.cyan.900`青 900	color	`oklch(0.29 0.019 220)`	`oklch(0.29 0.019 220)`
`global.color.cyan.950`青 950	color	`oklch(0.2 0.007 220)`	`oklch(0.2 0.007 220)`
`global.color.white`纯白	color	`oklch(1 0 0)`	`oklch(1 0 0)`
`global.color.black`纯黑	color	`oklch(0 0 0)`	`oklch(0 0 0)`
`global.color.transparent`透明	color	`oklch(0 0 0 / 0)`	`oklch(0 0 0 / 0)`
`global.color.scrim`遮罩	color	`oklch(0 0 0 / 0.72)`	`oklch(0 0 0 / 0.72)`

使用

使用规则

页面和组件通过语义或组件 Token 使用这些值。
不要在页面中复制原始值。
浅色和深色主题分别检查实际组合。