随机 颜色生成器

以 HEX、RGB 或 HSL 格式生成随机颜色。按调色板风格筛选 — 暖色、冷色、柔和色、深色或霓虹。

颜色生成器
// HEX、RGB 或 HSL 格式的随机颜色
HEX RGB HSL
点击生成
关于此工具

什么是随机颜色生成器?

我们的随机颜色生成器以三种最广泛使用的格式生成颜色:HEX(用于 HTML/CSS)、RGB(用于设计工具和 CSS)和 HSL(人类可读的色相/饱和度/亮度)。可即时切换格式而无需生成新颜色。

调色板筛选将生成限制在特定风格范围内:暖色生成红色、橙色和黄色;冷色生成蓝色和青色;柔和色生成浅色、柔和的色调;深色生成近黑色和深沉的色调;霓虹创建高饱和度、鲜艳的颜色,非常适合数字界面。

每种生成的颜色都会显示为实时预览方块,以便您在复制前查看效果。复制按钮始终输出当前选择的格式。

🎨
设计与UI
为网页和应用界面快速采样背景色、强调色或边框色调。
🖼️
艺术与插画
通过使用您不会有意识选择的颜色来打破创作瓶颈。
💻
前端开发
为原型、占位符或颜色对比测试快速获取 CSS 颜色值。
📊
数据可视化
为图表系列、地图分类或图形节点组生成不同的颜色。
使用方法

几秒即可上手

// 无需注册,无需安装 — 配置后即可生成。

01
选择调色板
选择"任意"获取完全随机的颜色,或按风格筛选:暖色、冷色、柔和色、深色或霓虹,以保持在有用的范围内。
02
选择格式
点击输出框上方的 HEX、RGB 或 HSL 来选择您想要的颜色格式。可以在不重新生成的情况下切换格式。
03
生成
点击生成颜色或按回车键。预览方块会即时更新,以便您在复制前查看颜色。
04
复制并使用
点击复制以获取所选格式的颜色值。直接粘贴到 CSS、Figma、Photoshop 或任何设计工具中。
常见问题

常见问题解答

HEX 是用于 HTML 和 CSS 的6位十六进制代码(如 #FF6B35)。RGB 指定红、绿、蓝通道(0-255)。HSL 描述色相(0-360)、饱和度(%)和亮度(%)— 对设计师来说更直观。
可以 — 点击 HEX、RGB 或 HSL 会切换当前显示颜色的输出格式,而不会生成新颜色。
每种调色板通过约束 RGB 通道范围来产生对应风格的颜色。暖色增强红/黄通道,冷色增强蓝色通道,柔和色将所有通道设置为高值,深色将所有通道设置为低值,霓虹产生高饱和度的通道峰值。
目前该工具每次点击生成一种颜色。多次点击并记录数值即可构建多色调色板。
HEX 和 RGB 在 CSS 中都完美适用。HSL 也是有效的 CSS 格式,通常更受青睐,因为您可以仅调整色相分量来操控颜色。