# Palette Lab · 完整 AI 色彩档案

站点：https://mappedinfo.github.io/palette-lab/（Mappedinfo · 开源学术配色档案）
生成时间：自动生成于构建前，数据与网页完全一致。

## 1. 颜色总表（15 色）

- 奶油黄（Cream）| HEX #FFE59D | RGB 255,229,157 | HSL 44°,100%,81% | 亮度 0.797 | 白底对比度 1.24:1 | 黑底对比度 16.95:1 | 浅色基底（适合大面积背景/填充） | 所属组 1
- 天蓝（Sky）| HEX #64BBCF | RGB 100,187,207 | HSL 191°,53%,60% | 亮度 0.428 | 白底对比度 2.20:1 | 黑底对比度 9.55:1 | 中性数据色（适合图表序列） | 所属组 1
- 琥珀（Amber）| HEX #FFD15D | RGB 255,209,93 | HSL 43°,100%,68% | 亮度 0.677 | 白底对比度 1.45:1 | 黑底对比度 14.53:1 | 高饱和强调色（适合数据点/标注，勿作正文） | 所属组 2
- 宣纸（Rice Paper）| HEX #F5E6D0 | RGB 245,230,208 | HSL 36°,65%,89% | 亮度 0.806 | 白底对比度 1.23:1 | 黑底对比度 17.11:1 | 浅色基底（适合大面积背景/填充） | 所属组 3
- 朱砂（Vermilion）| HEX #9E1D1C | RGB 158,29,28 | HSL 0°,70%,36% | 亮度 0.082 | 白底对比度 7.94:1 | 黑底对比度 2.65:1 | 深色（适合文字/强调） | 所属组 3
- 冰蓝（Ice）| HEX #F1F6FF | RGB 241,246,255 | HSL 219°,100%,97% | 亮度 0.918 | 白底对比度 1.08:1 | 黑底对比度 19.37:1 | 浅色基底（适合大面积背景/填充） | 所属组 4
- 品红（Magenta）| HEX #EE1969 | RGB 238,25,105 | HSL 337°,86%,52% | 亮度 0.199 | 白底对比度 4.22:1 | 黑底对比度 4.98:1 | 深色（适合文字/强调） | 所属组 4
- 薄荷（Mint）| HEX #90E0D6 | RGB 144,224,214 | HSL 173°,56%,72% | 亮度 0.641 | 白底对比度 1.52:1 | 黑底对比度 13.82:1 | 中性数据色（适合图表序列） | 所属组 5
- 珊瑚（Coral）| HEX #E97A46 | RGB 233,122,70 | HSL 19°,79%,59% | 亮度 0.317 | 白底对比度 2.86:1 | 黑底对比度 7.34:1 | 深色（适合文字/强调） | 所属组 5
- 香芋（Lilac）| HEX #F2E1FF | RGB 242,225,255 | HSL 274°,100%,94% | 亮度 0.799 | 白底对比度 1.24:1 | 黑底对比度 16.99:1 | 浅色基底（适合大面积背景/填充） | 所属组 6
- 青草（Grass）| HEX #61AC4C | RGB 97,172,76 | HSL 107°,39%,49% | 亮度 0.326 | 白底对比度 2.79:1 | 黑底对比度 7.51:1 | 深色（适合文字/强调） | 所属组 6
- 紫罗兰（Violet）| HEX #CCA4E3 | RGB 204,164,227 | HSL 278°,53%,77% | 亮度 0.449 | 白底对比度 2.10:1 | 黑底对比度 9.99:1 | 中性数据色（适合图表序列） | 所属组 7
- 靛蓝（Indigo）| HEX #6583E0 | RGB 101,131,224 | HSL 225°,66%,64% | 亮度 0.244 | 白底对比度 3.57:1 | 黑底对比度 5.88:1 | 深色（适合文字/强调） | 所属组 7
- 翡翠（Jade）| HEX #008E6B | RGB 0,142,107 | HSL 165°,100%,28% | 亮度 0.204 | 白底对比度 4.13:1 | 黑底对比度 5.08:1 | 深色（适合文字/强调） | 所属组 8
- 象牙（Ivory）| HEX #FBFFF2 | RGB 251,255,242 | HSL 78°,100%,97% | 亮度 0.984 | 白底对比度 1.02:1 | 黑底对比度 20.69:1 | 浅色基底（适合大面积背景/填充） | 所属组 8

