自己DIY的HEX RGB RGBA互转的小工具
相信各位做前端的同学,在小公司或是遇上UI设计没时间规范地给设计图标等其它啥原因,会遇到需要将RGB转成HEX的时候,
我刚开始是打开Photoshop来转换,有些同学会在网上直接转或是别的小工具。
最近在网上找到个朋友写的RGB转HEX的HTML写的东西,感觉功能和交互小细节做得很不到位;
以我本人的性格,虽然只是做个小工具,但既然都放网上分享,就不能敷衍自己,起码要满足自己做前端最基本的要求。
于是拿着那位同学刚开始填几个RGB数值转成Hex数值的网页,花了些时间加上了互转的功能:
1.加了HEX转RGB的功能,这个功能主要是有时候大家要用到rgba进行设置 边框色,背景色的时候,快速转换,然后复制值直接粘贴过去。
2.添加了透明度的功能,并且可以预览透明度效果;
2.添加了系统调色板一些基础色的输入。
3.对所有的输入框都进行了交互的优化,比如超过255的就重置输入值为255,HEX中超过F或是其它无效字符的就按F算。
晚点会抽空再加上个边框的颜色预览。。
就是个小工具,当作自己的练习,不能拿来装X,就是放上来记录一下;
有同学喜欢的话可以收藏下面的链接,在线快速转换:
http://ktangel.github.io/tools/rgb2hex/rgb2hex.html
下面也提供源码地址供大家下载本地用。
https://github.com/ktangel/ktangel.github.io/tree/master/tools/rgb2hex
界面预览: