随机颜色

单个/调色板/配色组

421 次访问

随机颜色生成器

随机色 / 配色方案(互补 / 三角 / 邻近 / 单色阶 / 四角)· HEX / RGB / HSL 一键复制

生成配置

配色结果

配色理论

· 互补色:色轮 180° 相对两色 · 对比强烈、抢眼(蓝橙 / 红绿)

· 三角色:色轮 120° 等距 3 色 · 和谐又不单调(红黄蓝)

· 邻近色:色轮相邻 30° 内 3 色 · 温和柔顺(蓝青绿)

· 单色阶:同色相 + 不同明度饱和度 · 极简专业

· UI 60-30-10 法则:主色 60% / 副色 30% / 强调色 10%

关于本工具

了解工具定位 · 使用场景 · 对比优势

随机生成单个颜色、一组调色板或完整配色方案,无需手动挑选色值。设计师快速搭色、前端调试样式、学生做色彩练习,都能直接取用 HEX/RGB/HSL 格式。所有颜色由浏览器本地生成,不上传任何数据。

使用场景

🎨

UI 原型配色

产品经理或设计师在 Sketch / Figma 中搭建低保真原型时,需要快速生成一组视觉和谐的色板来填充界面元素。本工具一次生成 5 种随机颜色,支持锁定某个主色后重新随机其余颜色,避免反复手动调色,10 秒内得到可用的浅色背景 / 深色按钮 / 中灰边框的配色方案。

📊

数据可视化配色

数据分析师做柱状图 / 折线图时,需要为每个系列分配一个可区分的颜色,但 Excel 默认色板只有 6 种。本工具提供「调色板」模式,一次生成 8–12 个色相均匀分布的颜色,确保相邻色块在色环上间隔 ≥ 30°,避免红绿相邻造成视觉混淆,适合直接用于图表系列填充。

🖌️

设计灵感发散

插画师或平面设计师在项目启动阶段陷入配色瓶颈,需要打破惯性思维。本工具「随机色」模式每次生成一个完全不可预测的颜色,配合「配色组」模式将 3 个随机色作为主色 / 辅色 / 点缀色,帮助跳出「蓝 + 灰」的安全区,发现从未试过的紫橙撞色或低饱和度黄绿搭配。

🎮

游戏 UI 皮肤

独立游戏开发者制作角色换装或主题皮肤时,需要批量生成不同色系的 UI 素材。本工具「调色板」模式输出 6 色一组,每色附带 HEX / RGB / HSL 值,可直接复制到 Unity 或 Cocos 的颜色字段。锁定主色(如角色衣服色)后随机辅色,快速迭代出「红金」「蓝银」「绿棕」多套皮肤方案。

🏫

课堂色彩实验

美术老师或设计讲师在课堂上演示「色相 / 饱和度 / 明度」三要素时,需要即时生成对比色块。本工具允许在 HSL 范围内限定参数(如固定饱和度 80%、明度 50%),只随机色相,学生可直观看到同饱和度下不同色相的视觉差异,比翻色轮图册更快更灵活。

对比矩阵本工具 vs 竞品 vs 传统方法

维度本工具Coolors.co传统方法(色卡/手工)
数据隐私纯浏览器生成,零上传需注册账号,数据存储于服务器完全离线,无数据泄露风险
处理速度即时生成(<0.1秒)2-5秒(含网络加载与渲染)数分钟至数小时(手工调色/查阅色卡)
离线可用完全离线(加载后断网仍可用)需联网访问完全离线
生成数量单次可生成1-100个颜色单次生成5个颜色(免费版)无限制(取决于色卡数量与手工速度)
收费模式完全免费,无隐藏付费免费版功能受限,Pro版$9/月色卡需购买,手工无成本
注册要求无需注册需注册账号无需注册
输出格式HEX/RGB/HSL/CMYK 即时复制HEX/RGB 导出需付费仅物理色卡,无数字格式
协作功能无协作功能支持团队调色板共享需面对面或拍照传递

使用指南

上手步骤 · 输入输出 · 避坑提示

使用步骤

  1. 在色相滑块上选择主色调(0-360°),或点击随机按钮快速生成
  2. 调整饱和度(0-100%)与明度(0-100%)滑块,右侧色块实时更新
  3. 点击「添加到调色板」将当前颜色存入下方色板列表
  4. 在调色板中点击任意色块可复制其 HEX 值到剪贴板
  5. 点击「导出配色组」将整个调色板以 JSON / CSS 变量格式下载

输入输出示例7 个典型场景,覆盖常规、边界与易错

输入输出说明
生成 1 个随机颜色#F3A1C2典型场景:单色随机,适合快速取色
生成 5 个随机颜色(调色板)#4B8B3A, #D9A0E1, #FF6B35, #2C5F7C, #E8C547常见用法:一次获取多个颜色组成调色板
生成 3 组互补色配色方案组1: #A23B72 → #5D8A3C; 组2: #E07A5F → #3D5A80; 组3: #81B29A → #F2CC8F边界 case:配色组输出,每组两个互补色
生成 1 个随机颜色(RGB 格式)rgb(243, 161, 194)典型场景:用户偏好 RGB 而非十六进制
生成 10 个随机颜色#C0392B, #2980B9, #27AE60, #F39C12, #8E44AD, #1ABC9C, #E74C3C, #3498DB, #2ECC71, #F1C40F边界 case:大量颜色请求,测试输出完整性
生成 0 个随机颜色(无输出,或提示“数量需大于 0”)易错 case:用户误输入 0,工具应友好提示
生成 1 个随机颜色(HSL 格式)hsl(340, 75%, 79%)典型场景:用户需要 HSL 值用于 CSS 或设计

常见错误对照7 个常踩的坑 · 错误 → 修复

1. 把颜色代码中的井号也当作随机种子

错误
随机生成 #FF5733 后,以为 '#' 是颜色值的一部分,复制到 CSS 时写成 'FF5733'
修复
CSS / HTML 中颜色值必须带 #,如 #FF5733;但复制到设计软件(如 Photoshop)时通常只要 6 位十六进制

# 是 CSS 中表示十六进制颜色的前缀,不是颜色值本身。不同软件对颜色输入的格式要求不同,注意上下文。

2. 误以为随机颜色是「安全色」

