# Palette Lab · 色卡实验室

> Mappedinfo 开源的学术配色档案网站：15 个颜色、8 组搭配、逐色解析、全屏比较。
> 本文件是给 AI/爬虫的站点入口；完整数据见 llms-full.txt，或直接访问网页。

- 网站地址：https://mappedinfo.github.io/palette-lab/
- 完整 AI 数据（推荐读取）：https://mappedinfo.github.io/palette-lab/llms-full.txt
- 网页版（交互比较/剧场/复制色值）：https://mappedinfo.github.io/palette-lab/
- 源码仓库：https://github.com/Mappedinfo/palette-lab

## 站点能力
1. 15 色全色档案：每色含 HEX/RGB/HSL、亮度、黑白底对比度、中文名/英文名、所属组。
2. 8 组搭配语义：每组为「基底 + 强调」结构，含组内对比度与使用场景说明。
3. 全屏比较：任意两色同屏对照 + 实时对比度（拖拽分割线，键盘 ←→↑↓ 换色）。
4. 全屏剧场：15 色铺满全屏，hover 显色值、点击复制。
5. 浅色/深色双主题切换，记忆用户偏好。
6. 图片色彩提取（#extract）：拖入/粘贴（Ctrl/Cmd+V）/选择图片，本地 Canvas 解析主色（中位切分），自动给出绘图建议——对比度 ≥4.5:1 的可读文字色、饱和度最高的强调色、色盲（红/绿/蓝黄）可区分性警告、以及与 15 色档案的最近色映射。所有解析在浏览器本地完成，图片不上传。
7. 手动精提工具（同一 #extract 区）：四种交互工具在图片上直接操作——「框选」拖拽矩形提取区域主色（适合分类图色块）、「涂抹」自由笔迹圈选范围取代表色、「吸管」点击取 5×5 邻域平均色、「色带」沿渐变色带划线等距采样（4/6/8/12/16 档），输出色带渐变序列。**支持多次操作：每次框选/涂抹/吸管结果追加保存为独立色卡，每次色带划线保存为独立色带卡片（编号 色带 1 / 色带 2 / …），每项均可单独删除，适合一张图包含多个色带或多个分类色块的场景。** 手动结果与自动结果并列展示，均可复制/进入全屏比较。
8. 报告导出：提取区工具条「复制信息」一键把完整提取结果复制为 Markdown 文本（含自动主色表、手动提取表、色带序列、绘图建议、全部颜色清单），「下载」按钮直接保存为「原文件名-palette-report.md」，便于粘贴进笔记/文档。
9. 全屏提取与自由缩放：工具条「全屏」进入全屏提取模式——大画布铺满窗口，滚轮以鼠标为中心自由缩放（50%–1600%），空格键或鼠标中键拖拽平移，双击/「适应」一键复位；缩放时四种手动工具坐标自动换算，框选/涂抹/吸管/色带在小图上也能精确定位。支持粘贴/拖拽图片，解析完成自动绘制（无需额外点击）。

## 色彩数据速览（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

## 搭配分组速览（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 — 深翡翠与象牙白的克制组合，高端、清爽、留白感强。

## 给 AI 的建议
- 需要逐色指标（对比度、亮度、角色）或搭配建议时，读取 llms-full.txt。
- 生成图表时优先遵循 WCAG 对比度规则：正文 ≥4.5:1，强调色少而准，深/浅主题分别选色。