html颜色代码暗黑模式,拆解·暗黑模式の文字配色

本篇内容主要结合作者之前的经历和近年来的经历的对比，总结出文字配色方案。同时，为大家提供了分析思路：不同底色用哪种字体颜色更合适、思路延展：解决题色与背景色的亮度对比度差值。

此前的一些经历

2017年秋天，当时我负责的泡泡iPad端需要进行一次改版。

这次改版，主要是将在同年8月份团队刚刚完成改版的泡泡Phone端移植到iPad端。

移植遇到的第一个问题就是两端界面的底色差异。手机端采用的是常见的纯白底色，而iPad端则采用深色模式。

自2015年起，我曾几次阶段性负责过iPad端相关需求。当时做iPad界面就有一种感觉：头变大了。

将手机界面移植到iPad上，首先要解决的就是文字配色。

平日里，大家都习惯在纯白色背景上进行界面设计，对不同字符该用什么色值也十分熟悉。比如

当背景色由熟悉的白色变为深色，情况就不一样了。

原本在白色背景下，文字有多种色阶，而到了深色背景下，不同字符该用什么颜色，一时间反而没有了头绪。于是，当时有很多字段都使用#FFFFFF进行处理，如下图：

但这么做，显然不太妥当。