错误
拿到的随机颜色是 #8B4513(棕色),直接用于网页背景,认为所有随机色都是 216 种 Web 安全色
修复
随机颜色从 16,777,216 种颜色中均匀抽取,不保证是 Web 安全色(#RRGGBB 中每通道值为 00/33/66/99/CC/FF)

Web 安全色仅 216 种,用于旧显示器保证不抖动。现代设备无需此限制,随机色大概率不是安全色。

3. 把调色板模式当作「渐变色」

错误
调色板模式下生成了 5 个颜色 [#FF0000, #00FF00, #0000FF, #FFFF00, #FF00FF],以为它们按色相顺序排列形成渐变
修复
调色板模式每次独立随机抽取,颜色之间无关联顺序;想要渐变色应使用专门的渐变工具或 CSS linear-gradient

调色板模式是「一组独立随机色」,不是「色相连续过渡」。顺序每次刷新都会变,不能用于生成平滑过渡。

4. 把十六进制颜色直接当 RGB 数值用

错误
随机得到 #FF5733,在 CSS 中写 background-color: rgb(FF5733)
修复
CSS 中写 background-color: #FF5733 或 background-color: rgb(255, 87, 51)

十六进制 #FF5733 的 FF=255, 57=87, 33=51。CSS rgb() 函数只接受 0-255 的十进制整数或百分比。

5. 复制颜色时漏掉或混入空格

错误
从工具复制得到 '# FF5733'(# 后多一个空格)或 '#FF5733 '(末尾空格),粘贴到代码中报错
修复
复制后直接粘贴,不要手动加空格;如果从文本中复制,检查前后有无不可见字符

CSS 解析器对颜色值中的空格敏感,# 与十六进制之间不能有空格;末尾空格在某些严格解析器中也会被拒绝。

6. 把配色组颜色用于色盲用户不可区分的场景

错误
配色组生成了 #FF0000(红)和 #008000(绿),用于图表中区分两类数据
修复
对于图表等需要区分度的场景,改用色相/亮度差异更大的颜色,或配合形状/纹理标记

红绿色盲(约 8% 男性)无法区分红绿。随机配色组不考虑无障碍设计,关键场景应使用色盲友好的调色板。

7. 期望「刷新页面后颜色不变」

错误
刷新页面后颜色变了,以为工具出 bug
修复
工具每次加载都会重新随机生成颜色;如果需要固定颜色,手动记下十六进制值或截图保存

随机颜色工具无状态,不保存历史。每次刷新 / 点击生成按钮都会重新随机,这是预期行为。

工作原理

公式推导 · 流程图解 · 依据出处

核心公式

RGB = (R, G, B),其中 R, G, B ∈ [0, 255] 且为整数,通过伪随机数生成器(PRNG)均匀采样

变量说明

  • R — 红色通道值,0-255 整数
  • G — 绿色通道值,0-255 整数
  • B — 蓝色通道值,0-255 整数
  • PRNG — 伪随机数生成器,如 Xorshift128+

示例

生成一个随机颜色:PRNG 输出种子 0x3A7F,依次映射到 R=210, G=45, B=178,得到 RGB(210,45,178) 即 #D22DB2。

适用范围

适用于任意需要随机颜色的场景(设计调色板、数据可视化、游戏开发)。不适用于密码学安全随机数场景(需用 CSPRNG)。基于通用 PRNG 算法(如 Xorshift、Mersenne Twister),非真实物理随机源。

原理图

选择模式单个 / 调色板 / 配色组浏览器内生成JS 随机算法 (FE)展示结果色块 + 色值 (HEX/RGB)配置参数数量 / 色相 / 饱和度本地计算HSL → RGB 转换实时预览点击刷新 / 复制色值
用户输入 本地处理 输出结果

开发者集成

3 种主流语言 · 复制即用

import random

# 生成随机十六进制颜色
r = random.randint(0, 255)
g = random.randint(0, 255)
b = random.randint(0, 255)
hex_color = f"#{r:02x}{g:02x}{b:02x}"
print(hex_color)  # 例: #a3f07b

# 生成随机 HSL 颜色
h = random.randint(0, 360)
s = random.randint(0, 100)
l = random.randint(0, 100)
print(f"hsl({h}, {s}%, {l}%)")  # 例: hsl(210, 45%, 60%)

# 生成一组调色板(5 种颜色)
palette = [f"#{random.randint(0,255):02x}{random.randint(0,255):02x}{random.randint(0,255):02x}" for _ in range(5)]
print(palette)  # 例: ['#f1c40f', '#2ecc71', '#e74c3c', '#3498db', '#9b59b6']
package main

import (
	"fmt"
	"math/rand"
	"time"
)

func main() {
	rand.Seed(time.Now().UnixNano())

	// 生成随机 RGB 颜色
	r := rand.Intn(256)
	g := rand.Intn(256)
	b := rand.Intn(256)
	hex := fmt.Sprintf("#%02x%02x%02x", r, g, b)
	fmt.Println(hex) // 例: #a3f07b

	// 生成随机 HSL 颜色
	h := rand.Intn(361)
	s := rand.Intn(101)
	l := rand.Intn(101)
	fmt.Printf("hsl(%d, %d%%, %d%%)\n", h, s, l) // 例: hsl(210, 45%, 60%)

	// 生成一组调色板(5 种颜色)
	palette := make([]string, 5)
	for i := 0; i < 5; i++ {
		r := rand.Intn(256)
		g := rand.Intn(256)
		b := rand.Intn(256)
		palette[i] = fmt.Sprintf("#%02x%02x%02x", r, g, b)
	}
	fmt.Println(palette) // 例: [#f1c40f #2ecc71 #e74c3c #3498db #9b59b6]
}
// 生成随机十六进制颜色
const randomHex = () => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
};
console.log(randomHex()); // 例: #a3f07b

// 生成随机 HSL 颜色
const randomHSL = () => {
  const h = Math.floor(Math.random() * 361);
  const s = Math.floor(Math.random() * 101);
  const l = Math.floor(Math.random() * 101);
  return `hsl(${h}, ${s}%, ${l}%)`;
};
console.log(randomHSL()); // 例: hsl(210, 45%, 60%)

// 生成一组调色板(5 种颜色)
const palette = Array.from({ length: 5 }, () => randomHex());
console.log(palette); // 例: ['#f1c40f', '#2ecc71', '#e74c3c', '#3498db', '#9b59b6']

常见问题

8 个高频疑问

这个随机颜色工具怎么用?
打开页面后,直接点击「生成」按钮或按下键盘空格键,即可随机生成一个颜色。工具会同时显示颜色的 HEX(如 #FF5733)、RGB 和 HSL 值,方便直接复制使用。如果当前颜色不满意,可以继续点击生成下一个,没有次数限制。
生成的随机颜色能固定成调色板吗?
可以。工具内置了「调色板」模式,切换到该模式后,每次生成的颜色会自动添加到一个颜色列表中,而不是替换当前颜色。可以连续生成多个颜色,组成一组配色方案。每个颜色块右下角有删除按钮,可以移除不需要的颜色。调色板模式适合设计师快速收集配色灵感,或搭配出几组对比色。
为什么我点击生成后,颜色和上次很像?
纯随机生成时,确实可能出现相邻两次颜色在色相上接近的情况,因为随机算法对色相、饱和度、明度三个维度独立取值,不保证每次生成的颜色视觉上差异明显。如果需要快速获得差异大的颜色,可以切换到「高对比色」模式(如果有此选项),该模式会限制色相间隔在 120° 以上,保证相邻颜色视觉上明显不同。
生成的色值能直接用在 CSS 或设计软件里吗?
可以。工具同时输出 HEX、RGB 和 HSL 三种格式:HEX 值(如 #FF5733)可直接用于 CSS 的 color/background-color 属性;RGB 值(如 rgb(255, 87, 51))可粘贴到 Photoshop、Figma 的颜色面板中;HSL 值适合需要微调色相或饱和度的场景。点击任意色值即可复制到剪贴板,无需手动选中。
随机颜色的分布均匀吗?会不会偏亮或偏暗?
默认模式下,R、G、B 三个通道独立在 0-255 范围内均匀随机,因此长期来看颜色的明度分布是均匀的,不会系统性地偏亮或偏暗。但单次生成时,任何明度值都可能出现。如果希望生成的颜色集中在某个明度范围(如只生成浅色或深色),可以调整工具提供的「明度范围」滑块(如果有此功能)来限制输出区间。
这个工具在手机上能用吗?生成的色值好复制吗?
完全可以用。页面适配了移动端布局,按钮和色块在手机上触控操作流畅。生成后,色值区域会显示为可点击的卡片,点击任意格式(HEX/RGB/HSL)即可自动复制到手机剪贴板,并会有短暂提示「已复制」。不需要长按选中文字,操作体验比桌面端更方便。
生成的配色组能导出或保存到本地吗?
目前工具支持将调色板中的颜色列表一键复制为文本(每行一个 HEX 值),方便粘贴到笔记或设计文档中。如果需要导出为图片或 ASE 色板文件,可以手动截图保存色块区域,或使用浏览器自带的「另存为」功能保存整个页面。工具本身不存储任何历史记录,关闭页面后调色板清空。
为什么工具不显示色盲友好的颜色?
默认随机模式下,颜色生成不考虑色盲友好性(如红色-绿色对比对红绿色盲用户无法区分)。如果需要色盲友好的配色,建议手动设置色相范围避开红绿区间(红色 0-30°、绿色 90-150°),或者使用专门针对色盲优化的配色工具。本工具定位是纯随机生成,不包含色盲模拟或筛选功能。
选择 打开 +新窗口 esc关闭