配色资料

生机绿配色

其他绿色自然色卡

完整提示词

结合原始资料，按需应用到自己的设计中。

为我的项目应用一套「生机绿配色」，以从浅绿到深绿的四阶色彩呈现自然、生长的氛围。请交付可直接使用的 CSS 自定义属性。

【色值清单】
浅芽绿 #D8E8B4：浅色背景；嫩叶绿 #A8CC72：辅助色；生机绿 #5EAA59：主色；深林绿 #286B45：强调色。以上均为近似建议值，需对照原图校对。

【使用示例】
植物类产品界面可用浅芽绿作页面背景、生机绿作主要操作色、深林绿作标题和重点信息。环保活动页面可用嫩叶绿点缀卡片。避免大面积使用深林绿搭配低对比度文字。

【质量要求】
在 `:root` 下提供语义清晰的 `--color-*` 变量，并提供暗色模式映射；检查文字与背景的对比度，必要时补充适合阅读的文字色。色值是近似建议，最终效果须对照原图人工校对。

配色需对照原参考图人工校对

【参考资源】
- 资料详情：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/01.jpg（每日色卡 Vol.9 的绿色主题原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/02.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/03.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/04.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/05.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/06.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/07.jpg（同组绿色色卡原图）
- 原始设计参考图：https://ui.undoai.cn/palettes/vibrant-green-palette-vol-9/refs/08.jpg（同组绿色色卡原图）

复制始终包含全文

使用方法

先对照原始配色图；点击色值即可复制 HEX。色值按已存资料展示，近似值与调整值需要在实际项目中再次校验对比度。

设计规范

查看 Markdown 全文，复制或下载 design.md 后交给开发者使用。

下载 design.md

# 生机绿配色 — design.md

内容版本：sha256:3b967c794374f8ac99c2843a685f4db0d4db50b1f1f325844001afeab4ff5eca

本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。

## 元数据记录

- 资产：palettes/vibrant-green-palette-vol-9；语义类型：palette。
- 分类：其他。
- 标签：绿色、自然、色卡。
- 场景：自然主题品牌视觉、植物类产品界面、环保活动页面、春季宣传素材。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 绿色主题：每日色卡 Vol.9 以富有生机的绿色为主题；具体色值需对照原图校对。
- AI 描述方式：向 AI 描述为一组从浅绿到深绿的四阶配色，色块可设为等宽、间距 8px；以下色值均为近似建议。

### 实际文件与参考资源

- `meta.yml`
- `refs/01.jpg`（sha256:7196595d5c39db17903ad4526a27bdd9e4519cd50ca47084e1976f170f11e4bc）
- `refs/02.jpg`（sha256:1dc96b3d96e0cd3790eae01f8d3310c603065528e43462e4df5e7bd8b4be356e）
- `refs/03.jpg`（sha256:49f59352416da167be3e885e496d5473b80959808512e76852673b740c87b9ac）
- `refs/04.jpg`（sha256:5a17c12a82d83fced9ff1965be65d1672ed3765495c1719da468fb4f2034238e）
- `refs/05.jpg`（sha256:63940c0ea873a52dac8bdc26e431249aeac9c6ba11b9f5425c56fd60a96e75f5）
- `refs/06.jpg`（sha256:0633b4f73f33fcb509235989d2a954774b5580ff8a04af351d7cb6693b5a734c）
- `refs/07.jpg`（sha256:8c4abc89c2c3d89e842f0abe69558914fa6e10158550b9d4a2ddf0ea9d0c3438）
- `refs/08.jpg`（sha256:93cf0c3f465d6a6da28563db5c78c4ab42ed6ce715fdd9dbd39b6cf3a9856176）
- 参考图：`refs/01.jpg`；每日色卡 Vol.9 的绿色主题原图。
- 参考图：`refs/02.jpg`；同组绿色色卡原图。
- 参考图：`refs/03.jpg`；同组绿色色卡原图。
- 参考图：`refs/04.jpg`；同组绿色色卡原图。
- 参考图：`refs/05.jpg`；同组绿色色卡原图。
- 参考图：`refs/06.jpg`；同组绿色色卡原图。
- 参考图：`refs/07.jpg`；同组绿色色卡原图。
- 参考图：`refs/08.jpg`；同组绿色色卡原图。
- 实现摘要：未提供 demo.html。

### 色值与语义记录

- `#D8E8B4` 浅芽绿；角色：浅色背景
- `#A8CC72` 嫩叶绿；角色：辅助色
- `#5EAA59` 生机绿；角色：主色
- `#286B45` 深林绿；角色：强调色


### 原图采样记录

- 方法：whole-reference-dominant-colors。
- `#FEFADC`；原图像素覆盖比例 1.71%。
- `#F8EDEC`；原图像素覆盖比例 1.22%。
- `#DCE8E4`；原图像素覆盖比例 0.62%。
- `#BDEBA3`；原图像素覆盖比例 1.70%。
- `#7BDBA3`；原图像素覆盖比例 1.07%。
- `#A0AE62`；原图像素覆盖比例 0.75%。
- `#99A559`；原图像素覆盖比例 0.72%。
- `#75A95D`；原图像素覆盖比例 1.50%。
- `#72765E`；原图像素覆盖比例 1.00%。
- `#193960`；原图像素覆盖比例 0.77%。
- `#0D2C48`；原图像素覆盖比例 1.75%。
- `#142440`；原图像素覆盖比例 0.96%。

### 确定性对比度

- 未提供。

## 未提供

- 未结构化记录的色值与语义角色不作推断；亮点描述属于元数据声明，图片标题不能用于推断色号，对比度计算仅覆盖文档中明确列出的色值组合。

## 实现建议

- 将已记录的颜色分配到背景、表面、正文、次要文字、边框与强调角色；未提供的 token 需另行定义。
- 在真实文本、控件、禁用与错误状态上验证对比度，分别检查浅色与深色模式。
- 不要仅依赖颜色表达状态，配合文本、图标或形状；新增组合必须重新计算对比度。