好记性不如烂笔头。生活中多做笔记,不仅可以方便自己,还可以方便他人。
背景
开发的都知道,UI微调都是令人头痛的,尤其是颜色的微调。
如果视觉稿直接给颜色值那倒没啥,可怕的是后面还有标了透明度,而且视觉还原后发现颜色太透明了,要你透明度再调调,这才烦人。我总不能记住100个透明度的值吧。
一次计算,无数次使用,这文章,稳了。
正文
Android中的颜色值一般格式是:#AARRGGBB。AA就是透明度值(这里我只聊透明度)。
1. 透明度的计算
透明度分为256个等级,即 0 - 256,0就是透明,255就是不透明
透明度 (透明)0 --> 255(不透明) 对应着16进制 (透明)00 --> FF(不透明)
比如:50%透明度
50%也就是256的一半即128,因为是从0开始算的,所以是 127,转换成16进制就是 7F
2.献上透明度表格
注意:我这里写的是透明度值,不是不透明度值,这是两个不同的概念,注意区分。
需要不透明度值的,可以自己算:透明度值 + 不透明度值 = 100%
如果你的UI设计师给的视觉稿标注是:颜色#FFFFFF,透明度40% 。那你的计算方式应该是:
- 将透明度转换成不透明度。不透明度为:60%
- 不透明度乘以255。 我们得到结果:153
- 将计算结果转换成16进制。得到最终的不透明度:99
- 将不透明度和颜色值拼接成ARGB格式。得到最终的颜色值: #99FFFFFF
所以,你的UI设计师要的颜色是:#99FFFFFF
下面是我表格里的透明度值的计算方式是:(A:透明度; H:16进制)
255*(100% - A%) 通过计算器转为16进制 H
(ps:因为计算结果取整数,所以可能会有一个进制位的误差,比如50%的透明度值,上面“1.透明度的计算”中的计算是127,16进制为7F,这里计算是127.5,四舍五入为128,16进制为80。所以,看到这里不用惊慌,7F跟80肉眼看起来是差不多的,不用去计较)
00是完全透明(百分百透明),FF就是完全不透明
| 透明度 | 16进制表 |
|---|---|
| 100??% | 00 |
| 99???% | 03 |
| 98???% | 05 |
| 97???% | 07 |
| 96???% | 0A |
| 95???% | 0D |
| 94???% | 0F |
| 93???% | 12 |
| 92???% | 14 |
| 91???% | 17 |
| 90???% | 1A |
| 89???% | 1C |
| 88???% | 1E |
| 87???% | 21 |
| 86???% | 24 |
| 85???% | 26 |
| 84???% | 29 |
| 83???% | 2B |
| 82???% | 2E |
| 81???% | 30 |
| 80???% | 33 |
| 79???% | 36 |
| 78???% | 38 |
| 77???% | 3B |
| 76???% | 3D |
| 75???% | 40 |
| 74???% | 42 |
| 73???% | 45 |
| 72???% | 47 |
| 71???% | 4A |
| 70???% | 4D |
| 69???% | 4F |
| 68???% | 52 |
| 67???% | 54 |
| 66???% | 57 |
| 65???% | 59 |
| 64???% | 5C |
| 63???% | 5E |
| 62???% | 61 |
| 61???% | 63 |
| 60???% | 66 |
| 59???% | 69 |
| 58???% | 6B |
| 57???% | 6E |
| 56???% | 70 |
| 55???% | 73 |
| 54???% | 75 |
| 53???% | 78 |
| 52???% | 7A |
| 51???% | 7D |
| 50???% | 80 |
| 49???% | 82 |
| 48???% | 85 |
| 47???% | 87 |
| 46???% | 8A |
| 45???% | 8C |
| 44???% | 8F |
| 43???% | 91 |
| 42???% | 94 |
| 41???% | 96 |
| 40???% | 99 |
| 39???% | 9C |
| 38???% | 9E |
| 37???% | A1 |
| 36???% | A3 |
| 35???% | A6 |
| 34???% | A8 |
| 33???% | AB |
| 32???% | AD |
| 31???% | B0 |
| 30???% | B3 |
| 29???% | B5 |
| 28???% | B8 |
| 27???% | BA |
| 26???% | BD |
| 25???% | BF |
| 24???% | C2 |
| 23???% | C4 |
| 22???% | C7 |
| 21???% | C9 |
| 20???% | CC |
| 19???% | CF |
| 18???% | D1 |
| 17???% | D4 |
| 16???% | D6 |
| 15???% | D9 |
| 14???% | DB |
| 13???% | DE |
| 12???% | E0 |
| 11???% | E3 |
| 10???% | E6 |
| 9???% | E8 |
| 8???% | EB |
| 7???% | ED |
| 6???% | F0 |
| 5???% | F2 |
| 4???% | F5 |
| 3???% | F7 |
| 2???% | FA |
| 1???% | FC |
| 0???% | FF |
结尾
东西虽然简单,但还是写出来,就当工具用,下次调UI就可以来这里看。如果上面有写错了,欢迎来“搞”!哈哈!