🎨 配色生成器
一键生成美丽的配色。
这是什么工具？
配色生成器是一款免费的在线工具，为您的设计项目创建美丽、和谐的色彩方案。无论您是在设计网站、创建品牌形象、绘画，还是进行任何视觉项目，此工具都能帮助您发现搭配良好的色彩组合。 色彩理论是良好设计的基础。某些色彩组合因它们在色相环上的位置而自然搭配得令人赏心悦目。互补色（色相环上相对）产生高对比和活力。相似色（色相环上相邻）营造宁静舒适的设计。三色调（均匀分布）提供活泼但平衡的对比。四色调形成矩形，提供丰富的视觉多样性。单色调配色使用单一色相的变化，呈现简洁统一的外观。 此生成器让您选择基色，并即时查看基于这些经典色彩理论关系的和谐配色。您可以生成随机配色以获得灵感、锁定喜欢的颜色，并导出 hex 代码以用于 CSS、设计工具或任何创意软件。所有操作都在您的浏览器中本地执行。运作原理
此生成器使用 HSL（色相、饱和度、亮度）色彩模型，因为它与人类感知色彩关系的方式密切匹配。色相环基于色相，范围从 0° 到 360°。 对于每种和谐类型，工具根据伙伴色与基色的角度关系计算它们的色相：互补色在基色色相上加 180°（两个相对色）。相似色使用相对基色的 ±30°（三个相邻色）。三色调使用 +120° 和 +240°（三个均匀分布的色）。分割互补色使用 +150° 和 +210°（互补色的柔和对比）。四色调使用 +90°、+180° 和 +270°（形成矩形的四个色）。正方形使用 +90° 递增（四个均匀分布的色）。 计算伙伴色相后，工具通过在保持饱和度不变的情况下将亮度从 20% 变化到 90%，为每个颜色生成 5 种深浅。结果是一组具有不同亮度层次的关联色彩配色。色彩从 HSL 转换为 hex 以供显示和复制。随机生成器会选择随机色相和和谐类型以提供创意灵感。Ad
使用方法
- 使用颜色选择器挑选基色。
- 选择和谐类型（互补色、相似色等）。
- 生成随机配色以获得灵感。
- 点击任何颜色即可复制其 hex 代码。
- 导出完整的配色供您的设计使用。
常见问题
常见问题
哪种色彩和谐最适合网页设计？
相似色配色适用于大多数网站，因为它们营造出平静、协调的感觉。对于强调色（按钮、高亮），使用互补色使其突出。三色调配色适用于活泼有趣的设计。
如何复制颜色 hex 代码？
只需点击生成配色中的任何色块，其 hex 代码就会自动复制到剪贴板。您也可以使用“全部复制”按钮一次复制所有 hex 代码。
什么是 HSL，为什么此工具使用它？
HSL（色相、饱和度、亮度）是一种与人类思考色彩方式相符的色彩模型。它使创建和谐配色变得容易，因为色相直接对应色相环上的位置。工具将 HSL 转换为 hex 以供实际使用。
我可以从照片生成配色吗？
此工具从基色或随机生成配色。如需从图片中提取配色，需要专用的色彩提取工具。不过，您可以从图片中挑选主色作为基色，并在此生成和谐的伙伴色。
技巧与建议
对于无障碍网页设计，请务必检查色彩对比度。WCAG 标准要求普通文本的对比度至少为 4.5:1，大文本为 3:1。使用 60-30-10 法则来平衡配色：60% 的主色（通常是中性色）、30% 的次要色和 10% 的强调色。生成随机配色时，锁定喜欢的颜色并重新生成其余颜色，以迭代完善您的方案。请记住，色彩在不同屏幕上看起来不同；请在多个设备上测试您的配色。对于品牌形象，请将配色限制在 3-5 种核心色彩以保持一致性。深色模式设计受益于比浅色模式略微去饱和的色彩。hex 格式（#RRGGBB）是通用的，但在现代 CSS 中也考虑使用 HSL 或 oklch() 以便更容易调整。