颜色拾取与调色板
主色提取、配色扩展、渐变生成，以及图片主色调分析
使用帮助
- 上方可以直接选主色，或输入 HEX / RGB / HSL，三种格式会自动联动
- 中间会自动生成同色阶、关系色和几组可直接复制的渐变方案
- 下方预览区会把当前颜色套进按钮、标签、卡片里，方便直观看效果
- 图片取色支持拖拽上传、鼠标悬停放大镜，以及自动提取整组主色调
- 不支持屏幕取色时，可用“从图片取色”作为替代方案
主色选择
用一个主色驱动下面全部配色结果。
上传图片
提取主色调
Chrome/Edge
颜色预览
当前主色会同步更新格式、变量名和基础气质。
当前主色
这块颜色会直接驱动同色阶、关系色、渐变和下方组件预览。
#FF0000
rgb(255,0,0)
hsl(0,100%,50%)
CSS 主色变量
#FF0000CSS 浅色变量
#FFD6D6CSS 强调变量
#FF5A36智能配色
自动给出一套可直接拿去做主题色板的结果。
同色阶
关系色
渐变方案
点击任意卡片即可复制对应的 `linear-gradient(...)` CSS。
实时预览
不是只看色值，而是直接看颜色落到按钮、卡片、标签后的感觉。
New palette
示例卡片
当前主色会同时影响强调色、卡片边框、按钮和背景层级。
主色块
用于主按钮、品牌色、关键操作。
浅色块
适合轻背景、说明区、标签底色。
强调色块
适合提示、悬浮、渐变过渡。