材料色卡——官方约定
材料的颜色是以数据而不是图片的形式存储的。色卡就是把这些数据画出来： 在列表中、卡片上、货架槽位里，紧挨着名称、代表该材料的那块彩色形状。 本页是生成它的TigerSystem 官方约定，使同一种材料在任何地方都显示同样的色卡—— 在 Tiger Studio 中、在移动应用中、在网页上、在你自己的集成中。
使用“材料”而不是“线轴”是有意为之。 TigerTag 标识的是耗材线轴，但也可以标识配件、备件、树脂——
以及协议尚未增加的产品类型。该约定是针对一般的 id_type 编写的：
下面没有任何内容会读取产品类型，因此无论是什么材料，色卡的生成方式都相同。
它是规范性的。双色耗材在一个应用里显示柔和分割，在另一个应用里却显示硬边或完整渐变， 那么偏离本页的那个应用就有缺陷——这不是口味问题。 如果你无法精确复现某条规则（比如某个平台没有圆锥渐变）， 请实现非 CSS 平台中描述的最接近的等价做法并加以说明；不要自行发明另一种画面。
- 约定版本： 1.2——双色是 135° 柔和分割（纯色，20 % 混合接缝）， 而 Tricolor 外观是圆锥扫描（除非同时是 Rainbow）（1.1 把双色画成硬对角分割、把三色画成饼图；1.0 把双色垂直分割）
- 参考渲染器：
material-swatch-playground.html—— 在任何浏览器中打开即可，无需服务器，无依赖。涵盖每种情形、每种盒子形状、 实时取色器，以及它所生成的确切 CSS。
四种形状，仅此四种
Section titled “四种形状，仅此四种”| 形状 | 何时 | 几何 |
|---|---|---|
| 柔和分割 | 两种或三种硬边颜色——双色，或没有 Tricolor 外观的三种颜色 | 沿 135° 轴的 N 个等宽色带，第一种颜色在左上角；每种颜色保持纯色，只有以每条边界为中心、占对角线 20 %（SPLIT_BLEND）的接缝发生混合 |
| 渐变 | Rainbow，以及产品库声明的 gradient 类型 |
沿 135° 的平滑线性渐变，色标均匀分布——指向右下角，因此第一种颜色在左上角 |
| 饼图（Camembert） | 四种或更多硬边颜色——任何 N ≥ 4 的列表 | N 个等大的圆锥扇区，第一种颜色从 12 点钟方向开始，顺时针扫过 |
| 圆锥扫描 | Tricolor 外观（id 24）且不同时是 Rainbow，以及产品库声明的 conic_gradient |
从 12 点钟方向起顺时针的平滑圆锥渐变，最后回到第一种颜色——色轮 |
直白地说：两种或三种硬色构成柔和分割，四种或更多构成饼图，平滑颜色构成渐变， Tricolor 外观则旋转成圆锥扫描——整个系统中恰好只有一个角度， 即 135°，由柔和分割和渐变共用。
双色和三色是柔和分割——渐变的轴向，分割的清晰度。
与渐变的轴向和顺序相同（第一种颜色在左上角），
但每种颜色在自己的色带上保持纯色，只有每条边界处 20 % 的接缝发生混合。
令 seg = 100 / N、h = SPLIT_BLEND / 2 = 10，则第 i 种颜色从
i·seg + h（第一种为 0）保持到 (i+1)·seg − h（最后一种为 100）。
只在拆分颜色列表的那个函数中实现一次（N ≤ 3 → 柔和分割，N ≥ 4 → 饼图），
这样每个调用方都能得到；绝不要画成镜像。
为什么两种或三种颜色用柔和分割：硬边仍然像是两个或三个分离的对象—— 在缩略图上如此，在产品照片周围的颜色边框上更是如此，因为照片遮住了中心，只剩下互不相连的彩色条。 完整渐变解决了这个问题，却让颜色发灰，因此两者都不能呈现真实的颜色。 柔和分割让每种颜色保持纯色，只混合接缝： 一种多色调材料，真实的颜色，适用于任何盒子形状。20 % 是在所有界面上凭肉眼选定的 （更宽的接缝会让三色中间那种颜色几乎没有纯色带）。 为什么从四种颜色起用饼图：沿同一条对角线的四条或更多色带会变得太细而难以辨认， 而扇区边界保持棱角分明、容易识别——从盒子中心测量， 所以无论盒子的宽高比如何，N 个扇区都保持清晰可读。为什么是 135°：它是系统中唯一的角度， 由柔和分割和每个渐变共用。 为什么 Tricolor 外观用圆锥扫描：一条对角线上的三条色带会让中间那种颜色只剩一小条； 色轮让三种颜色分量相同，并且在任何尺寸下都能一眼看出是“三种颜色”。
数据来自哪里
Section titled “数据来自哪里”有两层数据供给渲染器，它们并不是一回事。
芯片——至多三种颜色
Section titled “芯片——至多三种颜色”TigerTag 带有三个颜色槽位和一个外观。仅此而已：芯片上没有渐变类型，也从来没有过。
| 字段 | 类型 | 含义 |
|---|---|---|
color_r / color_g / color_b |
int 0-255 |
槽位 1 |
color_r2 / color_g2 / color_b2 |
int 0-255 |
槽位 2 |
color_r3 / color_g3 / color_b3 |
int 0-255 |
槽位 3 |
color_a |
int 0-255 |
Alpha——渲染时忽略；绝不要混合材料颜色 |
id_aspect1 / id_aspect2 |
int |
任一槽位都可以携带着色外观 |
三个外观 id 会改变形状（其参考表也带有权威的 color_count）：
| id | 标签 | color_count |
形状 |
|---|---|---|---|
252 |
Bicolor | 2 | 柔和分割，135° |
24 |
Tricolor | 3 | 圆锥扫描 |
145 |
Rainbow | 3 | 渐变，135° |
其他所有外观（Silk、Matt、Glitter 等）的 color_count ≤ 1，不影响形状。
按 id 匹配，而不是按标签——标签是显示字符串，可能被翻译。
绝不要通过数槽位来猜有几种颜色。 芯片文档始终带有全部三个槽位： 缺失的分量存为
0，所以在单色材料上，槽位 2 和 3 读出来是纯黑。 颜色的数量来自外观，而不是来自槽位。
产品库——更丰富、仅限云端的描述
Section titled “产品库——更丰富、仅限云端的描述”官方产品库中的产品可以比芯片更精确地描述其颜色。这两个字段只存在于云端/产品数据中—— 它们从不会写入芯片：
| 字段 | 类型 | 含义 |
|---|---|---|
online_color_list |
string[] |
有序的颜色，RRGGBB 或 RRGGBBAA，# 可选。顺序有意义：索引 0 是第一个扇区 / 第一个色标。 |
online_color_type |
string |
渲染指令：mono、multi、gradient、conic_gradient。其他任何值，或缺失，均按 multi 处理。 |
当两层数据都存在时，以产品库为准——它是对同一产品更精确的描述。
按此顺序评估，首个匹配者胜出。顺序体现了优先级： 产品库优先于芯片，明确的颜色类型优先于猜测，而外观只在没有在线颜色列表时才发言。
令 LIST = 经标准化后的 online_color_list，TYPE =
online_color_type，SLOTS = 芯片上非空的槽位。
| # | 条件 | 结果 |
|---|---|---|
| 1 | LIST ≥ 2 且 TYPE == "conic_gradient" |
平滑圆锥扫描，最后回到第一种颜色 |
| 2 | LIST ≥ 2 且 TYPE == "gradient" |
渐变——即使只有两三种颜色；产品库要求平滑渐变，所以不会变成柔和分割 |
| 3 | LIST ≥ 3，外观为 Tricolor，不是 Rainbow |
LIST 的圆锥扫描 |
| 3b | LIST ≥ 2 |
2 或 3 种颜色时为 LIST 的柔和分割，4 种或更多时为 LIST.length 个扇区的饼图 |
| 4 | LIST == 1 |
纯色——优先于芯片颜色 |
| 5 | 外观同时是 Rainbow 和 Tricolor | 渐变，3 个色标 |
| 6 | 外观同时是 Rainbow 和 Bicolor | 渐变，2 个色标 |
| 7 | 外观 Rainbow | 基于 SLOTS 的渐变；1 个槽位 → 纯色；0 个槽位 → 6 色默认值 |
| 8 | 外观 Tricolor | 基于 SLOTS 的圆锥扫描（缺少槽位 3 → 基于槽位 1 和 2 的 2 色柔和分割，不会重复槽位 1） |
| 9 | 外观 Bicolor | 基于槽位 1 和 2 的柔和分割，135° |
| 10 | 其他 | 纯色槽位 1；什么都没有 → #1c2030 |
当外观没有可用颜色时的默认值：
| 情形 | 默认值 |
|---|---|
| Rainbow，没有颜色 | #ff0000 #ff8800 #ffff00 #00cc00 #0000ff #8b00ff |
| Rainbow + Tricolor | #ff4d4d #ffd93d #4da3ff |
| Rainbow + Bicolor | #ff7a00 #8a2be2 |
| Tricolor | #cccccc #888888（缺少槽位 3 → 2 色柔和分割，不重复槽位 1） |
| Bicolor | #cccccc #ffffff |
| 什么都没有 | #1c2030 |
在评估阶梯之前，对 online_color_list 的每一项应用：
- 去除首尾空白，去掉开头的
#。 - 如果是 8 个字符（
RRGGBBAA），保留前 6 个——alpha 被丢弃，绝不混合。 - 只接受
^[0-9a-fA-F]{6}$。其他任何内容都从列表中丢弃，而不是使用默认值—— 格式错误的条目绝不能悄悄变成黑色。 - 输出时重新加上
#。
丢弃发生在阶梯运行之前，所以 ["ff0000", "oops"] 是单色列表（规则 4），
而不是两个扇区的饼图。
芯片槽位转换为 # 加每个分量两位十六进制数，且仅当三个分量都是数字时才转换。
确切的表达式
Section titled “确切的表达式”设 c1…cN 为标准化后的颜色，step = 360 / N，seg = 100 / N，SPLIT_BLEND = 20：
/* Soft split — 2 or 3 hard colours: rule 3 with 2-3 colours, rules 8-9. Each colour solid over its band, a 20 % blended seam at each boundary. */linear-gradient(135deg, c1 0% 40%, c2 60% 100%) /* N = 2 */linear-gradient(135deg, c1 0% 23.33%, c2 43.33% 56.67%, c3 76.67% 100%) /* N = 3 */
/* Ramp — rainbow and a declared gradient: rules 2, 5-7 */linear-gradient(135deg, c1, c2, …)
/* Camembert — four or more hard colours: rule 3 with ≥ 4 colours */conic-gradient(c1 0deg <step>deg, c2 <step>deg <2·step>deg, …)
/* Catalogue-declared conic gradient — rule 1 (first colour repeated to close) */conic-gradient(from 0deg, c1, c2, …, c1)
/* Mono — rules 4, 10 */# RRGGBB任何实现都必须精确复现这些结果。
| 输入 | 期望 |
|---|---|
{online_color_list:["FF5722"]} |
#FF5722 |
{online_color_list:["000000FF"]} |
#000000 |
{online_color_list:["e02424","2463e0"]} |
linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%) |
{online_color_list:["e02424","2463e0","22a06b"]} |
linear-gradient(135deg, #e02424 0% 23.33%, #2463e0 43.33% 56.67%, #22a06b 76.67% 100%) |
{online_color_list:["e02424","2463e0","22a06b","f0a020"]} |
conic-gradient(#e02424 0deg 90deg, #2463e0 90deg 180deg, #22a06b 180deg 270deg, #f0a020 270deg 360deg) |
{online_color_list:["e02424","2463e0"],online_color_type:"gradient"} |
linear-gradient(135deg, #e02424, #2463e0) |
{color_r:224,color_g:36,color_b:36,color_r2:36,color_g2:99,color_b2:224,id_aspect2:252} |
linear-gradient(135deg, #e02424 0% 40%, #2463e0 60% 100%) |
{id_aspect1:145} |
linear-gradient(135deg, #ff0000, #ff8800, #ffff00, #00cc00, #0000ff, #8b00ff) |
{} |
#1c2030 |
TigerTag 水印
Section titled “TigerTag 水印”任何绘制材料颜色而没有产品照片的界面，都要在上面叠加 TigerTag 标志作为水印。
| 规则 | 值 |
|---|---|
| 位置 | 色块的右上角 |
| 不透明度 | 1——始终如此，在每个界面上 |
| 大小 | 色块的百分比，绝不用固定像素大小，使其随界面缩放 |
| 变体 | 深色背景 → 纯白色标志。浅色背景 → 带轮廓的黑色标志。 |
这两个标志文件不是彼此可着色的变体——每个都自带固定的填充，规则规定的是用哪个文件。 绝不要通过 CSS 滤镜、蒙版颜色或不透明度让其中一个冒充另一个： 带轮廓的图稿是另一幅图，而不是白色那幅的反相。
选择变体——取所生成表达式中第一种颜色的相对亮度：
luminance = (0.299·R + 0.587·G + 0.114·B) / 255 // dark when < 0.5如果你是通过匹配 CSS 字符串中的第一个 # 十六进制值来提取这种颜色的，请先匹配 8 位，
然后是 6 位、4 位、3 位。否则 #RRGGBBAA 会匹配到它的前六位，
随后的单词边界检查失败，整个匹配丢失——
这会被当作“浅色”，把黑色标志放到黑色线轴上。计算之前要去掉 alpha 并展开简写。
非 CSS 平台
Section titled “非 CSS 平台”Flutter、SwiftUI、Android 或任何画布渲染器实现的是同样的三种形状。 角度始终按 CSS 的方式测量：0° 指向上方，角度顺时针增大。
- 饼图——以色块为中心的扫描渐变，从 12 点钟方向开始，顺时针，
在每个
k · 360/N度处设硬色标。Flutter：SweepGradient，带transform: GradientRotation(-pi/2)。 除非色块是正方形，否则不要用路径绘制的饼形来近似——扇区边界必须顺着盒子走。 仅用于四种或更多硬色。 - 柔和分割——从左上角到右下角的线性渐变，使用上面的色标：
每种颜色保持纯色，每条边界处混合 20 % 的接缝。用于两种或三种硬色（双色、三色）。
Flutter：
LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight)，colors加倍，stops为[0, .4, .6, 1]（N = 2）或[0, .2333, .4333, .5667, .7667, 1]（N = 3）。 - 渐变——同一轴向，色标均匀分布，不保持。用于 Rainbow 以及产品库声明的
gradient类型。 Flutter：Alignment.topLeft → Alignment.bottomRight。
本页就是源头。这里的改动意味着每一个 TigerSystem 界面的改动： 先修订本页，提升约定版本，然后重新对齐各实现，并对照参考渲染器检查。
另见： TigerTag 芯片、.ttag 格式、开发者概览