UUUP Tools

设计配色

粉彩配色生成 - 低饱和调色板工具

在浏览器本地生成低饱和粉彩与莫兰迪风格调色板，可选数量与风格并导出 HEX 列表或 CSS 变量，适合图表、背景与柔和 UI。

快速切换→调色板生成
粉彩配色调色板
快速切换:调色板生成色彩和谐搭配颜色格式转换

收藏工具

当前还没有选择收藏模式。

快捷操作

返回设计配色 浏览全部工具

你可以复制当前工具页链接，或在支持的设备上调用系统分享。

设计配色

粉彩配色生成

Click generating to harness beautiful low-saturation, high-lightness pastel (Macaron / Morandi) aesthetics suitable for modern background components.

CSS 变量

等待生成调色板。

算法思路

Traditional random hex strings produce muddy and stark colors. Pastel algorithms strictly enforce H (0-360 random), S (60-80% saturation), and L (75-90% lightness) in HSL space, then convert explicitly to hex code ensuring safe UI visibility harmony without any design skill prerequisite.

使用场景

  • 为图表随机一组柔和系列色
  • 生成低饱和背景与标签色
  • 导出带前缀的 CSS 变量供主题使用

如何使用

  1. 选择数量与风格（柔和、暖色、冷色、莫兰迪、单色）
  2. 点击生成，可锁定需要保留的色块
  3. 复制 HEX 列表或 CSS 变量

示例输入输出

配置

数量 8，风格 Morandi，前缀 pastel

输出

--pastel-1: #c9b8a8; ...

FAQ

颜色是怎么生成的？

在 HSL 空间约束到较高明度、较低饱和度区间随机取样，而不是完全随机十六进制。

CSS 变量前缀能改吗？

可以。修改变量前缀后，导出的 --prefix-1 形式会同步更新。

工具列表

相关推荐

你可以从这里继续打开相近场景的工具，减少重复搜索。

调色板生成

调色板生成 - 色彩规则配色在线工具

可用

按单色、类似色、互补色、三角色或完全随机规则生成调色板，可锁定个别色块后继续随机，适合 UI 探索与品牌色衍生。

调色板 配色 色彩
打开工具

色彩和谐搭配

色彩和谐搭配 - 经典配色规则工具

可用

选定基准色后，按互补、类似、三角、四角、分裂互补或单色系规则生成配色方案，提供 UI 预览与 CSS 变量，适合品牌与组件配色。

配色 色彩 和谐
打开工具

颜色格式转换

颜色格式转换 - HEX RGB HSL 在线工具

可用

在浏览器本地将颜色在 HEX、RGB、HSL、HWB、CMYK 与 CSS 变量之间转换，支持取色器与随机色，适合设计稿取色、写样式和对齐品牌色。

颜色 HEX RGB
打开工具