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

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?seedDovbackgroundColor8a6a48,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-popmuted六个低饱和灰扑扑的颜色6b705c到9c6b58头像在场但不是屏幕上最响的东西。electric六个全饱和荧光色ff2e88、00e5ff、ffe600、7cff00、ff6a00、b400ff比风格自带色更冲。pastel-wall五个柔和浅色ffe3ea、e3edff、e2f5e9、fdf1d4、efe6ff让一套头像属于彼此的最轻方式。bold-pop五个高饱和色ff5d8f、ffb703、43aa8b、4d96ff、b57bffpastel-wall 的响亮对照繁忙页面里站得住。 第三类特殊背景 — sunrise / stencilsunrisebackgroundColor取ffd9b0和ffa8bf两色外加backgroundColorFill: linear与backgroundColorAngle: 135。唯一示范渐变背景的预设两色哪个在上仍由种子决定。stencil一个近黑16161c。人人同一块底色一组肖像变成一张图标表。 第四类动效与构图 — animated / close-upanimated整个预设只有animation: true。Waves 的动画默认关闭开启后由animationSpeed控制节奏2 表示快一倍且遵循系统的prefers-reduced-motion。close-up只设scale: 1.4。围绕画布中心等比放大波浪溢出画布边缘小尺寸下更像大画面里的一处细节。一览按动效 → 背景 → 饱和度 → 色相排序预设改了什么适合谁close-upscale: 1.4小尺寸头像、细节构图animatedanimation: true需要动效的首页stencil单色16161c图标表、品牌统一sunrise渐变 135° 角暖调渐变展示bold-pop5 个饱和色繁忙页面pastel-wall5 个浅色柔和产品页electric6 个全饱和色视觉焦点muted6 个灰扑色头像居次要位置duotone单色3d4272极简品牌页greyscale4 个灰阶打印、禁用态sepia4 个暖棕色复古、内容页为什么同一预设会生成不同头像把预设当成一份预调好的配方种子就是一颗骰子。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?seedDovbackgroundColor8a6a48,6b4f35,a3855f,54402c切到 sunrise 也只是多两个查询参数backgroundColorFilllinearbackgroundColorAngle135颜色换成ffd9b0,ffa8bf。CLInpm 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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考