在线色资源
Color Toolbox

在线色资源

从一张截图到一套能落地的配色规范：在线色资源把取色、配色、对比度校验串成同一条工作流，色卡配色方案与色彩搭配灵感随手可取。

浏览色卡库 查看使用答疑
在线色资源色彩工作台界面示意

为什么需要一套稳定的在线色资源工作流

情境：配色返工大多发生在交付前

一次品牌改版，设计师通常要在两天内交出十几套配色草案。手动在取色器和设计软件之间来回切换，色值抄错、明度跳档，同一套色在亮色与暗色模式下看着完全不是一回事，返工几乎都堆在交付前一晚。

冲突：现成色卡站点的三个坑

市面上多数色卡站点有三个坑。首屏被广告占满，真正的色值要滚动三屏才看得见；导出格式受限，拿到的只是一张图片而不是可复制的色值；还有的站把关键功能锁在注册之后，临时查一个十六进制值也要走一遍流程。

问题：怎样才算一套好用的在线色资源

不装专业软件、不注册账号的前提下，怎样才能快速拿到可复用、可校验的配色数据，并且让结果在不同设备上保持一致？这才是挑选工具时真正该问的问题。

答案：把提取、生成、校验串成一条线

把取色流程当成一条流水线来用：先提取主色，再扩展成完整色阶，最后用对比度检测兜底。本页的色卡配色方案区与渐变与校验工具说明，正是按这个顺序排列的。如果你更关心功能迭代，可以先看相关资讯，再回到常见问题确认使用边界。

核心优势

四项围绕速度、数据、可读性与移动端体验的设计取舍。

01

零外部依赖

全站样式与脚本全部内联，不请求任何 CDN、字体库或第三方统计脚本。少一次外部握手，首屏就少一次等待。

02

数据即拿即走

在线色资源输出的十六进制、RGB、HSL 三种格式可一键切换，也能导出成以 --c- 开头的 CSS 变量，直接粘进样式表。

03

无障碍优先

每一次配色都会自动跑一遍 WCAG 2.1 对比度校验，正文 4.5:1、大号标题 3:1，不达标时给出最接近的调整建议。

04

移动端同权

窄屏不做功能阉割，触控热区统一不小于 44px，复制色值、切换格式、打开详情都能单手完成。

相关资讯

工具迭代与色彩趋势的简短记录。

常见问题

关于使用方式、色值版权与兼容性的六个高频疑问。

在线色资源是否需要注册才能使用？

不需要。色卡提取、渐变生成、对比度检测三个工具均可直接使用，页面不设登录墙，也不会把导出结果锁在付费墙后。

提取出来的色值可以直接商用吗？

色值本身属于客观数据，不受版权保护；但如果配色方案源自他人作品截图，建议只作为参考，重新调整明度与饱和度之后再用于商业项目。

为什么导出的色值和其他软件显示不一致？

多数情况是色彩空间差异。这里输出的十六进制值对应 sRGB，如果你的设计文件工作在 Display P3 或 CMYK 下，需要先做一次转换再比对。

对比度检测依据的是什么标准？

采用 WCAG 2.1 的相对亮度公式，正文文本要求对比度不低于 4.5:1，大号标题不低于 3:1，检测结果会直接给出是否达标的结论。

移动端打开会不会很卡？

整个页面零外部依赖，样式与脚本全部内联，图片采用 WebP 加懒加载，移动端首屏通常在一秒内完成渲染。

可以批量导出成 CSS 变量吗？

可以。在色板面板选择导出变量，会生成一份以 --c- 为前缀的自定义属性列表，直接粘贴进样式表即可使用。

用户留言

以下内容为真实使用反馈的整理展示，仅供浏览参考。