PPT配色临时救场
甲方下午三点突然要求把方案主色从商务蓝改成暖橙调，手头只有一张产品包装图。打开本工具，把包装图拖进取色区，工具自动提取出 5 个主色和 3 组邻近色搭配。不用在色轮上瞎调，直接选中包装上的橘色 #FF6B35 作为主色，再配上浅米色 #F4E9D8 做背景，15 分钟改完全部 20 页 PPT，甲方当场通过。
就绪 · crypto 强随机取色 · HEX / RGB / HSL 一键复制
第一节
关于本工具
About设计稿调色，从色轮上盲点一个颜色，和从一张参考图里吸色，得到的心理感受完全不同。这个工具每次刷新生成一组随机色，支持锁定单个颜色后刷新其余色块，直到调出想要的配色组。颜色在浏览器本地生成，不传服务器，刷新即新色，适合做情绪板初筛、PPT 配色灵感或游戏皮肤配色测试。
使用场景
装修选乳胶漆色号
装修公司给了 30 个色卡小样，老婆想要「莫兰迪灰」，但小样在自然光和射灯下颜色差很多。用工具拍下小样照片，生成 RGB 值后，再输入到调色板功能里，自动匹配出立邦和多乐士最接近的成品色号。最终选了多乐士 30YY 58/056，刷完跟小样在自然光下的效果一致，省了来回换漆的 3 天工期。
UI 设计师交接规范
设计稿里用了 12 个自定义色值，开发小哥说「这个蓝跟上次不一样」。用工具把设计稿里所有颜色批量提取成 16 进制码，再按色相排序导出成表格。交接时把这份颜色规范贴在 Figma 第一页，开发直接复制色值，0 次返工。工具还能把色值转成 HSL，方便定义明暗变化规则。
给外地朋友挑礼物包装
朋友生日，想送一箱自己做的曲奇，但快递盒太丑。用工具从朋友朋友圈照片里提取她最近喜欢的蓝紫色调——她上个月发的薰衣草田照片。取到主色 #8A6FB5 后，用调色板功能生成 4 个互补色，照着买了同色系的丝带和贴纸。朋友收到后发消息说「连包装盒都懂我」。
数据可视化配色防撞
公司内部报表用红橙绿三色区分预警等级，但销售总监说「跟去年那张图颜色一样，看不出重点」。用工具把去年报表的颜色全部提取出来，生成一个「禁用色库」；再让工具随机生成 5 组不重复的配色方案，选了一组蓝绿渐变 #2E86AB→#A8D5BA。新报表的异常数据用深蓝标出，总监一眼就找到问题区域。
手账排版配色统一
每周做旅行手账，但不同品牌的荧光笔和贴纸色差大，写出来像打翻了调色盘。用工具扫描已有的 6 支笔的笔迹，生成一个「手账调色板」；之后每次买新贴纸，先拍照片提取主色，看是否在调色板范围内。现在整本手账只有 4 个主色 + 2 个点缀色，翻起来像杂志排版一样干净。
第二节
使用指南
Getting Started使用步骤
- 1点击「生成」按钮，页面立即显示一个随机颜色色块及其 HEX 值
- 2点击色块旁的「复制」图标，该颜色代码自动存入剪贴板
- 3切换「调色板」模式，每次生成一组 5 个协调色，色块下方列出各色 HEX
- 4点击「配色组」标签，生成包含主色、辅助色、强调色的完整方案，适合设计参考
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 随机生成一个颜色 | #E3A2C1 | 常规：单色模式，验证基础随机功能，输出为六位十六进制色值 |
| 生成一组调色板（5个颜色） | #4B7F52, #D9A05B, #2C3E50, #F1C40F, #8E44AD | 常规：调色板模式，验证批量输出与颜色多样性，适合设计选色 |
| 生成配色组（主色+辅色+强调色） | 主色: #1A5276, 辅色: #A9CCE3, 强调色: #E74C3C | 常规：配色组模式，验证三色搭配逻辑，强调色与主色形成对比 |
| 随机生成一个颜色（指定格式为HSL） | hsl(210, 70%, 45%) | 边界：不同输出格式（HSL），验证工具是否支持除HEX外的色彩空间 |
| 生成调色板（要求全部为暗色调） | #1B1B2F, #162447, #1F4068, #2C3E50, #34495E | 边界：色调约束（暗色），验证工具是否提供亮度/色相过滤或随机范围控制 |
| 随机生成一个颜色（输入空字符串） | #A8D5BA | 边界：空输入处理，验证工具默认行为（生成单个随机色），不报错 |
| 生成调色板（要求10个颜色但工具上限为8） | #E74C3C, #3498DB, #2ECC71, #F39C12, #9B59B6, #1ABC9C, #E67E22, #2980B9 | 易错：数量超限，验证工具是否自动截断至上限（8个）或提示错误 |
| 随机生成一个颜色（输入非法格式如'abc'） | #C0392B | 易错：非法输入，验证工具是否忽略无效参数并回退到默认随机逻辑 |
常见错误对照
1.HEX 颜色值缺少 # 前缀
✗ 错误
FF5733✓ 修复
#FF5733CSS 和 Web 标准中，HEX 颜色值必须带 # 前缀，否则解析器会当作数字或无效值。
2.HSL 中饱和度/明度忘记加 %
✗ 错误
hsl(200, 50, 50)✓ 修复
hsl(200, 50%, 50%)HSL 规范要求饱和度和明度必须带百分号，否则浏览器会按 0 处理，导致颜色变灰。
3.RGB 值超出 0-255 范围
✗ 错误
rgb(300, 128, 0)✓ 修复
rgb(255, 128, 0)RGB 通道值合法范围是 0-255，超出会被浏览器截断或忽略，造成颜色偏差。
4.HSL 色相值使用 0-100 而非 0-360
✗ 错误
hsl(50, 100%, 50%)✓ 修复
hsl(180, 100%, 50%)HSL 色相单位是度（0-360），50 表示青色区域，而非红色；用 0-100 会导致色相偏移。
5.HEX 简写与全写混用
✗ 错误
#F3A✓ 修复
#FF33AA3 位 HEX 是 6 位的简写，每位重复一次（#F3A → #FF33AA）。直接混用会丢失精度。
6.颜色名大小写不一致
✗ 错误
LightBlue✓ 修复
lightblueCSS 颜色名不区分大小写，但不同工具解析器可能对大小写敏感，统一小写避免兼容问题。
7.透明度值用百分比而非 0-1
✗ 错误
rgba(255,0,0, 50%)✓ 修复
rgba(255,0,0, 0.5)rgba() 的 alpha 通道接受 0-1 浮点数，百分比会被部分解析器当作无效值。
第三节
工作原理
How It Works核心公式
R = rand(0,255), G = rand(0,255), B = rand(0,255)
变量说明
R红色通道值，0–255 整数G绿色通道值，0–255 整数B蓝色通道值，0–255 整数
示例
生成单个随机颜色：R = rand(0,255) 得 201，G = rand(0,255) 得 67，B = rand(0,255) 得 144，最终颜色为 RGB(201,67,144)。
用户操作
浏览器处理
结果输出
第五节
常见问题
Q & A问这个随机颜色能生成调色板吗？一次出好几个颜色那种。＋
答
可以。工具默认每次生成一个颜色，但界面提供「调色板」模式，点击后一次输出 5 个颜色，并自动计算互补色、类似色等配色关系。如果觉得数量不够，可以连续点击「再生成」按钮，每次调色板都会刷新一组新配色，适合快速筛选灵感。
问生成的这些颜色怎么复制出来用？＋
答
每个颜色卡片下方都有对应的 HEX（十六进制）和 RGB 值，点击任意数值即可自动复制到剪贴板。如果是在调色板模式下，每个颜色单独复制，也可以点击调色板顶部的「复制全部」按钮，一键将所有颜色的 HEX 值以逗号分隔格式复制，直接粘贴到 CSS、Sketch 或 Figma 中使用。
问为什么有些颜色看起来特别刺眼或者特别暗？＋
答
随机颜色生成基于纯随机算法，不做过多的「美观度」过滤，因此可能出现高饱和度或极暗/极亮的颜色。如果需要柔和配色，可以在工具面板开启「柔和模式」，该模式会限制饱和度在 30%-70% 之间、亮度在 40%-80% 之间，减少刺眼和死黑的情况。
问能指定生成某个色系里的随机颜色吗？比如只要蓝色系。＋
答
工具当前版本不支持按色系筛选，每次生成的颜色完全随机，覆盖整个色环。如果需要限定色系，可以手动调整「色相偏移」滑块（界面右侧），将其锁定在目标色相范围（如 200°-240° 为蓝色区间），然后点击生成，后续颜色会围绕该色相随机变化。
问生成的颜色在手机上看和电脑上看不一样怎么办？＋
答
不同设备的屏幕色域和亮度设置不同，同一组 HEX 颜色在不同屏幕上显示效果会有差异。本工具使用标准的 sRGB 色域输出，这是 Web 和大多数移动设备的通用标准。如果跨设备使用，建议在目标设备上重新生成并确认，或者用校色后的显示器作为参考基准。
问这个工具能离线用吗？没网的时候打不开。＋
答
可以离线使用。工具采用纯前端实现（FE），所有颜色生成逻辑在浏览器本地运行，不依赖后端服务器。首次加载后，浏览器会缓存页面资源；断网后只要页面没有关闭，仍然可以正常点击生成新颜色。如果关闭页面后重新打开，需要网络加载页面文件，但生成过程仍不需要联网。
问生成的配色怎么保存下来？下次打开还能看。＋
答
工具本身不提供账号保存功能，但可以通过浏览器自带的「打印→另存为 PDF」或截图工具保存当前颜色。更推荐的做法是：点击颜色卡片下方的复制按钮，将 HEX 或 RGB 值粘贴到记事本、Notion 或收藏夹里，下次用的时候直接复制回来使用。
问每次生成的颜色会不会重复？概率大吗？＋
答
理论上可能重复，但实际概率极低。颜色由 24 位 RGB 值随机生成，总共有约 1677 万种可能（256³）。如果只生成几十个颜色，重复概率几乎为零。即便连续生成几百次，遇到完全相同的颜色也非常罕见。如果担心重复，可以观察颜色卡片下方的色值，发现重复就再点一次。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。