板岩灰主色
#707982同源设计合集 · 2 项
配色资料
结合原始资料,按需应用到自己的设计中。
为我的项目应用一套板岩灰冷调配色,以冷调岩石质感和低饱和度为方向,交付可直接使用的 CSS 自定义属性。 【色值清单】雾灰 #C5CBD0:背景色;板岩灰 #707982:主色;石墨灰 #303941:强调色及文字色。以上色值均为近似建议。 【使用示例】科技产品界面可让雾灰、板岩灰、石墨灰约按 60:30:10 分配面积;工业风海报可用石墨灰突出标题。避免大面积使用石墨灰,或在雾灰背景上使用对比不足的文字。 【质量要求】在 `:root` 下定义 `--color-*` 变量,并提供暗色模式映射;检查文字与背景的对比度。最终色值请对照原图校准。 配色需对照原参考图人工校对 【参考资源】 - 资料详情:https://ui.undoai.cn/palettes/slate-gray-cool-palette/ - 原始设计参考图:https://ui.undoai.cn/palettes/slate-gray-cool-palette/refs/01.jpg(第1组岩系冷调配色原图)
先对照原始配色图;点击色值即可复制 HEX。色值按已存资料展示,近似值与调整值需要在实际项目中再次校验对比度。
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# 板岩灰冷调配色 — design.md 内容版本:sha256:6fe510a660aada1ec25336dafb36d8855814518a457e6e089be7c293f3aa5dcd 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:palettes/slate-gray-cool-palette;语义类型:palette。 - 分类:其他。 - 标签:岩系配色、冷调、低饱和。 - 场景:品牌视觉提案、科技产品界面、工业风海报。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 配色方向:以低饱和板岩灰为主,搭配较浅的雾灰与深石墨色;色值为近似建议。 - AI 描述:描述为“冷调岩石质感配色,主色 #707982、浅色 #C5CBD0、深色 #303941,建议按 60:30:10 的面积比例使用”。 ### 实际文件与参考资源 - `meta.yml` - `refs/01.jpg`(sha256:ec8478ceb5f52c07307119d196e672356e9ff311ac6798070c219bef96a5eca6) - 参考图:`refs/01.jpg`;第1组岩系冷调配色原图。 - 实现摘要:未提供 demo.html。 ### 色值与语义记录 - `#707982` 板岩灰;角色:主色 - `#C5CBD0` 雾灰;角色:背景色 - `#303941` 石墨灰;角色:强调色 ### 原图采样记录 - 方法:whole-reference-dominant-colors。 - `#FEFFFF`;原图像素覆盖比例 2.76%。 - `#F1F2F2`;原图像素覆盖比例 0.40%。 - `#D0D8DC`;原图像素覆盖比例 14.95%。 - `#7C8C90`;原图像素覆盖比例 14.55%。 - `#687474`;原图像素覆盖比例 0.32%。 - `#4C5C6C`;原图像素覆盖比例 29.06%。 - `#4D5050`;原图像素覆盖比例 0.18%。 - `#2F3741`;原图像素覆盖比例 0.47%。 - `#313434`;原图像素覆盖比例 0.39%。 - `#282A28`;原图像素覆盖比例 0.34%。 - `#000004`;原图像素覆盖比例 0.98%。 - `#000000`;原图像素覆盖比例 29.61%。 ### 确定性对比度 - 未提供。 ## 未提供 - 未结构化记录的色值与语义角色不作推断;亮点描述属于元数据声明,图片标题不能用于推断色号,对比度计算仅覆盖文档中明确列出的色值组合。 ## 实现建议 - 将已记录的颜色分配到背景、表面、正文、次要文字、边框与强调角色;未提供的 token 需另行定义。 - 在真实文本、控件、禁用与错误状态上验证对比度,分别检查浅色与深色模式。 - 不要仅依赖颜色表达状态,配合文本、图标或形状;新增组合必须重新计算对比度。
复制 HEX · 下载 SVG 色卡 · 来源未核验
#707982#C5CBD0#303941来自像素采样,可能包含背景与装饰色。
#FEFFFF占比 2.8%#F1F2F2占比 0.4%#D0D8DC占比 14.9%#7C8C90占比 14.5%#687474占比 0.3%#4C5C6C占比 29.1%#4D5050占比 0.2%#2F3741占比 0.5%#313434占比 0.4%#282A28占比 0.3%#000004占比 1%#000000占比 29.6%DESIGN NOTES
GOOD FOR