亮橙视觉重点
#F28A32同源设计合集 · 3 项
配色资料
结合原始资料,按需应用到自己的设计中。
为我的项目应用一套「Sandberg 亮橙暖纸色调」配色,以暖纸色营造略带旧感的背景,用亮橙建立视觉重点。建议画面面积约 75% 为暖纸色、25% 为亮橙色。 【色值清单】 - 暖纸色 `#E5D2B2`:主背景。 - 亮橙 `#F28A32`:标题强调、图形重点和活动信息。 【使用示例】 海报可用大面积暖纸色承载内容,以亮橙突出标题或日期;活动主视觉可用亮橙色块形成焦点。避免将亮橙用于大段小字号文字,或让两色平均铺满画面,以免削弱层级。 【质量要求】 以 CSS 自定义属性交付,在 `:root` 下定义 `--color-paper`、`--color-accent` 等 `--color-*` 变量,并提供暗色模式映射。暗色模式中的背景、文字及强调色取值应注明为适配建议;检查文字对比度,必要时增加深色文字变量。上述色值如作为原图近似值使用,须提醒对照原图校正。 配色需对照原参考图人工校对 【参考资源】 - 资料详情:https://ui.undoai.cn/palettes/sandberg-bright-orange-paper-palette/ - 原始设计参考图:https://ui.undoai.cn/palettes/sandberg-bright-orange-paper-palette/refs/01.png(色调案例配图,具体对应待核对) - 原始设计参考图:https://ui.undoai.cn/palettes/sandberg-bright-orange-paper-palette/refs/02.png(色调案例配图,具体对应待核对) - 原始设计参考图:https://ui.undoai.cn/palettes/sandberg-bright-orange-paper-palette/refs/03.png(色调案例配图,具体对应待核对)
先对照原始配色图;点击色值即可复制 HEX。色值按已存资料展示,近似值与调整值需要在实际项目中再次校验对比度。
查看 Markdown 全文,复制或下载 design.md 后交给开发者使用。
# Sandberg 亮橙暖纸色调 — design.md 内容版本:sha256:e7719bcb6d43254c20dfc3f83e251337bf28f9948588486a3fe8df7f132dd641 本文件由当前元数据、实现摘要和实际文件列表确定性生成。元数据记录是资料声明;未提供的数值不作推断。实现建议须在后续开发中选择和验收。 ## 元数据记录 - 资产:palettes/sandberg-bright-orange-paper-palette;语义类型:palette。 - 分类:其他。 - 标签:橙色、暖色、纸张质感。 - 场景:海报设计、活动主视觉、印刷品配色。 - 平台:未提供。 - 风格:未提供。 ### 亮点声明 - 简洁而有力:明亮橙色搭配偏旧、偏暖的纸张底色,形成清晰的视觉重点。 - 向 AI 描述效果:描述为“暖纸色占画面约 75%,高明度橙色占约 25%;两色保持明显明度差,并保留纸张的旧感”。 ### 实际文件与参考资源 - `meta.yml` - `refs/01.png`(sha256:cd6f9fdbd5f3d407af67791ff1a04f7f6f822cc27f2606456aa43a03dd4da5ea) - `refs/02.png`(sha256:06fb6f313036bb4ae2a94e3f1082c6c36ff632e665eb00feae4df18399d7d602) - `refs/03.png`(sha256:06edbe8253210bca984ba5be16198a217ae5aaa096a07b39bf67b346af9d0109) - 参考图:`refs/01.png`;色调案例配图,具体对应待核对。 - 参考图:`refs/02.png`;色调案例配图,具体对应待核对。 - 参考图:`refs/03.png`;色调案例配图,具体对应待核对。 - 实现摘要:未提供 demo.html。 ### 色值与语义记录 - `#F28A32` 亮橙;角色:视觉重点 - `#E5D2B2` 暖纸色;角色:背景 ### 原图采样记录 - 方法:whole-reference-dominant-colors。 - `#FFFFFF`;原图像素覆盖比例 0.20%。 - `#F2F0E5`;原图像素覆盖比例 18.67%。 - `#E9E5DB`;原图像素覆盖比例 26.05%。 - `#DDD8CF`;原图像素覆盖比例 8.78%。 - `#D3CEC5`;原图像素覆盖比例 3.18%。 - `#CBC6BD`;原图像素覆盖比例 0.90%。 - `#21211D`;原图像素覆盖比例 0.55%。 - `#1A1A17`;原图像素覆盖比例 2.04%。 - `#131312`;原图像素覆盖比例 0.97%。 - `#090909`;原图像素覆盖比例 0.78%。 - `#040404`;原图像素覆盖比例 0.90%。 - `#000000`;原图像素覆盖比例 1.26%。 ### 确定性对比度 - 未提供。 ## 未提供 - 未结构化记录的色值与语义角色不作推断;亮点描述属于元数据声明,图片标题不能用于推断色号,对比度计算仅覆盖文档中明确列出的色值组合。 ## 实现建议 - 将已记录的颜色分配到背景、表面、正文、次要文字、边框与强调角色;未提供的 token 需另行定义。 - 在真实文本、控件、禁用与错误状态上验证对比度,分别检查浅色与深色模式。 - 不要仅依赖颜色表达状态,配合文本、图标或形状;新增组合必须重新计算对比度。
复制 HEX · 下载 SVG 色卡 · 来源未核验
#F28A32#E5D2B2来自像素采样,可能包含背景与装饰色。
#FFFFFF占比 0.2%#F2F0E5占比 18.7%#E9E5DB占比 26.1%#DDD8CF占比 8.8%#D3CEC5占比 3.2%#CBC6BD占比 0.9%#21211D占比 0.5%#1A1A17占比 2%#131312占比 1%#090909占比 0.8%#040404占比 0.9%#000000占比 1.3%DESIGN NOTES
GOOD FOR