🎯 基于当前颜色的配色方案
🌈 渐变色方案
🕐 最近生成的颜色（点击应用）
⭐ 收藏的颜色（点击应用）
本在线随机颜色生成器是一个功能完善的配色辅助工具，帮助设计师和开发者在几秒钟内找到完美的颜色搭配。以下是详细的使用指南：
生成随机颜色：打开页面后，点击大色块区域或「随机生成」按钮即可生成一个全新的随机颜色。每次点击都会从1600万种颜色中随机选取一个，确保每次都有惊喜。生成后，页面会自动显示该颜色的HEX、RGB和HSL三种格式值。
复制颜色值：点击HEX、RGB或HSL的值卡片，即可将该颜色值复制到剪贴板。复制成功后页面底部会弹出提示。这三种格式覆盖了绝大多数设计和开发场景：HEX适合Web开发，RGB适合图像处理软件，HSL适合需要调整色调、饱和度或亮度的场景。
配色方案生成：切换到「配色方案」标签，工具会自动基于当前颜色生成6种经典配色方案：互补色、类比色、三角色、分裂互补色、四角色和单色系。每种方案都包含具体的颜色卡片，点击任意颜色即可将其设为当前颜色并查看详细数值。
渐变色生成：切换到「渐变色」标签，工具会生成8种不同方向的渐变色方案，包括线性渐变和径向渐变。每个渐变色卡片显示预览效果和对应的CSS代码，点击即可复制CSS代码到剪贴板。
收藏与管理：点击「收藏」按钮可将当前颜色加入收藏夹。收藏的颜色保存在浏览器本地，关闭页面后也不会丢失。在「收藏夹」标签中可以查看、应用或删除收藏的颜色。
本颜色生成器适用于多种设计和开发场景，帮助用户快速找到理想的配色方案：
网页设计与UI开发：前端开发者在设计网页主题色、按钮配色、卡片背景时，可以使用本工具快速生成主色调并获取对应的互补色作为强调色。工具提供的CSS导出功能可以直接复制颜色变量到项目的CSS文件中，大幅提升开发效率。
品牌视觉设计：设计师在为客户创建品牌视觉识别系统时，需要确定主色、辅助色和强调色。使用本工具的配色方案功能，可以快速生成和谐的色彩组合，确保品牌色彩的一致性和专业感。单色系方案特别适合创建品牌色彩梯度。
数据可视化：在创建图表、仪表盘和数据报表时，需要一组区分度高的颜色。本工具生成的三角色和四角色方案提供了4种高对比度的颜色，非常适合用于折线图、饼图和柱状图的数据系列配色，确保色盲用户也能区分不同数据。
演示文稿与报告：在制作PPT、Keynote或Markdown文档时，统一协调的配色方案能显著提升专业感。使用本工具生成配色方案后，可以直接在演示软件中应用这些颜色值，让整个文档的标题、正文、图表和背景保持视觉一致性。
色相环与配色理论：配色方案都基于RYB色相环（红-黄-蓝）。互补色位于色轮对立面（相距180度），对比最强烈；类比色位于相邻位置（相距30度），和谐统一；三角色均匀分布于色轮（相距120度），平衡且丰富；分裂互补色选择一个主色和两个相邻的互补色，既有对比又不过于强烈；四角色包含两对互补色，适合复杂的多色设计。
HSL色彩模型优势：相比RGB和HEX，HSL（色相Hue、饱和度Saturation、亮度Lightness）更符合人类直觉。调整HSL中的L值可以轻松创建同一色相的明暗变化，调整S值可以控制颜色的鲜艳程度，而H值则控制颜色的基本色调。这就是为什么本工具在生成渐变色和单色系时优先使用HSL计算。
可访问性（A11y）与对比度：根据WCAG 2.1标准，正文文本与背景的对比度至少应达到4.5:1，大号文本至少3:1。本工具在显示颜色时会自动计算并显示对比度提示，帮助您选择对视力障碍用户友好的配色方案。在设计时，建议使用工具如WebAIM对比度检查器进一步验证。
CSS变量与现代开发：现代CSS推荐使用--primary: #FF5733;这样的CSS自定义属性（变量）来管理颜色。本工具的「导出CSS」功能会自动生成一套以当前颜色为主色的CSS变量，包含主色、互补色、类比色和单色系梯度，可以直接粘贴到项目的根样式文件中。
互补色是色轮上相距180度的两种颜色，如红与青、蓝与黄。它们并置时对比强烈、视觉冲击力大，常用于强调和突出重点。在设计中，互补色组合能创造鲜明的视觉层次，但大面积使用可能造成视觉疲劳，建议以一种颜色为主、另一种作为点缀。
HEX是十六进制表示法（如#FF5733），紧凑且常用于Web。RGB用红绿蓝三通道数值（0-255）表示颜色，是显示器发光原理的数学表达。HSL用色相（0-360度）、饱和度（0-100%）和亮度（0-100%）表示，更符合人类对颜色的感知方式，调整色调时更直观。三者可以互相转换，选择哪种格式取决于使用场景。
可以。本工具生成的颜色值（如#FF5733、rgb(255,87,51)）属于事实数据，不受版权保护。您可以在任何个人或商业项目中自由使用这些颜色值，无需署名或付费。但请注意，如果您将生成的配色方案作为设计服务的一部分提供给客户，建议告知客户颜色的来源。
配色时应确保文字与背景色的对比度符合WCAG标准。正常文本对比度至少4.5:1，大号文本（18px以上或14px以上加粗）至少3:1。本工具在颜色大色块下方会显示对比度提示（黑色文字和白色文字的对比度）。建议选择对比度AA级（4.5:1）或AAA级（7:1）的颜色组合，以确保视力障碍用户也能正常阅读。
本工具提供多种渐变方向预设：从上到下（to bottom）、从左到右（to right）、对角线（to bottom right），以及角度渐变（45deg、90deg、135deg等）。在「渐变色」标签中，每个渐变卡片下方会显示具体的CSS方向值。点击任意渐变色卡片即可复制完整的CSS代码，包括方向参数。
收藏的颜色保存在浏览器的localStorage本地存储中，数据仅存储在您的设备上，不会上传到任何服务器。即使关闭浏览器或重启电脑，收藏的颜色仍然会保留。但如果您清除了浏览器的缓存和网站数据，收藏的颜色会丢失。建议定期使用「导出CSS」功能备份您喜欢的配色方案。
切换到「配色方案」标签，工具会自动生成基于当前颜色的单色系方案。单色系通过改变同一色相的饱和度和亮度来创建深浅不同的颜色组合，视觉上非常和谐统一。单色系特别适合创建UI中的主色、悬停色、禁用色等状态变化，以及创建层次感强的渐变背景。
完全随机的颜色可能产生高饱和度、高亮度的"刺眼"颜色（如纯红#FF0000或荧光绿#00FF00）。如果生成的颜色不符合您的审美，可以继续点击「随机生成」直到找到满意的。另外，您可以在配色方案中选择单色系，这些颜色基于同一色相但调整了饱和度，通常看起来更协调舒适。