## 2. 搭配分组（8 组）

- 组1 晨光（Morning Glow）：#FFE59D + #64BBCF | 组内对比度 1.77:1 — 奶油黄与天蓝的暖冷对话，适合柔和渐变与图例底色。
- 组2 琥珀（Amber）：#FFD15D — 高饱和琥珀强调色，单独出场即焦点，适合标注关键数值。
- 组3 宣纸与朱砂（Rice Paper & Vermilion）：#F5E6D0 + #9E1D1C | 组内对比度 6.47:1 — 米白底配深朱红，对比度 6.47:1，学术严谨感的首选。
- 组4 冰蓝与品红（Ice & Magenta）：#F1F6FF + #EE1969 | 组内对比度 3.89:1 — 冷色冰面托起炽热品红，适合阴性/阳性对照表达。
- 组5 薄荷与珊瑚（Mint & Coral）：#90E0D6 + #E97A46 | 组内对比度 1.88:1 — 青绿与橙红互为补色（色相差 154°），对比强烈而活泼。
- 组6 香芋与青草（Lilac & Grass）：#F2E1FF + #61AC4C | 组内对比度 2.26:1 — 淡紫铺底、草绿点睛，自然的亲和配色，适合生态主题。
- 组7 紫罗兰与靛蓝（Violet & Indigo）：#CCA4E3 + #6583E0 | 组内对比度 1.70:1 — 同族冷色深浅呼应，稳重优雅，适合层级化数据。
- 组8 翡翠与象牙（Jade & Ivory）：#008E6B + #FBFFF2 | 组内对比度 4.07:1 — 深翡翠与象牙白的克制组合，高端、清爽、留白感强。

## 3. 关键对比度矩阵

| 颜色 | 白底对比度 | 黑底对比度 | 亮度 |
|---|---|---|---|
| #FFE59D 奶油黄 | 1.24:1 | 16.95:1 | 0.797 |
| #64BBCF 天蓝 | 2.20:1 | 9.55:1 | 0.428 |
| #FFD15D 琥珀 | 1.45:1 | 14.53:1 | 0.677 |
| #F5E6D0 宣纸 | 1.23:1 | 17.11:1 | 0.806 |
| #9E1D1C 朱砂 | 7.94:1 | 2.65:1 | 0.082 |
| #F1F6FF 冰蓝 | 1.08:1 | 19.37:1 | 0.918 |
| #EE1969 品红 | 4.22:1 | 4.98:1 | 0.199 |
| #90E0D6 薄荷 | 1.52:1 | 13.82:1 | 0.641 |
| #E97A46 珊瑚 | 2.86:1 | 7.34:1 | 0.317 |
| #F2E1FF 香芋 | 1.24:1 | 16.99:1 | 0.799 |
| #61AC4C 青草 | 2.79:1 | 7.51:1 | 0.326 |
| #CCA4E3 紫罗兰 | 2.10:1 | 9.99:1 | 0.449 |
| #6583E0 靛蓝 | 3.57:1 | 5.88:1 | 0.244 |
| #008E6B 翡翠 | 4.13:1 | 5.08:1 | 0.204 |
| #FBFFF2 象牙 | 1.02:1 | 20.69:1 | 0.984 |

> 对比度依据 WCAG 2.1 相对亮度公式计算。

## 4. 组内搭配对比度

