配色方案整理适用范围
面向屏幕设计交接的线性渐变记录方法，以CSS色标语义作参照。色值、位置与长条均为原创演示，不是品牌规范、印刷打样或实测色彩结果。编写于2026年10月31日。
先把色板与渐变规格分开
一组色板可以保存深蓝、青绿、浅黄，但它并没有说明深蓝应该在左边还是右边，更没有说明青绿应靠近起点还是中心。把三块等宽矩形画在交付稿上，适合展示候选颜色，却不足以还原渐变。
MDN的linear-gradient说明把线性渐变描述为一条轴及其色标；色标可以带位置，CSS方向to right表示从左向右。本文只用同尺寸的水平长条来比较位置，暂不混入角度、透明度和不同插值色彩空间等变量。
原创两版：三种色没变，位置变了
设虚构活动“晨间阅读”的屏幕横条使用A深蓝#24445C、B青绿#238A83、C浅黄#F3DF93。甲版沿左到右的轴，将A放在0%、B放在50%、C放在100%。乙版仍按A、B、C排列，却把位置改为20%、60%、100%。
乙版从0%到20%保持起始深蓝，随后逐步过渡到60%处的青绿，再到末端浅黄。它不是把三个颜色各占多少面积分别填成20%、60%、100%；这些数是沿轴的位置坐标，不能相加当作比例配方。图中的标线与每个色标一一对应。
把位置转换为示意横条上的坐标
为方便核对，假设横条从x=0到x=1000，宽1000个设计单位，方向水平向右。乙版三个色标就在x=200、600、1000；甲版则是0、500、1000。这里的换算只适用于本例水平轴，不能把倾斜渐变中的百分比直接理解为图片宽度百分比。
图为适应版面等比缩小，仍保留0%、20%、50%、60%、100%的坐标关系，不冒充1000像素原样输出。渐变中的过渡会产生中间颜色，所以“有三个色标”也不等于成品只有三种像素颜色。
一条交接记录怎样写完整
乙版可记为：“线性；方向左→右；A #24445C @20%；B #238A83 @60%；C #F3DF93 @100%；无透明度变化。”若项目确实使用CSS，可另保存表达这一组位置的声明：linear-gradient(to right, #24445C 20%, #238A83 60%, #F3DF93 100%)。
这条声明用于交流示例的位置关系。跨软件复现时，仍应记录实际工具与色彩处理设置，核对目标环境；不能仅凭色标相同就保证所有渲染器、显示器和印刷品逐像素一致。原可编辑文件与预览图应一起保留，避免只能从截图反向猜位置。
不要让整理工具代替没有提供的功能
本站色板工具记录不透明HEX、色名、角色和备注，已有说明并未提供渐变编辑器。可以把A、B、C保存为色值列表，在自己的交接备注或独立文件中保存方向和位置；不要把示例CSS直接粘贴到只接受HEX的输入框。
三位与六位HEX规范化解决的是颜色表示，不会替你推断色标坐标。若只收到一张缩略预览，应标记“位置未提供”，向设计稿或交接说明补取数据。凭感觉估出的停靠点可以用于自己的探索稿，但要明确标为重建草案。
比较版本时只说明这次改动的关系
本例版本记录可写：“v02保留三种色及顺序，A由0%移至20%，B由50%移至60%，C仍为100%，方向不变。”这种记录让接手者知道颜色没有被替换，变化在分布。先对坐标，再看横条，能避免在错误版本上继续调色。
如果实际稿件还改变了角度或插值设置，应另列，不能把所有视觉变化都归因于位置。本文不提供一套最好看的渐变比例；需要的是让自己的方案能够被准确复查，而不是把教学数字变成审美标准。
操作步骤
- 先确定渐变类型、轴方向与本次比较尺寸。
- 逐个记录颜色、顺序和沿轴位置，不把位置当面积份额。
- 保留可编辑规格与预览，用标线核对停靠点。
- 改版时列出哪些位置改变，并在实际目标环境复看。
常见问答
20%、60%、100%为什么加起来不是100%？
它们是沿渐变轴的位置坐标，不是三个颜色的面积份额，不需要相加为100%。
三种色值相同，渐变就相同吗？
不能这样判断。方向、位置、顺序和色彩处理等设置也会影响结果；本文固定其他条件，只比较位置。
图上三个色标意味着只有三种颜色吗？
不是。相邻色标之间的连续过渡通常包含许多中间颜色，色标数量不是像素颜色总数。
本站工具能直接导出这个渐变吗？
既有工具只按原功能保存色板数据，本文不新增渐变生成器。方向和停靠位置应另行写进交接说明。
参考依据
MDN：linear-gradient() CSS function · MDN Web Docs · 核对日期 2026-10-31。线性渐变轴、方向to right、色标位置的语义及起始色标前的颜色延展。