随机颜色生成器

使用方法

随机颜色生成器是「选数量、选格式、点生成」三步：

1. 「生成数量」填 1～50，演示值 8。
2. 「颜色格式」选 HEX、RGB 或 HSL，不同格式只影响显示文字，颜色本身一致。
3. 点「随机生成颜色」，结果进下方列表，每行有色块、数值与「复制」；「复制全部」拿整批；想换一批点「随机生成颜色」或「载入示例」。

随机颜色生成器能解决什么

它解决「想不出配色、又要快速拿到可用色值」的卡壳，适合三类场景：

• 配色灵感：做海报、PPT、网页时随机出几个色，挑顺眼的留作主色，比空想快很多。
• 占位与打样：开发阶段用随机色填充卡片、图表系列，先占位再替换，避免全是灰块。
• 教学演示：讲解 HEX/RGB/HSL 三种表示时，随机出同色不同写法，直观对比。

本页不做的事：不保证颜色之间协调（纯独立随机，可能撞色或扎眼）；不做色盲友好或对比度校验；不锁定某次结果，刷新即变。它只是灵感来源，正式定稿请人工筛选。

原理和变量

① 用了哪个具体函数：随机用 Math.floor(Math.random() * 256) 取 0–255 整数通道；HEX 用 v.toString(16).padStart(2, '0') 补零，RGB/HSL 直接拼字符串。

② 关键参数为什么这样取：HEX 每通道两位十六进制刚好覆盖 0–255；HSL 饱和度限 40–100、亮度限 30–70，是为了避开「灰白」与「死黑」，让随机色大多看得清、用得上。

③ 遵循哪个标准：颜色遵循 sRGB 表示惯例，HEX/RGB/HSL 都是 Web 通用写法，结果可直接粘进 CSS 的 color、background 属性。

④ 输入怎么变成输出：演示随机出红绿蓝通道如 120、200、88，HEX 即 #78C858，RGB 即 rgb(120, 200, 88)，HSL 由同一 RGB 反推得到，三者描述同一颜色。

⑤ 边界与阈值：数量限 1～50，超出或为空提示并回退到 8；HSL 亮度/饱和度阈值保证可读性；连续两次可能出相近色，因为每次都独立随机。

⑥ 常见误用的正确解释：随机色不保证「美观协调」，别指望一次出一套配色方案；HEX 与 RGB 是同一颜色的不同写法，复制进 CSS 效果相同，不是两种颜色。

完整示例（颜色仅作演示）

格式 HEX、数量 8，可能得到（每次随机，下列为示意）：

• #78C858（草绿）
• #C85878（莓红）
• #5884C8（湖蓝）
• #C8A858（暖黄）
• #8A58C8（紫罗兰）
• #58C8B0（青碧）
• #C85858（砖红）
• #5858C8（靛蓝）

这 8 个都遵循「独立随机三通道」逻辑，可和下方色相轮对照表对照色相命名。

输入范围与对照表

随机颜色生成器的对照表按色相环（HSL 色相 0–360）列出常见色相的名称与 HEX 示例，帮你预判随机色的语感：

色相每加 30° 大致换一种色系；随机生成时色相在 0–360 均匀取，所以各色系都有机会出现。

结果边界和舍入

输出性质：结果是标准 CSS 颜色字符串，HEX 六位、RGB 三通道、HSL 三参数，可直接粘进样式表或设计软件。

什么时候会提示：数量不是 1～50 的整数时提示并回退到 8；格式未选时默认 HEX。生成本身几乎不报错，空结果只会在数量异常时出现。

重复与协调：同一次可能出相近色（独立随机抽样），批量越大越常见；正式定稿前请人工挑掉扎眼或撞色的几个。

结果用途：这是灵感候选，不是配色规范，定稿请确认对比度与品牌一致性。

常见问题

相关工具

• 在线取色器：从图片或屏幕取精确色值。
• Hex 转 RGB：把本页 HEX 换算成 RGB。
• RGB 转 Hex：把本页 RGB 换算成 HEX。
• 随机数生成器：生成随机数值做参数。
• UUID 生成器：给颜色配置分配唯一编号。
• 随机抽签器：从候选色里随机抽一个。
• 文本转 Hex：把文字转成十六进制。