在Chakra中扩展主题时，数字标签（如50:、100:等）代表什么？

这些数字（50、100...900）是Chakra UI采用的颜色亮度分级标准，用来定义同一色系下从浅到深的不同色调：

• 数值越小，颜色越浅（亮度越高）：比如brand.50是该品牌色系里最淡的色调，适合用作页面背景、次要高亮区域等场景
• 500是该色系的主色调，也就是品牌的核心代表色，通常用于按钮、主标题等关键UI元素
• 数值越大，颜色越深（亮度越低）：比如brand.900是该色系最深的色调，常用作强调文本、深色边框或深色背景上的对比元素

这种分级体系和Tailwind CSS的颜色系统逻辑一致，目的是让整个UI的色彩使用保持统一规范，不用手动调整颜色深浅，直接通过数字标签就能调用符合设计规范的色调。

你的代码示例里，brand色系从50的淡紫色逐步过渡到900的深紫黑色，就是遵循这个分级逻辑来定义的：

const theme = extendTheme({
  colors: {
    brand: {
      50: "#f0e4ff",
      100: "#cbb2ff",
      200: "#a480ff",
      300: "#7a4dff",
      400: "#641bfe",
      500: "#5a01e5",
      600: "#5200b3",
      700: "#430081",
      800: "#2d004f",
      900: "#14001f",
    },
  },
  fonts: {
    heading: `'Inter', sans-serif`,
    body: `'Inter', sans-serif`,
  },
});

内容的提问来源于stack exchange，提问作者HardlyNoticeable