原文链接 https://gaohaoyang.github.io/2015/05/18/front-end-tools/
注：以下为加速网络访问所做的原文缓存，经过重新格式化，可能存在格式方面的问题，或偶有遗漏信息，请以原文为准。
- content {:toc}
这里记录一些我用到的或者见到的比较好用方便的前端开发相关的工具吧。
色彩与图标
CSS滤镜
-
界面：
有各种各样的滤镜效果，可以直接调节参数观察变化。
值得一提的是，这个网站还有很多其他 css 生成器。
比如：Border Image, Border Radius, Box Shadow, Filter Effects, Multi-Column, Outline Border, Overflow(x,y), RGBa, Text Rotate, Text Shadow, Textarea Resize, Transform
可以访问这里去使用这些 css 生成器：CSS Generators
渐变CSS代码生成器
Ultimate CSS Gradient Generator
界面如下图：
目前 css 写渐变还很复杂，但是用了这个工具简直太方便了，直接生成 css 代码，还能兼容 ie。
QQ截图取色-16进制
在按下 Ctrl+Shift+A 后，再按一下 Ctrl 就可以看到截图框下面的颜色代码变成16进制的代码了。
如下图：
普通截图：
按住 Ctrl：
可以看到第一幅图中的 51, 51, 51 变成了 #333333。
配色
-
日本的一个配色网站。罗列了很多不饱和经典的颜色，当然，自己选配还是很重要的。
-
Adobe 出的在线配色工具，里面有些现成的配色方案还是很不错的。
-
提供了各种预览模式，可以在模板网站中预览，在色块中预览。
图标
-
对中文的搜索支持很好。实际上它是先把中文翻译为英文再搜索的。
-
比上面介绍的那个好用的多，字体图标，不需要考虑像素大小，全部是矢量图。并且图标精美。如果不使用 BootStrap，单独添加图标的话，这一套图标在合适不过了。
-
阿里巴巴制作的图标库。
数据处理
Json
-
将json数据输入进去，会生成一个树形的结构，方便查看每个节点。
展示
reveal.js
-
在网页上展示 slides 幻灯片，太酷了。针对不会代码的人还有一个在线编辑器：http://slides.com
还有一个新手入门教程：Reveal.js Tutorial-Reveal.js for Beginners
本文不定期更新。