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

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

此前的一些经历

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

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

2c874aa0e8476c6ee0697978cf905e68.png

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

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

2b8994f045ffcc6f4415fbfb3b2e071c.png

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

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

b4ef357eca7f3765d7065861ae3f5605.png

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

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

4eb339975cbac094dbf5599ec751e788.png

但这么做,显然不太妥当。<

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值