什么是随机颜色生成器？

随机生成颜色并显示对应的 HEX、RGB 和 HSL 色值。锁定喜欢的颜色，重新生成其余颜色，单击即可复制任意色值。

按空格键(或点击生成)页面就会换上一排新的随机颜色,每个都同时显示名称以及 HEX、RGB 和 HSL 值。拖动滑块,调色板可以从单一强调色一直加到八格。把「风格」切到粉彩、鲜亮、暗调或大地色,可以把随机往某种气氛上引;选一种「和谐配色」规则(互补、邻近、三等分、四等分),颜色就会按色彩理论彼此关联,而不是各自为战。喜欢的色用锁图标固定,再把其他几格刷新即可。任何色值点一下就进剪贴板,整组配色还能下载成纯文本文件或一张可直接分享的 PNG 图片。 要写代码?一键就能把整组复制成一段 :root 里的 CSS 自定义属性,再一键复制一条链接,粘到哪儿都能原样打开这组配色。点开任意色块下方的浅深色条,就能取到五个更浅和五个更深的色阶,用于悬停态、描边和淡底色。

使用方法

1. 先设定要几种颜色（1 到 8 种皆可，默认 5 种），再点击生成把调色板填满。
2. 锁定想保留的颜色，再次生成时仅替换未锁定的颜色。
3. 点击任意色值（HEX、RGB 或 HSL）即可复制到剪贴板。

何时使用

• 面对 Figma 空白文件、毫无配色方向时,用来打破思维僵局。
• 给副项目、头脑风暴文档或孩子的美术活动挑色相,只要风格随机就行。
• 做一次性图(banner、社交媒体配图、锁屏壁纸)时,直接抓一个 HEX,不用翻流行色清单。

结果

一位网页设计师需要为新项目选择强调色。反复生成调色板后找到 #E8674A（暖珊瑚色），锁定该颜色，继续生成以寻找互补色。

常见问题

颜色是怎么被随机选出来的?

在默认的「随机+任意」模式下,红、绿、蓝三个通道各取一个 0–255 的整数,所以理论上能出现的 RGB 组合接近 1670 万种,完全均匀分布,没有人为偏向「好看」的颜色。如果选了风格(粉彩、鲜亮、暗调、大地色),工具会在那个气氛对应的色相/饱和度/明度区间里抽随机数。和谐配色模式则是先随机定一个基色,其余颜色按色彩理论在色轮上的偏移推导出来。

为什么随机出来的常常灰扑扑?

RGB 立方体里大部分点都在中灰、暗调那一带,所以均匀随机自然会偏中性色。最快的办法是把「风格」从「任意」换成鲜亮或粉彩,工具就只在挑好的色相/饱和度/明度范围里取样,泥泞中间根本不会出现。也可以把比较鲜亮的几格先锁住,其他几格再多刷几次,很快就能凑出一组对比清晰的五色组合。

可以保留一个喜欢的颜色,只换其他的吗?

可以。点任何一格上的锁形图标即可固定,然后再按生成。被锁住的不动,其他的继续刷。这是确定主色之后探索辅助色最快的办法。

HEX、RGB、HSL 有什么区别?

HEX(#1A2B3C)是 RGB 的十六进制写法,CSS 和设计工具最常用。RGB(rgb(26,43,60))用十进制表示三个通道。HSL(hsl(210,40%,17%))描述的是色相、饱和度、明度,手工微调更直观。

结果是真随机还是有种子?

使用浏览器里的 JavaScript Math.random,严格说是伪随机,但对设计配色而言已经和真随机难以区分。刷新一下页面,每次都会得到一组全新的颜色。

相关工具