企业官网建设流程全解析

Tadi 实验室：Splash 颜色格式简介

Splash 是一种颜色格式，每个 Splash 颜色由一个三位数表示，每个数字代表一个不同的颜色通道，依次为红色、绿色和蓝色。例如，900 表示红色通道为最大值（9），而绿色通道（0）和蓝色通道（0）均为 0。000 代表黑色，999 代表白色，555 代表灰色，079 代表浅蓝色等。

Splash 颜色能帮助使用者在挑选颜色时避免犹豫不决，是一种“情感工具”，让使用者不再纠结于挑选“完美”的颜色。常用颜色的组合方式并不多，如 090 绿色、099 青色、009 蓝色、409 紫色、909 粉色、900 红色、940 橙色、990 黄色等。不过，它仍为使用者提供了一定的风格选择空间。下面是个人制作的 [颜色主题](/colour)：093 绿色、289 青色、059 蓝色、529 紫色、947 粉色、922 红色、942 橙色、991 黄色。这种限制让使用者更能接受不完美，感觉很自由。

所有 Splash 颜色列表

Splash 颜色只有 1000 种，所以可以全部列出来：000001002……998999。这个列表不是由浏览器生成的，而是静态的，事先被生成，且足够小，可以全部展示，不会占用太多空间。

这是为 [Cellpond](/explore/cellpond) 开发并使用的一种策略，也是它运行速度快的部分原因。这意味着用户可以在拖放式用户界面中处理离散的颜色值，而无需处理大数字，只需处理 1 到 9 的数字。

实现 Splash 颜色

实现 Splash 颜色很简单，由于它足够“轻量”，可以直接从头开始构建，无需依赖库或框架。

例如，可以编写一个将 Splash 颜色转换为十六进制颜色的函数：

```javascript
function getHexFromSplash(splash) {
// 将通道提取到数组中
const splashChannels = splash.toString().padStart(3, "0").split("");

// 将“0 到 9”重新映射到“0 到 255”
const rgbChannels = splashChannels.map((v) => Math.floor((v / 9) * 255));

// 转换为十六进制
const hexChannels = rgbChannels.map((v) => v.toString(16).padStart(2, "0"));
return "#" + hexChannels.join("");
}
```

该函数将每个通道的值从 0 到 9 重新映射到 0 到 255，然后将其转换为十六进制，最后将它们拼接在一起。

不过，也可以用任何喜欢的方式实现它。在 Cellpond 中，为每个通道手动挑选了十六进制值，以使生成的颜色更符合应用的主题和需求。例如，需要最深的颜色在黑色背景前可见，所以在主题中，000 并不是纯黑色。而且喜欢颜色中多一些蓝色和绿色，所以对所有颜色都做了相应的调整，像 222 这样的颜色看起来会比预期更偏蓝或偏绿一些，虽然可能不太容易察觉，但确实如此。

以下是 Cellpond 中的一组颜色：093 绿色、289 青色、059 蓝色、529 紫色、947 粉色、922 红色、942 橙色、991 黄色。这些颜色比原始 Splash 颜色更柔和。

为了实现这一点，手动编写了一个每个通道的查找表，然后将 Splash 数字映射到该表上：

```javascript
const CHANNEL_VALUES = [
['17', '37', '46', '62', '80', '9f', 'ae', 'cc', 'f2', 'ff'],
['1d', '43', '62', '80', '9f', 'ae', 'cc', 'de', 'f5', 'ff'],
['28', '46', '62', '80', '9f', 'ae', 'cc', 'de', 'f7', 'ff']
];

function getHexFromSplash(splash) {
// 将通道提取到数组中
const splashChannels = splash.toString().padStart(3, "0").split("");

// 查找每个通道的十六进制值
const hexChannels = splashChannels.map((v, i) => CHANNEL_VALUES[i][v]);
return "#" + hexChannels.join("");
}
```

这样，可以将特定的主题偏好抽象出来，让用户使用更易读的 Splash 数字进行操作。

当然，正如之前所说，“一千”并不是一个很大的数字，所以如果愿意，也可以使用查找表，无需进行计算：

```javascript
// 简单！
function getHexFromSplash(splash) {
return SPLASH_TO_HEX[splash];
}

// 很长！（但也不是特别长）
const SPLASH_TO_HEX = [
"#000000", "#00001c", "#000038", ……, "#998999"
];
```