SuperAPI AI 工具集

color-palette

前端与建站

查看项目

更新于 10-15 23:31

技能介绍

用途:从单一品牌十六进制色(如 #0D9488)生成完整配色系统,输出 11 级色阶(50-950)、语义 token、深色模式变体及可直接粘贴到项目的 Tailwind v4 CSS。

主要能力:将 hex 转 HSL,固定色相、调整明度生成色阶;浅色档(50-200)降低饱和度约 15-20%、300-400 降低约 5-10%,500-950 保持全饱和;提供亮/深色模式语义 token 映射(每个背景 token 必须配套前景 token);给出 WCAG AA/AAA 对比度要求(正文 4.5:1/7:1,大文本 3:1/4.5:1,UI 组件与图形 3:1)及亮度与对比度计算函数;可复制 assets/tailwind-colors.css 作为模板。

使用方式:先取得品牌 hex,生成色阶,映射语义 token,检查对比度,最后输出 Tailwind v4 CSS(@import "tailwindcss"; @theme { ... } 及 .dark 覆盖)。常用调整包括浅档过艳时降饱和 10-20%、主色对比不足时用 700 以上、深色模式发灰时主色用 500、避免纯白文本改用 50。

适用场景:需要从品牌色快速搭建亮/深色主题与组件样式的前端与设计系统项目。

限制:资料未提供安装命令、收费与价格、具体平台支持范围;部分示例对比度值(如白字配 primary-500 为 3.9:1)仅为参考,实际需自行验证;透明与渐变等边界情况需按最终渲染颜色另行计算。