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 颜色转换为十六进制颜色的函数javascriptfunction 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 数字映射到该表上javascriptconst 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];