企业官网建设流程全解析

tsParticles SkinAndOrganic 调色板：从 12 色暖色盘到网页粒子背景的完整接入指南

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles

tsParticles 的 SkinAndOrganic（皮肤与有机）调色板是 Earth 系列下的一套暖色系粒子配色方案，它以肤色、砖红、大地棕等自然有机色调为核心，配合浅米色背景与source-over混合模式，适合营造温暖、柔和的粒子背景氛围。本文以 palettes/earth/skinAndOrganic/README.md 为骨架，结合仓库内源码与引擎实现，完整讲解该调色板的色彩构成、加载方式、配置示例以及底层工作机理，帮助你快速把该调色板接入网页项目。

调色板概览：一套只定义颜色、不定义行为的选项包

和 tsParticles 的其他调色板一样，SkinAndOrganic 的核心定位是：只提供色彩，不提供完整的粒子行为。它定义了一个可以被引擎按名称引用的颜色集合（fill 颜色、背景色、混合模式），而粒子的数量、形状、运动、大小等行为仍需由使用者搭配基础运行包与粒子配置来完成。

这一点在 README 的 Quick checklist 中有明确说明，其接入步骤为：

1. 安装@tsparticles/engine（或直接使用下方 CDN 打包文件）；
2. 加载一个基础包（例如@tsparticles/basic），并在tsParticles.load(...)之前调用loadSkinAndOrganicPalette；
3. 在配置项中应用该调色板，并配合一份最小的粒子配置。

调色板定义的只是颜色，需要与运行时包和粒子选项搭配使用。

色彩构成：12 色填充 + 浅米色背景

根据 README 的 Colors 表格，SkinAndOrganic 提供 12 个填充色与 1 个背景色：

• Background（背景色）：#f8f0e8
• Blend mode（混合模式）：source-over
• Fill（填充）：true

这些色值在仓库源码 palettes/earth/skinAndOrganic/src/options.ts 中得到了完整印证：

import { type IPalette } from "@tsparticles/engine"; export const options: IPalette = { name: "Skin & Organic", background: "#f8f0e8", blendMode: "source-over", colors: { fill: { enable: true, value: [ "#FFDDCC", "#FFBBAA", "#FF9988", "#FF7766", "#EE5544", "#CC3322", "#AA2211", "#882211", "#FFCCAA", "#DDAA88", "#BB8866", "#886644", ], }, }, };

从色值分布可以看出，这套配色从浅粉白（#FFDDCC）过渡到橙红（#FF9988、#FF7766）、砖红（#CC3322）、深红棕（#AA2211、#882211），再到大地棕（#DDAA88、#BB8866、#886644），整体呈现暖色渐变、层次自然的感觉，适合模拟皮肤、大地、木质等有机质感。

IPalette接口本身还支持 stroke（描边）配置，定义于 engine/src/Core/Interfaces/IPalette.ts，包含background、blendMode、colors、name四个字段；其中colors可以是单组或多组（SingleOrMultiple<IPaletteColors>），每组可包含fill与可选的stroke，fill支持enable、可选opacity和颜色value，stroke则额外支持width。

接入方式一：CDN / Vanilla JS / jQuery

对于不使用构建工具的场景，README 给出了通过 jsDelivr 加载两个脚本的 CDN 方案：

<script src="https://cdn.jsdelivr.net/npm/@tsparticles/basic@4/tsparticles.basic.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/palette-skinAndOrganic@4/tsparticles.palette-coloredSmokeAmber.min.js"></script>

需要注意的是，README 中第二个脚本的tsparticles.palette-coloredSmokeAmber.min.js文件名沿用了模板复制时的命名，而当前仓库package.json（palettes/earth/skinAndOrganic/package.json）显示本包的实际名称为@tsparticles/palette-skin-and-organic，因此在实际引用时应以@tsparticles/palette-skin-and-organic为基准核对 CDN 产物文件名。

加载脚本后即可设置粒子：

(async engine => { await loadBasic(engine); await loadSkinAndOrganicPalette(engine); const options = { particles: { number: { value: 200 }, shape: { type: "circle" }, size: { value: { min: 10, max: 15 } }, move: { enable: true, speed: 2, }, }, palette: "skinAndOrganic", }; await engine.load({ id: "tsparticles", options, }); })(tsParticles);

这段示例的关键点：

• loadBasic(engine)先加载基础运行能力（粒子创建、移动、绘制等）；
• loadSkinAndOrganicPalette(engine)注册调色板，必须在load之前调用；
• 配置项中通过顶层palette: "skinAndOrganic"引用该调色板；
• number、shape、size、move等字段定义了粒子的数量、形状、大小与运动行为——这些正是调色板之外需要自己补充的部分。

