需要为原型图、图表或空白画布选一个颜色，又不想凭习惯随便选？这个免费的随机颜色生成器会从屏幕能显示的完整 24 位色彩范围中抽取颜色，并将每种颜色显示在色块上，旁边附有代码。在“生成数量”中选择想要的颜色数——1 到 50 之间任意取值——勾选需要的格式，然后点击“生成”。页面打开时默认显示一种 HEX 颜色，因此第一个结果只需一次点击即可获得。“HEX 代码”这个复选框从一开始就是勾选状态，旁边分别是“RGB 代码”和“HSL 代码”两个复选框，三者的任意组合都可以同时启用。“生成”按钮旁的齿轮按钮会打开“高级选项”，你可以在其中把颜色限定为某一类或某个范围，排除重复，并更改 HEX 的书写方式。
每个颜色都是在你的浏览器中通过 Web Crypto API（crypto.getRandomValues）生成的，它从你系统自身的随机源提供密码学强度的随机字节，而不是像 Math.random() 那样的伪随机函数。屏幕上的一个颜色由三个通道组成——红、绿、蓝——每个通道都是 0 到 255 之间的整数，而一个随机字节正好能表示 256 个值。也就是说，每个通道就是简单的一个字节，中间没有任何环节：不会取余数，也没有任何转换步骤会偏向某个色调。这使得页面能生成的全部 16,777,216 种颜色，每次点击“生成”时，出现的概率完全相等。“高级选项”中较窄的范围会把这个保证限制在该范围之内：颜色仍然是从整个空间中抽取的，落在范围之外的会被剔除，因此范围允许的每种颜色都有相同的概率。没有任何内容会发送到服务器，也不会被记录，页面加载完成后，即使断开连接也能继续正常使用。
这三种格式用三种方式描述同一个颜色。“HEX 代码”这种格式是 CSS 和大多数设计工具中使用的六位数写法，例如 #0778ff；它以小写字母书写，前面带一个 #，“高级选项”中的“大写”和“不带 #”选项会针对期望不同写法的工具改变这一点。“RGB 代码”这种格式把三个通道完整写出，例如 rgb(7, 120, 255)，适合分别处理每个通道的代码。“HSL 代码”这种格式通过色相、饱和度和明度描述颜色，例如 hsl(213, 100%, 51%)，是之后手动调整最方便的形式。三种格式都可以直接粘贴进样式表。不过它们的精确度并不相同。HEX 和 RGB 是精确的；HSL 是四舍五入的。页面把色相、饱和度和明度写成整数，对于大约 89% 的颜色，这个四舍五入后的值并不能精确转换回原来的颜色：#646503 会显示为 hsl(61, 94%, 20%)，而这个值转换回去得到的是 #616303。差异在单个通道上从不超过 5 个数值，通常只有 1 或 2——在屏幕上看不出来，但如果你保存了 HSL 值又想找回原来的 HEX 值，这个差异就是真实存在的。请保存 HEX 或 RGB 作为你要留存的值。
只生成一种颜色时，结果会显示为居中的一个色块；生成多种颜色时，会显示为带编号的列表，每行一种颜色，所选格式并排显示，末尾有一个小小的对比度徽章。超过三种颜色的列表会在框内滚动，框角的箭头可以把它展开到完整高度；页面会记住你上次展开或收起的状态。点击任意代码即可只复制该代码。行末的复制按钮会把该颜色的所有代码复制到一行，以空格分隔。点击色块本身，会打开你浏览器自带的颜色选择器：在那里选一个不同的颜色，该行中所有已启用格式的代码都会相应地重写，徽章也会一起更新。“全部复制”按钮会复制整批颜色，每行一种，“保存为文件”按钮会把同样的文本写入一个纯文本 .txt 文件；这两个操作都会以你在颜色选择器中改动过的颜色为准。“历史记录”功能会在此浏览器中保留你最近的 10 批结果，与生成时完全一致，“清除”按钮则会清空结果。你的设置，包括“高级选项”中的设置，会在下次访问时被记住。
概率相等的颜色看起来并不是均匀分布的，了解这一点可以避免你出于错误的理由反复点击“生成”。就整个范围来测算，大约 35% 的颜色是鲜艳且高饱和度的，HSL 饱和度至少为 70%，明度在 35% 到 65% 之间。接近灰色、饱和度低于 20% 的颜色只占大约 4%，非常暗（明度低于 20%）和非常亮（超过 80%）的颜色各占大约 3%。因此，在“所有颜色”下生成的一批十种颜色，通常会包含多种鲜明的颜色，很少出现粉彩色或炭灰色。当你需要特定的一类颜色时，可以在“颜色类型”中选择：“鲜艳”正好对应这一群组，“粉彩”、“深色”、“低饱和”和“灰度”也各自对应自己的群组。“自定义”选项可以让你设定自己的“色相”、“饱和度”和“明度”范围，色相范围可以跨过 0，所以从 330 到 30 会得到红色系。范围会依据页面显示的 HSL 代码来检查，因此没有代码会落在范围之外；如果范围内的颜色数量不足以满足“生成数量”，页面会让你把范围放宽，而不是重复出现颜色。除此之外，重复是有可能的，但很少见：勾选“不重复”即可排除这种情况；不勾选时，从整个范围抽取的 50 种颜色中出现两个相同颜色的概率大约是 13,700 分之一。
随机颜色常常被用作背景，这就带来了一个色块本身无法用肉眼回答的问题：上面的文字看得清吗？网页无障碍指南 WCAG 要求普通文字的对比度至少达到 4.5:1。就这个页面能生成的所有颜色来测算，黑色文字在其中大约 65% 的颜色上能达到这个标准，白色文字大约在 36% 的颜色上能达到；不存在两者都达不到标准的颜色：两者中较好的一方总能达到至少 4.58:1。因此，对于任何随机背景，黑色或白色文字总有一个能通过标准，页面会告诉你是哪一个。每种颜色旁都会显示一个小徽章，用较易读的那种文字颜色写出 Aa，后面跟着对比度数值。这个数值是向下取整的，所以永远不会高估一个颜色的表现，而且当你在颜色选择器中更换颜色时，它会随之更新。这个徽章只比较黑色和白色文字；如果是品牌色或其他文字颜色，请用对比度检测工具核对。
随机不等于和谐。批次中的每种颜色都是独立抽取的，彼此互不知晓，因此生成器从不会按设计师的意义构建配色方案——没有互补色对，没有类似色系列，也没有共同的明度。更窄的范围会改变一批结果的风格，但不会改变这一点：粉彩色或一系列蓝色调依然是逐个出现的，彼此之间没有任何联系。这正是它的意义所在：它会给你一个你自己不会选的颜色，而这恰恰能打破习惯或创作上的瓶颈。要把一次随机的发现变成真正有用的东西，留住你喜欢的颜色并围绕它进行搭配，而不是不停点击“生成”，直到整套颜色碰巧凑到一起。保持它的色相不变，逐步调整明度，得到更浅或更深的变体，或者把色相旋转 180 度，得到一个形成对比的搭配色。“HSL 代码”这种格式能把这些操作变成计算，而不是靠猜。
为什么选择这个随机颜色生成器？
——每种颜色都在你的浏览器中通过 Web Crypto API 生成，不会上传任何内容
——全部 16,777,216 种颜色的概率完全相等，每个通道使用一个随机字节
——同一颜色的 HEX、RGB 和 HSL 代码，可任意组合显示
——一次最多生成 50 种颜色，每种都配有色块和文字对比度徽章
——鲜艳、粉彩、深色、低饱和和灰度，或者你自己设定的色相、饱和度和明度范围
——需要时可选择不重复，HEX 可以大写或不带 #
——点击代码即可复制，或在浏览器自带的颜色选择器中更改任意颜色
——全部复制、保存为文件，以及保存在浏览器中的最近 10 批历史记录
——免费且不限次数：无需注册，没有配额限制，不会在我们的服务器上保存任何内容
只要是在还没有人决定用什么颜色之前就需要一个颜色的场合，随机颜色都能派上用场。设计师用它来打破创作瓶颈，找到自己惯用的配色方案永远想不到的起点。开发者用它来填充原型图、占位内容和头像，在真正的主题还没确定之前先给图表中的每个系列一个自己的颜色，并测试界面在面对未曾专门设计过的背景时的表现——在“所有颜色”下生成的一批 50 种颜色，几乎总会包含至少一种非常暗或非常亮的颜色，而“深色”或“粉彩”这两个选项则能把测试对准其中一端。生成艺术创作者和游戏原型开发者会把这些数值直接输入代码，而 RGB 形式正好适用于大多数图形库。教师会把三种格式并排展示，说明同一个颜色既可以写成代码，也可以写成三个通道，还可以写成色环上的一个位置，并说明 HSL 版本为什么是四舍五入的。而任何需要为列表打标签、加标记或按颜色分类的人，都能得到彼此有区分度的颜色，而不必为选哪个而烦恼。
有几条实实在在的限制值得了解。这是一个生成器，不是配色工具：它不会构建色彩和谐关系，也不会在其他颜色变化时固定住某一种颜色，而更窄的范围只是给出同一类的颜色，不是特意挑选出来搭配在一起的颜色。对比度徽章只比较黑色和白色文字。这个页面处理的是屏幕能显示的 sRGB 颜色——HEX、RGB 和 HSL——不涉及透明度，也不支持 CMYK、Pantone、OKLCH 或具名的 CSS 颜色；如果用于印刷，请在你的印刷流程中核对颜色，而不要依赖屏幕上的代码。同一个代码在不同屏幕上看起来也可能略有差异，因为屏幕的校准并不统一。HSL 数值是四舍五入的，如上所述；除非勾选了“不重复”，否则一批结果不会被检查是否有重复。这个页面真正能保证的东西范围更窄，但是精确的：它的 16,777,216 种颜色中的每一种，或者你设定的范围内的每一种颜色，在每次点击时的概率都相同，都取自你浏览器的密码学随机源，并且永远不会发送到任何地方。