Chakra UI生成品牌调色板缺失原始色的原因及引用方法

这类适配Chakra的调色板生成工具，核心目标是输出一组明暗步长均匀、满足WCAG可访问性对比度要求的阶梯色，默认不会严格保留用户输入的原始色值：

• Chakra官方约定的调色板梯度从50（最浅）到900（最深），相邻档位的明度差按固定规则计算，保证不同档位搭配背景时的文字可读性达标
• 你提供的原始品牌色#1A838B的明度刚好落在生成结果的600档（#20A2AC）和700档（#187981）之间，工具为了保证整组色阶的步长统一，没有强行把这个色值塞进预设的整百档位，所以最终输出的调色板里看不到这个原始色。

以下方案都符合Chakra的主题自定义规则，你可以按项目场景选择：

• 在现有调色板中插入自定义档位存放原始色
  Chakra没有强制要求色阶的key必须是50/100/200这类整百数值，你可以新增一个中间档位存储原始色，配置示例如下：

{
  brand: {
    "50": "#EAFAFB",
    "100": "#C3F0F4",
    "200": "#9CE7ED",
    "300": "#76DDE5",
    "400": "#4FD4DE",
    "500": "#28CAD7",
    "600": "#20A2AC",
    "650": "#1A838B",
    "700": "#187981",
    "800": "#105156",
    "900": "#08282B"
  }
}

后续在组件中直接通过color="brand.650"即可引用这个原始品牌色。

• 将原始色定义为独立的语义化色值
  如果#1A838B是品牌logo、核心品牌元素的固定用色，不需要参与hover、按下这类状态的明暗变化，完全不用硬塞进阶梯调色板。你可以直接在主题的colors配置里单独加一个语义化token，比如brandPrimary: "#1A838B"，使用时直接引用brandPrimary即可，语义更清晰，也不会打乱现有色阶的对比度规则。
• 重新校准色阶让原始色落在标准档位
  如果你要求原始品牌色必须落在常用主色档位（比如Chakra默认用于按钮hover态、强调文字的600档），可以在调色板生成工具里手动调整明度偏移参数，把600档的色值校准为#1A838B，再对应微调其他档位的色值，保证相邻档位的对比度差符合可访问性要求即可。

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