🎨

准备生成颜色

在右侧面板中配置设置,然后点击"生成颜色"

显示颜色之间的WCAG对比度
模拟色觉缺陷者看到的颜色效果

暂无历史记录。快来生成一些颜色吧!

工作原理

我们的随机颜色生成器使用HSL色彩空间创建颜色,可精确控制色相、饱和度和亮度。可选择单色、和谐调色板或精美渐变。应用色温、饱和度和亮度筛选器。使用内置WCAG对比度计算器和色盲模拟器检查无障碍性。

常见使用场景

🌐

网页设计

为网站、应用程序和数字界面生成具有无障碍对比度的配色方案

📱

UI/UX设计

为用户界面创建和谐的调色板,支持WCAG合规性检查

🏷️

品牌与形象

为标志、品牌指南和营销材料发现独特的颜色组合

🎨

艺术与插画

为数字艺术、插画和创意项目寻找灵感调色板

功能特点

  • ✅ 单色、调色板和渐变模式
  • ✅ 6种色彩和谐规则(互补色、类似色、三色组等)
  • ✅ 色温、饱和度和亮度筛选器
  • ✅ WCAG对比度检查器(AA/AAA合规)
  • ✅ 色盲模拟(protanopia、deuteranopia、tritanopia)
  • ✅ 锁定颜色并重新生成其他颜色
  • ✅ 导出为CSS变量、JSON或文本
  • ✅ HEX、RGB、HSL和CMYK格式

什么是随机颜色生成器?

随机颜色生成器是一款为设计师、开发者和艺术家创建随机颜色、调色板和渐变色的在线工具。这款配色方案生成器使用HSL色彩空间数学来生成颜色,可精确控制色相、饱和度和亮度,因此优于简单的随机HEX生成器。无论您需要网站的单一强调色、品牌形象的和谐五色调色板,还是UI背景的精美渐变,这款调色板生成器都能即时提供专业效果。设计师依靠这款工具进行快速原型设计,开发者用它生成主题色彩,艺术家从中获取创作灵感。

颜色生成器在HSL(色相、饱和度、亮度)色彩空间中生成颜色,并将其转换为多种输出格式,包括用于网页开发的HEX代码、用于数字设计的RGB值、用于CSS样式的HSL以及用于印刷准备的CMYK近似值。您可以在三种模式下生成颜色:用于快速选色的单色模式、用于创建2至10种和谐颜色的调色板模式,以及生成带有即用CSS代码的精美颜色过渡的渐变模式。和谐系统使用色彩理论规则确保美观的组合——互补色位于色轮对面以获得最大对比度,类似色相邻排列以实现平滑过渡,三色组形成等边三角形以提供丰富多样性,分裂互补色提供比完全互补方案更低张力的对比。

使这款颜色生成器脱颖而出的是内置的无障碍工具集。WCAG对比度检查器计算任意两种生成颜色之间的对比度,并显示它们是否满足WCAG 2.0 AA(正常文本4.5:1,大号文本3:1)和AAA(正常文本7:1,大号文本4.5:1)无障碍标准。这对于需要确保颜色选择对所有用户可读的网页设计师来说至关重要。色盲模拟器展示您生成的颜色在protanopia(红色盲)、deuteranopia(绿色盲)和tritanopia(蓝色盲)色觉缺陷者眼中的样子,帮助您创建适用于约8%男性和0.5%女性色觉缺陷人群的包容性设计。

筛选系统让您对生成的颜色进行精细控制。色温筛选器将颜色限制为充满活力的设计所用的暖色调(红、橙、黄)、营造平静美感的冷色调(蓝、绿、紫)或均衡构图的中性色调。饱和度筛选器让您生成柔和细腻设计的柔和色、大胆表达的鲜艳色、精致调色板的低饱和色调或引人注目的霓虹色。亮度筛选器控制颜色的明暗——明亮用于轻盈设计、中等用于均衡界面、深色用于戏剧性主题。锁定功能让您保留喜爱的颜色同时重新生成其余颜色,非常适合逐步构建调色板。将颜色导出为直接用于样式表的CSS自定义属性、程序化使用的JSON或文档记录的纯文本。生成历史记录跟踪您之前的所有配色方案,方便您重新查看和复用喜爱的组合。