自定义覆盖

README 特别强调：该调色板中的所有选项都可以像标准 tsParticles 安装一样，通过显式定义对应属性进行覆盖。也就是说，palette只是提供默认颜色来源，你仍然可以在particles中直接写color、background等字段来覆盖调色板导入的默认值，实现个性化调整。

接入方式二：框架组件库

如果使用的是 React.js、Vue.js（2.x 与 3.x）、Angular、Svelte、jQuery、Preact、Inferno、Solid、Riot 或 Web Components 等带有 tsParticles 组件库的框架，只需在组件库文档中查看对应接入方式，并在初始化前调用loadSkinAndOrganicPalette函数即可。仓库根目录下的 wrappers 目录集中存放了上述各框架的官方封装实现，可供参考。

源码级原理：调色板如何被注册与解析

注册环节：pluginManager.addPalette

loadSkinAndOrganicPalette的实现位于 palettes/earth/skinAndOrganic/src/index.ts：

import { type Engine } from "@tsparticles/engine"; import { options } from "./options.js"; const paletteName = "skin-and-organic"; export async function loadSkinAndOrganicPalette(engine: Engine): Promise<void> { await engine.pluginManager.register(e => { e.pluginManager.addPalette(paletteName, options); }); }

可以看到，调色板实际上被注册在引擎的pluginManager中，内部维护一个palettes: Map<string, IPalette>，addPalette(name, palette)即向该 Map 写入键值对（见 engine/src/Core/Utils/PluginManager.ts）。

同时仓库还提供了懒加载变体 palettes/earth/skinAndOrganic/src/index.lazy.ts，其差异在于将options的导入改为动态import("./options.js")，以支持按需加载；而 palettes/earth/skinAndOrganic/src/browser.ts 则把loadSkinAndOrganicPalette挂载到全局对象上，供 CDN 直接调用。

消费环节：options 解析与导入

调色板被引用后，引擎在加载配置时会执行导入逻辑，分别在两层完成解析：

• 顶层Options的#importPalette负责导入背景色与混合模式：通过pluginManager.getPalette(palette)取到IPalette后，将background映射为配置的背景色，将blendMode映射为画布混合模式，见 engine/src/Options/Classes/Options.ts；
• 粒子级ParticlesOptions的#importPalette负责把colors中的fill/stroke映射为粒子绘制的 paint 默认值（包括enable、opacity、width等），见 engine/src/Options/Classes/Particles/ParticlesOptions.ts。

这一设计解释了 README 中"调色板只定义颜色、不定义行为"的原因：它本质上是一份被命名注册的默认色值来源，在配置解析阶段被"展开"进标准选项树，之后粒子的所有行为仍然由常规的 particles 配置决定。

效果预览与示例

仓库为每个调色板都提供了 1920x1080 的样例截图，SkinAndOrganic 的效果预览位于 palettes/earth/skinAndOrganic/images/sample.png。图中粒子以大小不一的圆形散布在浅米色（#f8f0e8）背景上，颜色覆盖浅粉、暖橙、砖红、深棕等色阶，整体氛围温暖柔和，视觉上带有自然有机的质感。

如需在本地复现该效果，可将上文 CDN 示例中的options保存为 JSON，通过 tsParticles 官方演示页面的自定义配置入口加载；也可以直接使用本仓库中的调色板源码配合@tsparticles/engine构建自己的最小示例。

相关资源

• 调色板与预设目录：仓库根目录 palettes 下按earth等主题分类存放了全部调色板（如 caustics、desertSand、mudAndDirt、oilSlick、rockAndGravel、rustAndCorrosion 等），每个调色板结构与 SkinAndOrganic 一致；
• 引擎核心文档：engine/README.md 与 engine/src 目录中的 Core、Options、Utils 等源码模块；
• 基础包说明：bundles/basic 提供了上文示例中用到的@tsparticles/basic。

小结

SkinAndOrganic 是 tsParticles 生态中一套即插即用的暖色系粒子配色方案：12 个从浅粉到深棕的填充色、浅米色背景与source-over混合模式，配合loadSkinAndOrganicPalette注册函数和顶层palette配置项即可快速接入。理解其"颜色与行为解耦"的设计思路后，你可以在任何标准 tsParticles 配置中自由覆盖其默认值，把这套有机色调融入自己的粒子背景场景。

【免费下载链接】tsparticlestsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.项目地址: https://gitcode.com/GitHub_Trending/ts/tsparticles