11 组 Waves 预设一步到位：DiceBear 头像配色速查

【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 🌍项目地址: https://gitcode.com/gh_mirrors/di/dicebear

想给产品里一排头像统一换暖色调，却不想逐个调参数？DiceBear 的 Waves 风格自带 11 组 Waves 预设：参数直接抄走，头像配色立刻到位。该风格随@dicebear/styles10.3.0 于 2026 年 8 月入库，全部预设数据集中在 waves.json 一个文件里。

先出效果：30 秒用上预设

不用装任何库，把这条链接贴进浏览器就能看到 sepia 预设的效果：

https://api.dicebear.com/11.x/waves/svg?seed=Dov&backgroundColor=8a6a48,6b4f35,a3855f,54402c

四个暖棕色做背景，种子是Dov。在 JS 库里也只要 6 行：

import { Style, Avatar } from '@dicebear/core'; import def from '@dicebear/styles/waves.json' with { type: 'json' }; const avatar = new Avatar(new Style(def), { seed: 'Dov', backgroundColor: ['8a6a48', '6b4f35', 'a3855f', '54402c'], });

Playground 里选中预设后，每个旋钮还能继续拧。

11 组预设怎么选：按视觉效果归成 4 类

🎨 第一类：换色相 — sepia / greyscale / duotone

只动backgroundColor一个选项：

• sepia：四个暖棕8a6a48、6b4f35、a3855f、54402c。波浪的颜色会自动在黑白里挑对比更强的那个，换调色板就是换整张画面。适合复古界面、内容型页面。
• greyscale：四个灰阶343437、5e5e62、8c8c90、b6b6b9，一点色相都没有。适合打印样式表、禁用态这类"颜色不该承载含义"的场景。
• duotone：只给一个靛蓝3d4272。所有头像共用同一底色，只有波浪在变，是这个风格最克制的形态。

换色相和换饱和度，是同一根杠杆吗？后 4 组预设证明是。

第二类：饱和度两端 — muted ↔ electric、pastel-wall ↔ bold-pop

• muted：六个低饱和灰扑扑的颜色（6b705c到9c6b58），头像在场，但不是屏幕上最响的东西。
• electric：六个全饱和荧光色（ff2e88、00e5ff、ffe600、7cff00、ff6a00、b400ff），比风格自带色更冲。
• pastel-wall：五个柔和浅色（ffe3ea、e3edff、e2f5e9、fdf1d4、efe6ff），让一套头像"属于彼此"的最轻方式。
• bold-pop：五个高饱和色（ff5d8f、ffb703、43aa8b、4d96ff、b57bff），pastel-wall 的响亮对照，繁忙页面里站得住。

🌅 第三类：特殊背景 — sunrise / stencil

• sunrise：backgroundColor取ffd9b0和ffa8bf两色，外加backgroundColorFill: "linear"与backgroundColorAngle: 135。唯一示范渐变背景的预设，两色哪个在上仍由种子决定。
• stencil：一个近黑16161c。人人同一块底色，一组"肖像"变成一张"图标表"。

💫 第四类：动效与构图 — animated / close-up

• animated：整个预设只有animation: true。Waves 的动画默认关闭，开启后由animationSpeed控制节奏（2 表示快一倍），且遵循系统的prefers-reduced-motion。
• close-up：只设scale: 1.4。围绕画布中心等比放大，波浪溢出画布边缘，小尺寸下更像"大画面里的一处细节"。

一览（按"动效 → 背景 → 饱和度 → 色相"排序）：

为什么同一预设会生成不同头像

把预设当成一份预调好的配方，种子就是一颗骰子。sepia 只写了"背景用哪 4 个色"，波浪的形态、层数，以及backgroundColor这个数组最后抽到哪一个，都留给骰子定。所以预设不会把风格锁成单一画面：它只是给头像空间设了个上限，剩余的多样性继续由种子贡献；同一种子加同一组选项，永远得到同一张 SVG，想固定某张图也可以。

把预设搬进三种环境

同一个 sepia 预设，三种写法——换一行参数就是另一组预设：

JS 库

import { Style, Avatar } from '@dicebear/core'; import definition from '@dicebear/styles/waves.json' with { type: 'json' }; const style = new Style(definition); const avatar = new Avatar(style, { seed: 'Dov', backgroundColor: ['8a6a48', '6b4f35', 'a3855f', '54402c'], }); const svg = avatar.toString();

HTTP API

数组选项在 URL 里用逗号分隔：

https://api.dicebear.com/11.x/waves/svg?seed=Dov&backgroundColor=8a6a48,6b4f35,a3855f,54402c

切到 sunrise 也只是多两个查询参数：&backgroundColorFill=linear&backgroundColorAngle=135，颜色换成ffd9b0,ffa8bf。

CLI

npm install --global dicebear之后，列表型选项同样接受逗号分隔：

dicebear create waves --seed "Dov" --backgroundColor 8a6a48,6b4f35,a3855f,54402c

想加预设的维护者看这里

新增预设是一条三步管线，都在 apps/docs/scripts/ 下。

第一步是人工的：跑render-presets.ts waves渲染联系表——每个预设一行、同一批种子横排。预设本来就是靠眼睛挑的，深色预设吞掉线条、两种颜色打架这类问题，只能靠看。

文档构建会自动跑后两步。validate-presets.ts管住眼睛管不住的：冻结的选项集在风格变动时不报错，被重命名的组件会让选项匹配不到任何东西、组件悄悄消失，构建照样是绿的。它先核对选项键与枚举值是否仍合法，再用 6 个探针种子（Felix、Aneka、Milo、Luna、Dara、Erik）真渲染一遍，任何一颗种子失败、或产物里连一个<use>都没有，都算错误。

最后sync-preset-pages.ts把风格幂等地接进文档站：在风格页## Options之前插入 Presets 预告区，并生成presets/index.md画廊页；--check模式只检查不写入，适合 CI。

预设挑好后，拷进任意语言的核心库、HTTP API 或 CLI 都零成本；预设没碰到的选项会随种子继续变化，11 组参数足够覆盖四种完全不同的"气质"。想深入的话，直接看数据源 waves.json、风格页 Waves 和 核心选项文档。

【免费下载链接】dicebearDiceBear is an avatar library for designers and developers. 🌍项目地址: https://gitcode.com/gh_mirrors/di/dicebear