- 组1 晨光：#FFE59D ↔ #64BBCF = 1.77:1
- 组3 宣纸与朱砂：#F5E6D0 ↔ #9E1D1C = 6.47:1
- 组4 冰蓝与品红：#F1F6FF ↔ #EE1969 = 3.89:1
- 组5 薄荷与珊瑚：#90E0D6 ↔ #E97A46 = 1.88:1
- 组6 香芋与青草：#F2E1FF ↔ #61AC4C = 2.26:1
- 组7 紫罗兰与靛蓝：#CCA4E3 ↔ #6583E0 = 1.70:1
- 组8 翡翠与象牙：#008E6B ↔ #FBFFF2 = 4.07:1

## 5. 使用建议

## AI 配色建议（供生成图表/文档时参考）

### 文字与背景
- 深色文字可用：#9E1D1C（白底对比度 7.94:1，符合 WCAG AAA）、#008E6B（4.13:1，AA）、#EE1969（4.22:1，AA）、#6583E0（3.57:1，大字号可作 AA 大字）。
- 纯白文字（#FFFFFF）在这 15 色上：朱砂 #9E1D1C（7.94:1）、翡翠 #008E6B（4.13:1）、品红 #EE1969（4.22:1）上可读性最好。
- 浅色基底（适合大面积背景/填充）：#FBFFF2、#F1F6FF、#F5E6D0、#F2E1FF、#FFE59D。
- 中性灰（#5C5749 类）不在这 15 色内，如需要辅助灰可自行补充，勿用高饱和色做正文。

### 强调色（少而准）
- 单组强调：琥珀 #FFD15D 或 品红 #EE1969 作为唯一强调色，其他全用灰阶。
- 双色强调：珊瑚 #E97A46 + 翡翠 #008E6B（互补，适合正/负对比）；品红 #EE1969 + 天蓝 #64BBCF（暖冷对照）。
- 避免将 #FFE59D、#90E0D6、#CCA4E3 等高亮浅色用作文字，它们适合填充和渐变。

### 图表序列色（按类别区分）
- 推荐序列：朱砂 #9E1D1C → 靛蓝 #6583E0 → 翡翠 #008E6B → 琥珀 #FFD15D → 品红 #EE1969 → 天蓝 #64BBCF → 珊瑚 #E97A46 → 青草 #61AC4C。
- 若需区分 8 组数据，可用每组强调色：#64BBCF、#FFD15D、#9E1D1C、#EE1969、#E97A46、#61AC4C、#6583E0、#008E6B。

### 深浅主题适配
- 深色背景（#101114）推荐：#90E0D6、#64BBCF、#FFD15D、#E97A46、#90E0D6 等中高亮色做主系列，避免深色 #008E6B、#9E1D1C 直接作数据点。
- 浅色背景（#FBF7F0 类）推荐：#9E1D1C、#008E6B、#6583E0、#EE1969 做主系列，浅色仅作基底。
- 网站本身已实现浅/深双主题切换，可参考其对比度自动计算逻辑。

### 无障碍（WCAG）
- 正文对比度须 ≥ 4.5:1（AA），大字 ≥ 3:1。
- 组 3（#F5E6D0 配 #9E1D1C）与 组 8（#FBFFF2 配 #008E6B）是推荐的正文级搭配。
- 组 1（#FFE59D 配 #64BBCF，1.77:1）仅适合装饰性渐变或大色块，不适合承载文字。

## 6. 站点使用说明（给 AI 访问者）

- 页面结构：Hero（简介）→ 全色档案（#palette）→ 搭配方案（#groups）→ 页脚。
- 交互：点击色卡打开详情；hover 色卡右上角按钮复制色值；分组卡片内「全屏比较」「剧场」按钮进入全屏模式。
- 主题：右上角太阳/月亮按钮切换浅深色，偏好存 localStorage（key: palette-lab-theme）。
- 技术：React 19 + Vite 8 + framer-motion，单页应用，路由为锚点。