用途:从品牌色出发生成配色方案、检查对比度并创建主题,适用于项目主题搭建、shadcn/Tailwind 配色方案生成、WCAG 可访问性检查、深色模式变体创建。
流程:BRAND → GENERATE → VALIDATE → APPLY,即获取品牌色(HEX)、通过 API 生成调色板、检查对比度、应用到主题。
主要能力:借助 TheColorAPI 获取颜色信息与生成配色方案(analogic、complement、monochrome、triad 等模式),借助 WebAIM 接口检查 WCAG 对比度,并输出 shadcn 主题变量结构(:root 与 .dark 下的 CSS 变量,HSL 形式)。文档还列出安全主色(在白色背景达 AA,如 Blue #2563EB、Indigo #4F46E5、Purple #7C3AED、Green #16A34A、Red #DC2626)、语义色(success #22C55E、warning #F59E0B、error #EF4444、info #3B82F6)、灰阶选择(Slate、Zinc、Neutral、Stone)以及深色模式规则。
WCAG 要求:AA 级正文 4.5:1、大号文本 3:1;AAA 级正文 7:1、大号文本 4.5:1。
必要用法(命令保持原样): curl "https://www.thecolorapi.com/id?hex=6366F1" curl "https://www.thecolorapi.com/scheme?hex=6366F1&mode=analogic&count=5" curl "https://webaim.org/resources/contrastchecker/?fcolor=FFFFFF&bcolor=6366F1&api"
限制与排错:对比度过低时可降低 HSL 的 L(加深颜色),或仅用于强调而非文本;品牌色不可访问时,为交互元素创建更深的变体,原色仅作装饰;深色模式下颜色观感不同,可略微提高鲜艳色的 L,降低彩度以避免在深色背景上产生视觉抖动。参考资料包括 palettes.md、workflows.md,外部工具包括 shadcn 主题生成器、uicolors.app、oklch.com、WebAIM 对比度检查器。更多实现细节与完整模板暂未在所提供的资料中展开。