优质调色板生成器

使用说明与帮助中心

本文档将指导您如何充分利用智能调色板生成器的各项功能,提升设计效率。

快速入门指南

1

生成随机配色

打开页面后,直接点击右上角的“立即生成”按钮,或者按下键盘上的 空格键 (Space)。系统将根据当前选定的规则为您随机匹配一组和谐的 5 色调色板。

2

选定配色规则

在控制栏的下拉菜单中,您可以选择“相邻色”、“单色”或“互补色”。选择后再次点击生成,算法将严格按照色彩学理论进行计算,确保色彩搭配的科学性。

3

锁定心仪色彩

如果您喜欢某个特定的颜色,请点击该颜色柱上的 锁头图标。锁定后,该颜色在下一次点击“生成”时将保持不变,方便您基于此色寻找其他搭配。

4

一键提取图片颜色

点击“图片取色”按钮上传您的参考图。系统将利用色彩聚类算法,自动分析并提取出图片中最具代表性的 5 个环境主色调并填充到色板中。

进阶功能详解

HSL 精细微调面板

点击颜色柱上的“滑块”图标,可以展开微调面板。您可以通过拖动滑块实时改变该颜色的各项参数,系统会同步更新背景色及代码值。

  • 色相 (Hue)

    改变颜色的基本属性(如红转蓝),通过 0-360 度的色相环进行调整。

  • 饱和度 (Saturation)

    改变颜色的鲜艳程度,从灰色调到纯色调的平滑过渡。

  • 亮度 (Lightness)

    调整颜色的明亮程度,实现从极深到极浅的细腻控制。

多格式一键导出

设计不仅限于 HEX 代码。我们的工具支持多种格式复制,满足不同开发/设计场景。只需将鼠标悬停在“复制”图标上即可选择:

#
HEX 代码

网页设计最通用格式

RGB
RGB 代码

适用于 UI 开发环境

HSL
HSL 代码

最直观的 CSS 变量格式

快捷键说明

按键 执行功能
Space (空格) 随机生成下一组配色方案。
C 复制当前页面的配色 URL (敬请期待后续版本)。
Enter 在编辑颜色代码输入框时按下以应用更改。

常见问题 (FAQ)

Q: 为什么我生成的颜色看起来不协调?

A: 默认随机模式可能会产生跳跃感较强的颜色。建议您锁定一个主色,并将“配色规则”改为“单色”或“相邻色”以获得极高和谐度的方案。

Q: 提取图片颜色时可以提取更多颜色吗?

A: 目前系统固定提取 5 种最核心的环境色,以符合网页调色板的标准。如果需要更多,建议使用我们的“图片取色器”手动选取。

Q: 我的隐私安全吗?

A: 本工具所有图片处理均在您的浏览器本地 Canvas 完成,图片不会被上传到服务器,您可以放心使用。

Q: 颜色柱上的文字为什么会自动变色?

A: 这是系统内置的 WCAG 无障碍对比度算法,会自动检测背景深浅并切换文字颜色,以确保您在任何背景下都能看清颜色代码。