配色方案整理 从颜色到用途
本地色板工作台
编辑 → 排序 → 下载输入3位或6位HEX,以空格、逗号或换行分隔;最多20种。应用新色值会替换当前列表,同色的名称和角色会保留。刷新前请下载JSON。
当前为5色创作示例。修改后主动下载保存。
导入、导出与数据说明
导入本站导出的版本1 JSON会替换当前方案,先保存已有编辑。文件上限100KB。JSON保留名称、备注、颜色和顺序;CSS以--palette-01起编号,排序会改变变量映射。工具不自动保存,也没有数据上传接口。页面公共脚本由托管环境提供,本站工具不依赖它处理颜色。
一份色板, 留下使用理由
收集:输入以空格、逗号或换行分隔的HEX色值。整理:工具将三位色扩成六位大写,合并完全相同的颜色。说明:给每个颜色填写角色与名称,避免只剩一串代码。
工具的数据处理在当前浏览器内完成,不需要账户。不会自动保存;刷新前请下载JSON。这里的示例是本站创作练习,不代表品牌规范。
支持格式仅接受三位或六位HEX,不支持透明色、RGB函数、图片取色和印刷色转换。
导出选择JSON保留方案名、备注、色名、角色和顺序;CSS提供稳定的序号变量及注释。
恢复方法选择此前导出的JSON文件,核对方案名后继续编辑;导入会替换当前色板。
给每个颜色分配一个用途角色
用面积和位置建立视觉层级
同一组颜色如何迁移到不同场景
把色名与CSS变量写进交接说明
用JSON归档并恢复一份色板
规范输入的实际步骤
相同颜色承担多个用途
记录当前作品的面积分配
检查小尺寸与背景变化
用清楚的色名交接
给版本起一个可追踪名称
从零开始:按依赖顺序阅读
- 1先规范色值,再清理重复先清理
- 2给每个颜色分配一个用途角色再分工
- 3用面积和位置建立视觉层级看层级
- 4同一组颜色如何迁移到不同场景换场景
- 5把色名与CSS变量写进交接说明交接
- 6用JSON归档并恢复一份色板备份
准备交付:按检查顺序阅读
- 1给每个颜色分配一个用途角色核对角色
- 2同一组颜色如何迁移到不同场景检查场景
- 3用面积和位置建立视觉层级确认面积
- 4把色名与CSS变量写进交接说明固定命名
- 5用JSON归档并恢复一份色板导出恢复
- 6给版本起一个可追踪名称锁定版本
工具可以做什么
全部本地处理规范色值
将#abc转为#AABBCC。无效输入会明确提示,原色板保持不变。
合并重复
只合并相同HEX,不擅自合并看起来相近的颜色。
编辑用途
色名写外观,角色写用途;两项都保留在JSON中。
调整顺序
使用上移与下移按钮,将背景、文字与强调色按交接顺序排列。
保存JSON
下载可重新导入的方案文件,连同备注一起归档。
导出CSS
生成--palette-01等变量;修改顺序会改变序号,请交接时固定版本。
让方案更容易复用
整理原则数据可带走
普通JSON文件可以查阅、备份和发送,无需绑定账户。
不用猜简称
“深紫”与“正文”分别描述外观和职责,修改时可追踪。
保留决定依据
备注记录项目、适用背景与禁用场景,减少重复讨论。
明确处理范围
仅处理不透明HEX;不把屏幕颜色当作印刷打样结果。
键盘也能整理
字段、移动按钮与下载按钮支持标准键盘操作。
示例可以重做
每篇指南给出具体操作与自查问题,可以换成自己的项目。
配色观察笔记
创作示例颜色数量不等于方案复杂度
相同的五种颜色,使用面积和位置不同会形成不同层级。先画块面草图,再增加色值。
比例角色比色名更适合检索
搜索“文字”能找到正在承担阅读任务的色值;只搜索“紫色”则可能混入边框与装饰。
检索截图只记录一个瞬间
截图受页面背景和显示环境影响,保存HEX与用途备注能保留更多可复用信息。
记录交接需要一个冻结版本
若开发已使用序号变量,再改变顺序可能让引用变色。先固定顺序,再导出交接文件。
版本