档案卡:蜜桃色5s3e 基准色样
基准色样取自成熟蜜桃果肉受光的那一层,橙相偏暖、饱和度高但明度足够,直接铺满大面积时不会显得沉闷。档案里把它定为 5s3e 系列的锚点,其余深浅色样均由它的明度上下浮动而来。
使用建议:作为主色时控制在版面的三成以内,其余留给冷灰蓝的中性底;作为点缀色时,按钮、标签、进度条是它最稳妥的位置。
明暗梯度:从晨雾到暮色
同一色相在六个明度档位上的连续变化,可作为浅底、正色、按压态与阴影色的取用依据。右侧数据条显示相对明度高低,越长越亮。
5s3e-P0 晨雾蜜桃 #FFE3D2
5s3e-P1 柔光蜜桃 #FFCBA8
5s3e-B0 基准蜜桃 #FFB07C
5s3e-D1 熟果蜜桃 #F2935A
5s3e-D2 压枝蜜桃 #D2743F
5s3e-D3 暮色蜜桃 #A8552C
梯度选取口诀
- 浅底与悬停态优先用 P0、P1,文字压深色即可保持对比。
- 主按钮与强调元素用 B0,按压态降到 D1 形成自然的回弹感。
- 描边、分隔线与图标阴影用 D2、D3,避免整页飘浮。
数值索引表
下表按编号排列全部色样,便于逐行核对与复制。十六进制适合直接写入样式,RGB 便于与图像工具对接,HSL 便于按明度微调。
| 编号 | 名称 | HEX | RGB | HSL |
|---|---|---|---|---|
| 5s3e-P0 | 晨雾蜜桃 | #FFE3D2 | 255,227,210 | 24°,100%,91% |
| 5s3e-P1 | 柔光蜜桃 | #FFCBA8 | 255,203,168 | 24°,100%,83% |
| 5s3e-B0 | 基准蜜桃 | #FFB07C | 255,176,124 | 24°,100%,74% |
| 5s3e-D1 | 熟果蜜桃 | #F2935A | 242,147,90 | 23°,83%,65% |
| 5s3e-D2 | 压枝蜜桃 | #D2743F | 210,116,63 | 22°,62%,54% |
| 5s3e-D3 | 暮色蜜桃 | #A8552C | 168,85,44 | 20°,58%,42% |
邻近配色组合
蜜桃色偏暖,单用容易黏在一起,配一组冷调中性色能立刻拉开层次。下面三组直接可用,比例按“主色三成、中性五成、重色两成”排布。
组合一 · 冷灰蓝底
#FFB07C + #E8EDF3 + #1C2B3A
浅灰蓝铺底,深蓝压标题与图标,蜜桃色只落在按钮和标签上,适合信息量大的后台与表单页面。
组合二 · 米白与墨绿
#FFCBA8 + #FAF6EF + #2F4A3C
把蜜桃色提亮一档当底,墨绿作文字色,整体温和耐看,适合阅读型内容与卡片列表。
组合三 · 雾灰与砖红
#F2935A + #D8D4CF + #7A3B2E
砖红与熟果蜜桃同属暖区但明度分层清晰,用于促销条、提示条时辨识度高。
界面落地清单
把色样搬进实际页面时,按下面的顺序走一遍,能避开大部分返工。
- 先定中性底色,再放蜜桃主色,最后补重色描边,顺序颠倒容易越调越乱。
- 正文文字不用蜜桃色,改用深蓝或深灰,保证小字号时的可读性。
- 按钮按压态下移一到两档明度,配合一像素深色描边,触感更明确。
- 大面积色块加深色细网格或浅一档的叠色,避免整片纯色过于扁平。
- 深色模式里把蜜桃色提亮到 P1 档,同时降低饱和度,防止发光刺眼。
- 交付前用灰度预览检查一次,确认明度层次在没有色彩时依然成立。
常见问答
- 蜜桃色5s3e 里的数字编号是做什么用的?
- 编号用于在档案中定位具体色样,前两位表示该色系的分区,后缀表示明度档位,便于检索与批量替换。
- 基准蜜桃色适合做正文文字色吗?
- 不适合。它明度偏高、饱和度也高,小字号下对比不足,建议改作背景、按钮或装饰元素。
- 手机端使用蜜桃色要注意什么?
- 控制使用面积,并保证临近的文字或图标有足够深的颜色;屏幕亮度差异会让暖色看起来比桌面端更亮。
- 档案里的数值可以直接复制到设计工具里吗?
- 可以。十六进制、RGB 与 HSL 三列数值相互对应,任选一列填入即可得到同一颜色。