浅灰主色
#D9D9D5同源设计合集 · 3 项
配色资料
结合原始资料,按需应用到自己的设计中。
为我的项目应用一套「Zero Decibels 低声量色调」配色,以浅灰和米白铺底,营造安静、轻柔的视觉感受。整体保持低饱和;主要区域的明度差尽量控制在约 15% 内,文字仍需有足够的可读性。 【色值清单】 浅灰 #D9D9D5:主色,用于卡片和主要界面区域。 米白 #F1EEE6:背景色,用于页面底色。 柔和灰 #A7A7A1:次级信息色,用于辅助文字和弱化元素。 【使用示例】 生活方式品牌页面可用米白作背景、浅灰作内容卡片,柔和灰呈现日期和说明。极简海报可用大片米白留白,搭配浅灰色块。避免将柔和灰用于小字号正文,也避免加入大面积高饱和强调色,破坏低声量氛围。 【质量要求】 以 CSS 自定义属性交付,在 :root 下定义 --color-background: #F1EEE6、--color-primary: #D9D9D5、--color-secondary: #A7A7A1。提供暗色模式映射,沿用低饱和的暖灰关系,并检查文字与背景的对比度。以上色值及暗色映射应作为设计候选,对照原图校准。 配色需对照原参考图人工校对 【参考资源】 - 资料详情:https://ui.undoai.cn/palettes/zero-decibels-quiet-palette/ - 原始设计参考图:https://ui.undoai.cn/palettes/zero-decibels-quiet-palette/refs/01.png(色调案例配图,具体对应待核对) - 原始设计参考图:https://ui.undoai.cn/palettes/zero-decibels-quiet-palette/refs/02.png(色调案例配图,具体对应待核对) - 原始设计参考图:https://ui.undoai.cn/palettes/zero-decibels-quiet-palette/refs/03.png(色调案例配图,具体对应待核对)
先对照原始配色图;点击色值即可复制 HEX。色值按已存资料展示,近似值与调整值需要在实际项目中再次校验对比度。
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# Zero Decibels 低声量色调 — design.md 内容版本:sha256:cd2486441a28ee720a79c82039104ce563fdb7b9f2071270323b7109145f9d97 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:palettes/zero-decibels-quiet-palette;语义类型:palette。 - 分类:其他。 - 标签:低对比、低饱和、极简。 - 场景:安静主题视觉、生活方式品牌、极简海报。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 降噪氛围:低饱和、低对比的浅灰与米白营造安静、轻柔的感受。 - 向 AI 描述效果:描述为“以浅灰和米白铺底,整体饱和度控制在约 15% 以下,主要区域明度差控制在约 15% 内”。 ### 实际文件与参考资源 - `meta.yml` - `refs/01.png`(sha256:87edb0751d39743f8ad7646212679a97e60551f4d84e760d1d794cb57629965d) - `refs/02.png`(sha256:581c63ebbb621a7ae53cc967f3dcc4b8c4e8ec5a3eb051ba5a3b0c25f2a5c082) - `refs/03.png`(sha256:c49ff5b494a2a5550423736d0dd933fb6d6741684d46553bde072090359a913e) - 参考图:`refs/01.png`;色调案例配图,具体对应待核对。 - 参考图:`refs/02.png`;色调案例配图,具体对应待核对。 - 参考图:`refs/03.png`;色调案例配图,具体对应待核对。 - 实现摘要:未提供 demo.html。 ### 色值与语义记录 - `#D9D9D5` 浅灰;角色:主色 - `#F1EEE6` 米白;角色:背景 - `#A7A7A1` 柔和灰;角色:次级信息 ### 原图采样记录 - 方法:whole-reference-dominant-colors。 - `#F4F4EC`;原图像素覆盖比例 3.13%。 - `#EFEBE3`;原图像素覆盖比例 25.63%。 - `#E6E2D8`;原图像素覆盖比例 13.25%。 - `#DDD8CE`;原图像素覆盖比例 8.10%。 - `#D2CDC3`;原图像素覆盖比例 3.96%。 - `#C5BFB5`;原图像素覆盖比例 5.85%。 - `#C0B8B0`;原图像素覆盖比例 0.27%。 - `#1A1612`;原图像素覆盖比例 0.49%。 - `#10110F`;原图像素覆盖比例 1.42%。 - `#0A0A0A`;原图像素覆盖比例 2.34%。 - `#040404`;原图像素覆盖比例 1.64%。 - `#000000`;原图像素覆盖比例 1.44%。 ### 确定性对比度 - 未提供。 ## 未提供 - 未结构化记录的色值与语义角色不作推断;亮点描述属于元数据声明,图片标题不能用于推断色号,对比度计算仅覆盖文档中明确列出的色值组合。 ## 实现建议 - 将已记录的颜色分配到背景、表面、正文、次要文字、边框与强调角色;未提供的 token 需另行定义。 - 在真实文本、控件、禁用与错误状态上验证对比度,分别检查浅色与深色模式。 - 不要仅依赖颜色表达状态,配合文本、图标或形状;新增组合必须重新计算对比度。
复制 HEX · 下载 SVG 色卡 · 来源未核验
#D9D9D5#F1EEE6#A7A7A1来自像素采样,可能包含背景与装饰色。
#F4F4EC占比 3.1%#EFEBE3占比 25.6%#E6E2D8占比 13.3%#DDD8CE占比 8.1%#D2CDC3占比 4%#C5BFB5占比 5.9%#C0B8B0占比 0.3%#1A1612占比 0.5%#10110F占比 1.4%#0A0A0A占比 2.3%#040404占比 1.6%#000000占比 1.4%DESIGN NOTES
GOOD FOR