页岩青灰主色
#708784同源设计合集 · 2 项
板岩灰冷调配色 · 花岗岩蓝灰配色等 6 项合集
配色资料
页岩青灰配色
正在读取尺寸打开原图 ↗
完整提示词
结合原始资料，按需应用到自己的设计中。
为我的项目应用一套**页岩青灰配色**，以低饱和冷灰与灰青色营造克制的矿物感。建议按浅色背景 60%、主色 30%、深色强调 10% 分配面积。
【色值清单】
- 浅雾青 `#C9D2CF`：页面背景、大面积留白。
- 页岩青灰 `#708784`：卡片、导航及主要视觉区域。
- 深矿青 `#3C5051`：标题、按钮及少量重点元素。
【使用示例】生活方式品牌页面可用浅雾青铺底、页岩青灰承载内容区、深矿青突出行动按钮；移动应用可用这套颜色建立安静的阅读界面。避免将深矿青用于大面积背景，也避免仅靠三种颜色区分状态。
【质量要求】交付 `:root` 下的 `--color-*` CSS 自定义属性，并提供暗色模式映射。色值均为近似建议，应用前须对照原图校对。
```css
:root {
--color-background: #C9D2CF;
--color-primary: #708784;
--color-accent: #3C5051;
}
@media (prefers-color-scheme: dark) {
:root {
--color-background: #3C5051;
--color-primary: #708784;
--color-accent: #C9D2CF;
}
}
```
配色需对照原参考图人工校对
【参考资源】
- 资料详情：https://ui.undoai.cn/palettes/shale-green-gray-palette/
- 原始设计参考图：https://ui.undoai.cn/palettes/shale-green-gray-palette/refs/01.jpg（第5组岩系冷调配色原图）复制始终包含全文
使用方法
先对照原始配色图；点击色值即可复制 HEX。色值按已存资料展示，近似值与调整值需要在实际项目中再次校验对比度。
设计规范
查看 Markdown 全文，复制或下载 design.md 后交给开发者使用。
# 页岩青灰配色 — design.md 内容版本：sha256:9672c915dc16906bbde360839f2fb804431582089ae115c2b2fb9c44251e7b1f 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明；未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产：palettes/shale-green-gray-palette；语义类型：palette。 - 分类：其他。 - 标签：岩系配色、青灰、低饱和。 - 场景：生活方式品牌、编辑设计、移动应用界面。 - 平台：未提供。 - 风格：未提供。 ### 亮点声明 - 配色方向：在冷灰中加入少量灰青色，形成克制的矿物感；色值为近似建议。 - AI 描述：描述为“低饱和页岩青灰配色，主色 #708784、浅色 #C9D2CF、深色 #3C5051，建议按 60:30:10 的面积比例使用”。 ### 实际文件与参考资源 - `meta.yml` - `refs/01.jpg`（sha256:f75b4cf3c1f5be6e65b6510619c98ba99075fc25c8c15c4caaa5c215160ac959） - 参考图：`refs/01.jpg`；第5组岩系冷调配色原图。 - 实现摘要：未提供 demo.html。 ### 色值与语义记录 - `#708784` 页岩青灰；角色：主色 - `#C9D2CF` 浅雾青；角色：背景色 - `#3C5051` 深矿青；角色：强调色 ### 原图采样记录 - 方法：whole-reference-dominant-colors。 - `#FEFFFE`；原图像素覆盖比例 2.88%。 - `#F1F2F2`；原图像素覆盖比例 0.40%。 - `#DADBDB`；原图像素覆盖比例 0.27%。 - `#C4CCCC`；原图像素覆盖比例 14.74%。 - `#808C88`；原图像素覆盖比例 14.77%。 - `#69716D`；原图像素覆盖比例 0.38%。 - `#606460`；原图像素覆盖比例 29.09%。 - `#3D403F`；原图像素覆盖比例 0.46%。 - `#2E3431`；原图像素覆盖比例 0.40%。 - `#282828`；原图像素覆盖比例 0.34%。 - `#000400`；原图像素覆盖比例 0.36%。 - `#000000`；原图像素覆盖比例 30.18%。 ### 确定性对比度 - 未提供。 ## 未提供 - 未结构化记录的色值与语义角色不作推断；亮点描述属于元数据声明，图片标题不能用于推断色号，对比度计算仅覆盖文档中明确列出的色值组合。 ## 实现建议 - 将已记录的颜色分配到背景、表面、正文、次要文字、边框与强调角色；未提供的 token 需另行定义。 - 在真实文本、控件、禁用与错误状态上验证对比度，分别检查浅色与深色模式。 - 不要仅依赖颜色表达状态，配合文本、图标或形状；新增组合必须重新计算对比度。
原始资料 · 1 张原图资料 · 支持缩放与全屏查看
色值清单
复制 HEX · 下载 SVG 色卡 · 来源未核验
浅雾青背景色
#C9D2CF深矿青强调色
#3C5051原图主色采样
来自像素采样，可能包含背景与装饰色。
#FEFFFE
#FEFFFE占比 2.9%#F1F2F2
#F1F2F2占比 0.4%#DADBDB
#DADBDB占比 0.3%#C4CCCC
#C4CCCC占比 14.7%#808C88
#808C88占比 14.8%#69716D
#69716D占比 0.4%#606460
#606460占比 29.1%#3D403F
#3D403F占比 0.5%#2E3431
#2E3431占比 0.4%#282828
#282828占比 0.3%#000400
#000400占比 0.4%#000000
#000000占比 30.2%DESIGN NOTES
为什么值得收藏
- 配色方向在冷灰中加入少量灰青色，形成克制的矿物感；色值为近似建议。
- AI 描述描述为“低饱和页岩青灰配色，主色 #708784、浅色 #C9D2CF、深色 #3C5051，建议按 60:30:10 的面积比例使用”。
GOOD FOR
适用场景
- 生活方式品牌
- 编辑设计
- 移动应用界面