我用 Python 写了一个颜色色值转换的小工具
gww183
7年前
<h2><strong>需求说明</strong></h2> <p>公司的 UI 设计小哥，已经转用 Zeplin 很久了。Zeplin 的设计稿展示页面的颜色色值使用十进制的 RGB 表示的，在 Android 中的颜色表示大多情况下都需要十六进制的 RGB 表示。我的数学没有好到直接看到十进制就可以心算得到十六进制的结果，所以我需要一个工具，输入十进制的 RGB ，得到十六进制的色值，最好可以方便复制。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/175cd37f7ebae43f0c82e7032f9aa2a5.png"></p> <p style="text-align:center">Zeplin 的颜色色值显示示例</p> <h2><strong>原有处理方式</strong></h2> <p>因为我会 Python （仅限于终端输入 python 然后当做计算器算，或者用 hex() 函数把十进制转换成十六进制），所以遇到这样的问题我当然是采用 python 的 hex() 函数做转换，然后手动结果输入到 Android Studio 中。</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f53f82ce934907775b4f8a1e18998de1.png"></p> <p style="text-align:center">采用 hex 函数手动转换色值</p> <h2><strong>动机</strong></h2> <p>人总是懒得，想要写这个小工具已经很久了，我也打过有过构思就是：</p> <p>输入: 类似 RGB 的十进制值(110, 122 138)，用空格或者逗号分割一下。</p> <p>输出: 一个十六进制的 RGB 颜色色值(#6e7a8a)。</p> <p>但就一直没动手，一直讲究着。真懒！</p> <h2><strong>开干</strong></h2> <h3><strong>1.首先我需要输入函数</strong></h3> <p>我打开我之前学习 Python 的文件夹，里面正好有一个 raw_input 的示例：</p> <pre> <code class="language-python">#!/usr/bin/python #coding=utf-8 raw_input("\n\n等输入")</code></pre> <p>在终端执行 python input.py 后， 可以输入文字。</p> <p>我需要接受到用户输入的信息。怎么接收忘记了， Google 之，得到结果，顺便改改输入提示语，打印出输入的内容：</p> <pre> <code class="language-python">input = raw_input("\n输入颜色 比如50 144 60:\n") print(input)</code></pre> <h3><strong>2. 需要分割字符</strong></h3> <p>查询到python 字符分割函数 split() ，默认不传入参数就可以用空白符分割。原本还说用英文逗号(,)作为分隔符，现在看来可以省了，直接用空格分割，无论多少空格都可以自动分割。于是加上代码：</p> <pre> <code class="language-python">rgbColorArray = input.split() print(rgbColorArray)</code></pre> <h3><strong>3. 需要遍历数组</strong></h3> <p>简单的遍历数组的是怎么弄的也忘记了，同样搜索：</p> <pre> <code class="language-python">for x in rgbColorArray: print(x)</code></pre> <h3><strong>3. 字符转成十六进制</strong></h3> <p>这个时候拿到了字符串，要变成十六进制的字符串。这个时候需要两个函数， int() 和 hex() ， int 函数可以将字符串转成 int 类型，而 hex 则接受数字参数，返回字符串。 0x开始的字符串。</p> <p>于是就有了第一个版本。</p> <h3><strong>第一个版本</strong></h3> <p style="text-align:center"><img src="https://simg.open-open.com/show/78f646d8f8faf57edf0881d0b9a5d724.png"></p> <p>第一个版本</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0c901ce43c6ab41c79c7e77ddfc79be3.png"></p> <p>第一个版本执行结果</p> <p>写出这样的基础版本已经基本可以得到我想要的结果了，缺点是还需要我手动收入，动用大脑记忆十六进制色值然后输入。希望可以直接复制最后结果。</p> <h3><strong>再进一步</strong></h3> <p>虽然结果已经出来了，但是还是希望可以在进步一些，有几个问题：</p> <ol> <li>当要转换的数字小于16的时候 只有一位不显示，比如11 显示的结果是0xB</li> <li>现实的结果多了0x</li> <li>显示的结果最好连在一起方便复制，而不是每个颜色一行。</li> </ol> <p>那么就需要遍历颜色值数组，去掉0x 字符串， 判断小于16的前面补上0。连续在一起输出结果。</p> <p>for 循环遍历数组</p> <p>前面用到了 for 循环，是从查到的范例，不过多行就不知道怎么弄了。java 写多了一般都是 { } 大括号括起来。</p> <p>继续查资料，于是知道是大概下面这样的用法。</p> <pre> <code class="language-python">#!/usr/bin/python # -*- coding: UTF-8 -*- for num in range(10,20): # 迭代 10 到 20 之间的数字 for i in range(2,num): # 根据因子迭代 if num%i == 0: # 确定第一个因子 j=num/i # 计算第二个因子 print '%d 等于 %d * %d' % (num,i,j) break # 跳出当前循环 else: # 循环的 else 部分 print num, '是一个质数'</code></pre> <p>变量声明</p> <p>由于需要不换行，所以就需要字符连接，而不是直接 print。</p> <p>声明变量又遇到问题了。根据前面的变量使用情况，找了些 python 代码看了看，大概知道不用声明什么类型，直接用就好了。于是有了代码：</p> <pre> <code class="language-python">output = "#" for x in rgbColorArray: intx = int(x) output = output + hex(intx) print(output)</code></pre> <p>字符串裁剪 和拼接。</p> <p>需要把多余的0x 两位去掉。</p> <p>用到字符串裁剪，依然寻找范例。</p> <pre> <code class="language-python">#!/usr/bin/python var1 = 'Hello World!' var2 = "Python Runoob" print "var1[0]: ", var1[0] print "var2[1:5]: ", var2[1:5]</code></pre> <p>这个范例的执行结果：</p> <pre> <code class="language-python">var1[0]: H var2[1:5]: ytho</code></pre> <p>顺便问了旁边也在学习 python 的同事，他告诉我后面的索引可以省略，代表直接裁剪到结尾。</p> <p>比如上面的例子如果 print "var2[1:]", var2[1:] 得到的结果应该是 ython Runoob</p> <p>所以有代码：</p> <pre> <code class="language-python">output = "#" for x in rgbColorArray: intx = int(x) output = output + hex(intx)[2:] print(output)</code></pre> <p>也可以从后往前数，比如还是上面的范例可以写成。比如上面的例子如果 print "var2[-1:]", var2[-1:] 得到的结果应该是 ob 也就是字符串的后两位。</p> <p>于是我们这里可以写成 hex(intx)[-2:] (因为输出字符串类似是0x23， 这样的)就是这个导致我后面写了个 bug，我也文章最后说明这个 bug 是什么。</p> <p>if else 判断</p> <p>接着要做一个判断，给一位的补上0</p> <pre> <code class="language-python">if intx < 16: output = output + '0' + hex(intx)[-2:] else: output = output + hex(intx)[-2:]</code></pre> <p>这样就有了python 文件：</p> <pre> <code class="language-python">#!/usr/bin/python #coding=utf-8 input = raw_input("\n输入颜色 比如50 144 60:\n") #print(input) rgbColorArray = input.split() print(rgbColorArray) output = "#" for x in rgbColorArray: intx = int(x) if intx < 16: output = output + '0' + hex(intx)[-2:] else: output = output + hex(intx)[-2:] #print(hex(int(x))) print(output)</code></pre> <p>还有最后一步：把 ColorU 加入到环境变量中</p> <p>这个时候我可以得到我要的记过了，但是有点不太方便，我需要到这个 python 文件所在的目录下写</p> <pre> <code class="language-python">python colorU.py</code></pre> <p>或者写全 colorU.py 这个路径。都是很麻的事情，所以我需要把 colorU 加入环境变量中。我用的是 zsh，所以找到环境变量的配置文件： ~/.zshrc ,末尾加上配置：</p> <pre> <code class="language-python">alias colorU="python ~/Documents/Development/PythonStudy/colorU.py"</code></pre> <p>这个是经过另外以为同事指导后的最后可行版本，我最初的思路是把 colorU.py 文件设置成可执行文件，然后加入到 Path 当中。结果我把 colorU.py 这个文件的地址加入到了 Path 中，世界上PATH 应该是一个目录。这样添加别名的方式更方便。</p> <p>后续</p> <ol> <li> <p>后来据说 Zeplin 的客户端可以默认显示十六进制的色值，而我用的是网页版的，所以没有。也就是说如果我装客户端就可以不用我写的这个脚本了。但没关系我学习了 python，写了我自己的第一个真正有用的 python 代码。</p> </li> <li style="text-align:center"> <p style="text-align:left">一个bug：我是在写这篇文章的时候才发现这个 bug 的，类似0x33这样的字符串从后往前裁剪的时候写[-2:]，当然没有问题，但是写0xf 这样的字符串就会有问题了。程序输入 5 5 5得到的结果是 #0x50x50x5 。修改成[2:] 的裁剪就可以了。</p> <img src="https://simg.open-open.com/show/2c9336fa4e2a3015783874cff5f30ee4.png"> <p>倒向裁剪字符串引起的bug</p> </li> <li> <p>还可以继续升级体验：</p> <p>a. 直接在终端中输入 colorU 231 234 123 就可以得到结果 #e7ea7b ;</p> <p>b. 配合Alfred， 呼出 Alfred 窗口后，输入色值，得到结果，回车直接复制十六进制到粘贴板。</p> <p>c. 保存之前已经转换过的色值，方便重复使用的颜色，直接复制十六进制颜色。</p> </li> </ol> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/ef0586cf4538</p> <p> </p>