多颜色批量预览
每行输入一个颜色值，即可生成对应色卡，适合快速核对一组设计颜色。
支持常见 CSS 颜色
可直接输入 HEX、RGB、HSL 等浏览器支持的颜色格式。
浏览器本地渲染
颜色预览只在当前页面渲染，不上传服务器，适合快速对色。
颜色预览 · 浏览器本地处理
颜色预览
输入 HEX、RGB 或 HSL 颜色值后生成色卡预览，适合设计稿对色和前端样式复核。不上传服务器。
颜色数量
3
输入格式
HEX/RGB/HSL
处理方式
本地
输出
色卡
#2563eb
第 1 个颜色
rgb(34, 197, 94)
第 2 个颜色
hsl(24, 95%, 53%)
第 3 个颜色
颜色预览只在浏览器本地渲染，不上传服务器。
工具使用说明
怎么用 颜色预览
输入颜色值
在文本框中按行输入颜色，例如 #2563eb、rgb(34, 197, 94) 或 hsl(24, 95%, 53%)。
查看色卡预览
页面会为每个有效颜色值生成色卡，便于横向比较。
回填到样式中
确认颜色后把原始值复制回 CSS、设计稿标注或组件配置。
功能说明
这个工具解决什么问题
颜色预览 为什么适合做成本地工具
颜色预览只依赖浏览器对 CSS 颜色值的渲染能力，不需要服务端参与。
批量查看色卡可以快速发现颜色写错、对比不明显或样式不统一的问题。
结果怎么判断
如果某行颜色值无效，浏览器不会正确渲染对应色块，可直接回到输入框修正。
建议把品牌色、状态色和背景色放在同一批中比较，避免只看单色。
常见问题
关于 颜色预览，用户常问这些
颜色值会上传服务器吗？
不会。输入和预览都在浏览器本地完成。
支持哪些颜色格式？
支持浏览器可识别的 CSS 颜色格式，包括 HEX、RGB、HSL 和部分命名颜色。
无效颜色会怎样？
无效颜色通常不会正确渲染色块，需要回到输入框修正格式。
适合批量对色吗？
适合，每行一个颜色值即可快速生成多张色卡。