同源设计合集 · 3 项

色调情绪层级 · ÖDÜN 克制植物色调等 4 项合集

每次只加载当前项

配色资料

色调情绪层级

其他色调明度饱和度

完整提示词

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

为我的项目应用一套「色调情绪层级」配色，以浅红铺陈背景、深红建立层级、亮红吸引视线，并用灰红表现安静的辅助信息。请以 CSS 自定义属性交付。

【色值清单】

- 浅红 `#E8B5B1`：轻盈色阶，用于柔和背景。
- 灰红 `#A77F7C`：安静色阶，用于辅助区域与次要文字。
- 深红 `#713E3B`：沉稳色阶，用于标题和主要文字。
- 亮红 `#D94D48`：视觉重点，用于按钮和关键提示。

【使用示例】教学卡片以浅红为背景、深红为标题、灰红为辅助信息、亮红标出关键概念；品牌海报可用深红建立主体层级，以亮红突出行动入口。避免大面积使用亮红，或仅靠颜色区分必须识别的信息。

【质量要求】在 `:root` 下定义语义清晰的 `--color-*` 变量，并提供 `prefers-color-scheme: dark` 的变量映射。检查文字与背景的对比度；以上色值若与参考图存在差异，以人工对照结果为准。

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

【参考资源】
- 资料详情：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/
- 原始设计参考图：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/refs/01.png（色调主题配图，具体内容待核对）
- 原始设计参考图：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/refs/02.png（色调主题配图，具体内容待核对）
- 原始设计参考图：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/refs/03.png（色调主题配图，具体内容待核对）
- 原始设计参考图：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/refs/04.png（色调主题配图，具体内容待核对）
- 原始设计参考图：https://ui.undoai.cn/palettes/tone-emotion-hierarchy/refs/05.png（色调主题配图，具体内容待核对）

复制始终包含全文

使用方法

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

设计规范

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

下载 design.md

# 色调情绪层级 — design.md

内容版本：sha256:eef83061260c77afa1ae8182926f7d0ceed46b83d0f84cb32cce6ff5e854b633

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

## 元数据记录

- 资产：palettes/tone-emotion-hierarchy；语义类型：palette。
- 分类：其他。
- 标签：色调、明度、饱和度。
- 场景：色彩设计教学、品牌色阶规划、海报视觉层级。
- 平台：未提供。
- 风格：未提供。

### 亮点声明

- 明度与饱和度：同一色相通过加白、加黑、加灰和提高饱和度，呈现轻盈、沉稳、安静与靠近的感受。
- 向 AI 描述效果：描述为“固定红色色相，制作明度相差约 20%、饱和度相差约 25% 的色阶；背景最浅，重点最高饱和”。

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

- `meta.yml`
- `refs/01.png`（sha256:14d359e440e36fb435583241315a5b9009f0524733b5c4bf2ff1e493cf4a299d）
- `refs/02.png`（sha256:70929101ecfceb70faafc1c080a1f417d574ec476d31e1a1f52c461d30a66efa）
- `refs/03.png`（sha256:349a8d328ee968bdc128b9b6fd39f417287f3414e1e57f1b0b02b6cecbcae926）
- `refs/04.png`（sha256:edd752117c4c414c34d1637f5c77bdf1864f4e0e76d857994eb3b7f7873eaefa）
- `refs/05.png`（sha256:c9f96c663fa8ad6429d01e545525385ac51e48047aaf2fdbfd136d0808158617）
- 参考图：`refs/01.png`；色调主题配图，具体内容待核对。
- 参考图：`refs/02.png`；色调主题配图，具体内容待核对。
- 参考图：`refs/03.png`；色调主题配图，具体内容待核对。
- 参考图：`refs/04.png`；色调主题配图，具体内容待核对。
- 参考图：`refs/05.png`；色调主题配图，具体内容待核对。
- 实现摘要：未提供 demo.html。

### 色值与语义记录

- `#E8B5B1` 浅红；角色：轻盈色阶
- `#A77F7C` 灰红；角色：安静色阶
- `#713E3B` 深红；角色：沉稳色阶
- `#D94D48` 亮红；角色：视觉重点


### 原图采样记录

- 方法：whole-reference-dominant-colors。
- `#F7F4E9`；原图像素覆盖比例 2.17%。
- `#EFECE2`；原图像素覆盖比例 29.43%。
- `#E7E2D8`；原图像素覆盖比例 6.03%。
- `#E0DCD4`；原图像素覆盖比例 0.33%。
- `#DBD5CB`；原图像素覆盖比例 8.03%。
- `#D4CBBF`；原图像素覆盖比例 0.75%。
- `#B9B3AA`；原图像素覆盖比例 2.05%。
- `#AEAAA2`；原图像素覆盖比例 0.54%。
- `#685054`；原图像素覆盖比例 0.26%。
- `#090909`；原图像素覆盖比例 0.71%。
- `#040404`；原图像素覆盖比例 0.90%。
- `#000000`；原图像素覆盖比例 1.08%。

### 确定性对比度

- 未提供。

## 未提供

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

## 实现建议

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