使用说明 整理色板
背景、文字、主色、强调四种用途对应的色块关系图
COLOR NOTES / 色彩工作簿

配色方案整理 从颜色到用途

把零散色值整理成能复用、能交接的方案。
HEX规范 用途标注 顺序整理 JSON备份 CSS导出
从一组颜色开始。先记下颜色做什么,再决定它叫什么。下方工具可直接处理你的色值。

本地色板工作台

编辑 → 排序 → 下载

输入3位或6位HEX,以空格、逗号或换行分隔;最多20种。应用新色值会替换当前列表,同色的名称和角色会保留。刷新前请下载JSON。

当前为5色创作示例。修改后主动下载保存。

导入、导出与数据说明

导入本站导出的版本1 JSON会替换当前方案,先保存已有编辑。文件上限100KB。JSON保留名称、备注、颜色和顺序;CSS以--palette-01起编号,排序会改变变量映射。工具不自动保存,也没有数据上传接口。页面公共脚本由托管环境提供,本站工具不依赖它处理颜色。

一份色板, 留下使用理由

适用于创作练习、活动海报和轻量网页的颜色交接。

收集:输入以空格、逗号或换行分隔的HEX色值。整理:工具将三位色扩成六位大写,合并完全相同的颜色。说明:给每个颜色填写角色与名称,避免只剩一串代码。

工具的数据处理在当前浏览器内完成,不需要账户。不会自动保存;刷新前请下载JSON。这里的示例是本站创作练习,不代表品牌规范。

支持格式仅接受三位或六位HEX,不支持透明色、RGB函数、图片取色和印刷色转换。

导出选择JSON保留方案名、备注、色名、角色和顺序;CSS提供稳定的序号变量及注释。

恢复方法选择此前导出的JSON文件,核对方案名后继续编辑;导入会替换当前色板。

规范 去重 编辑 排序 备份 复用
6
具体静态指南
12
内容与步骤入口
20
单份方案颜色上限
2
导出文件格式
0
工具必需账户

六篇指南 · 十二个入口

按问题查阅 查看全部 →

工具可以做什么

全部本地处理
01

规范色值

将#abc转为#AABBCC。无效输入会明确提示,原色板保持不变。

02

合并重复

只合并相同HEX,不擅自合并看起来相近的颜色。

03

编辑用途

色名写外观,角色写用途;两项都保留在JSON中。

04

调整顺序

使用上移与下移按钮,将背景、文字与强调色按交接顺序排列。

05

保存JSON

下载可重新导入的方案文件,连同备注一起归档。

06

导出CSS

生成--palette-01等变量;修改顺序会改变序号,请交接时固定版本。

让方案更容易复用

整理原则
01

数据可带走

普通JSON文件可以查阅、备份和发送,无需绑定账户。

02

不用猜简称

“深紫”与“正文”分别描述外观和职责,修改时可追踪。

03

保留决定依据

备注记录项目、适用背景与禁用场景,减少重复讨论。

04

明确处理范围

仅处理不透明HEX;不把屏幕颜色当作印刷打样结果。

05

键盘也能整理

字段、移动按钮与下载按钮支持标准键盘操作。

06

示例可以重做

每篇指南给出具体操作与自查问题,可以换成自己的项目。

配色观察笔记

创作示例

颜色数量不等于方案复杂度

相同的五种颜色,使用面积和位置不同会形成不同层级。先画块面草图,再增加色值。

比例

角色比色名更适合检索

搜索“文字”能找到正在承担阅读任务的色值;只搜索“紫色”则可能混入边框与装饰。

检索

截图只记录一个瞬间

截图受页面背景和显示环境影响,保存HEX与用途备注能保留更多可复用信息。

记录

交接需要一个冻结版本

若开发已使用序号变量,再改变顺序可能让引用变色。先固定顺序,再导出交接文件。

版本

从收集到交付

建议顺序
STEP 01
收集
粘贴原始HEX,保留参考来源说明。
STEP 02
规范
检查无效项与重复项,统一书写。
STEP 03
标注
记录色名、角色及使用限制。
STEP 04
排布
按背景、文字、主色、强调色排序。
STEP 05
试用
放入实际标题、按钮和大面积背景。
STEP 06
归档
下载JSON和CSS,固定版本名称。

常见问题

使用前后都可查
会自动保存吗? 问答
不会。关闭或刷新前请下载JSON;再次打开后可导入继续整理。
能从图片提取颜色吗? 问答
本站工具不读取图片。请先在你使用的设计工具中取得HEX色值。
为什么只剩一个相同颜色? 问答
输入规范后会合并完全相同的HEX;合并只发生在色值相同的条目。
为什么不能处理透明色? 问答
当前只支持三位或六位不透明HEX,避免把不同背景上的透明效果混为一谈。
导入会覆盖正在编辑的内容吗? 问答
会。请先下载当前方案;无效文件被拒绝时,原方案保持不变。
两种导出有何区别? 问答
JSON可恢复完整方案,CSS提供颜色变量,不能直接还原完整方案。
数据处理需要联网吗? 问答
色值编辑与文件处理逻辑在浏览器执行,不调用处理接口;页面公共脚本由托管环境提供。
颜色好看就可以交付吗? 问答
还要在实际字号、背景和载体中试用。工具不提供印刷打样或无障碍达标判定。