品牌手册给出一个紫色，设计师却还需要正文、卡片、边框、按钮和深色背景。直接把同一个颜色调淡几次，容易得到看着统一、实际文字难读的界面。网页配色应同时回答“颜色有什么关系”和“它在页面中承担什么作用”。
从一个HEX值建立可比较方案
在XunL 网页配色工具输入品牌主色，例如 #635BFF。先选一种配色关系，再比较均衡、柔和或鲜明等风格。相邻色适合连续衔接，互补关系可以突出重点，单色系则便于统一层级，选择依据应是界面任务，而不是色卡数量越多越好。
第一次可以只改配色关系，保持主色不变；第二次再比较风格。这样看得清变化来自哪里，不会同时调整所有选项以后无法解释为什么更合适。主色色卡保留输入，并不意味着每个网页用途色都与它完全相同。
锁定关键色，让其他颜色围绕它变化
如果已有一枚必须保留的按钮色，可以单独微调并锁定，再换其他组合。不要为了追求整组统一，把已经验证过的关键品牌元素也反复改掉。反过来，某个辅助色不适合当前用途时，也不必因此放弃整套方案。
比如产品展示页需要主按钮明显、参数卡片安静，可以让强色集中在主要行动处，背景和边框保持较低干扰。若每张卡片都使用高饱和色，用户反而难判断哪里最重要。配色关系提供候选，信息层级仍需要设计判断。
切到深色主题，重新看文字与交互
在浅色背景上合适的颜色，放到深色界面不一定仍然好读。切换主题后检查正文、次要说明、输入框、按钮和边框，尤其留意弱文字是否消失，以及按钮里的文字是否仍有足够区别。
局部对比度应看实际前景与背景组合，而不是只说“这个蓝色符合标准”。同一色值用在白底文字、灰底边框和深底按钮上，条件不同。工具的颜色映射面向不透明sRGB，如果生产界面加透明度、图片背景或混合效果，应在真实环境重新检查。
对比度按未取整比值判断，显示小数接近阈值时不要自行四舍五入宣布通过。单个文字组合的结果也不能代表整个网站符合WCAG，还涉及字号、状态、键盘与其他可访问性条件。
交给开发的，不应只有一张色卡截图
方案确认后，导出当前CSS变量或JSON，并写清哪些用于主按钮、页面背景、正文和辅助信息。复制配色链接也便于同事回看设置，但仍应保存正式交付版本，避免只靠口头描述“用中间那个蓝”。
开发落地以后，用真实页面检查禁用、悬停、焦点和错误状态。不要让成功与错误仅靠颜色区别，可以同时采用文字或图标说明。颜色系统的目标是降低理解成本，不是让所有状态都在色卡里找到一个漂亮位置。
配色生成后能直接保证网站无障碍吗？
不能。它能帮助检查颜色组合，整站还要核对真实组件、文字大小、交互状态与其他条件。先把色值当作设计资产，再在页面中验收。
为什么更换主题后用途色发生变化？
用途色需要适应当前主题背景和层级，不是把浅色方案原封不动反相。应分别确认两个主题的可读性与品牌一致性，再决定是否采用。
个人微信：ssevening
