使用说明与帮助中心
本文档将指导您如何充分利用智能调色板生成器的各项功能,提升设计效率。
快速入门指南
生成随机配色
打开页面后,直接点击右上角的“立即生成”按钮,或者按下键盘上的 空格键 (Space)。系统将根据当前选定的规则为您随机匹配一组和谐的 5 色调色板。
选定配色规则
在控制栏的下拉菜单中,您可以选择“相邻色”、“单色”或“互补色”。选择后再次点击生成,算法将严格按照色彩学理论进行计算,确保色彩搭配的科学性。
锁定心仪色彩
如果您喜欢某个特定的颜色,请点击该颜色柱上的 锁头图标。锁定后,该颜色在下一次点击“生成”时将保持不变,方便您基于此色寻找其他搭配。
一键提取图片颜色
点击“图片取色”按钮上传您的参考图。系统将利用色彩聚类算法,自动分析并提取出图片中最具代表性的 5 个环境主色调并填充到色板中。
进阶功能详解
HSL 精细微调面板
点击颜色柱上的“滑块”图标,可以展开微调面板。您可以通过拖动滑块实时改变该颜色的各项参数,系统会同步更新背景色及代码值。
-
色相 (Hue)
改变颜色的基本属性(如红转蓝),通过 0-360 度的色相环进行调整。
-
饱和度 (Saturation)
改变颜色的鲜艳程度,从灰色调到纯色调的平滑过渡。
-
亮度 (Lightness)
调整颜色的明亮程度,实现从极深到极浅的细腻控制。
多格式一键导出
设计不仅限于 HEX 代码。我们的工具支持多种格式复制,满足不同开发/设计场景。只需将鼠标悬停在“复制”图标上即可选择:
网页设计最通用格式
适用于 UI 开发环境
最直观的 CSS 变量格式
快捷键说明
| 按键 | 执行功能 |
|---|---|
| Space (空格) | 随机生成下一组配色方案。 |
| C | 复制当前页面的配色 URL (敬请期待后续版本)。 |
| Enter | 在编辑颜色代码输入框时按下以应用更改。 |
常见问题 (FAQ)
Q: 为什么我生成的颜色看起来不协调?
A: 默认随机模式可能会产生跳跃感较强的颜色。建议您锁定一个主色,并将“配色规则”改为“单色”或“相邻色”以获得极高和谐度的方案。
Q: 提取图片颜色时可以提取更多颜色吗?
A: 目前系统固定提取 5 种最核心的环境色,以符合网页调色板的标准。如果需要更多,建议使用我们的“图片取色器”手动选取。
Q: 我的隐私安全吗?
A: 本工具所有图片处理均在您的浏览器本地 Canvas 完成,图片不会被上传到服务器,您可以放心使用。
Q: 颜色柱上的文字为什么会自动变色?
A: 这是系统内置的 WCAG 无障碍对比度算法,会自动检测背景深浅并切换文字颜色,以确保您在任何背景下都能看清颜色代码。