<img src="https://pic3.zhimg.com/a562b9c32117783d9270847de393ecfa_b.jpg" data-rawwidth="299" data-rawheight="472" class="content_image" width="299">
个人常用的是取色、截图(选取矩形区域)还有截取滚动窗口,常用到我把它最小化到托盘,然后专门设置了Alt+2/3这样单手就能完成的全局快捷键。
取色和截图的时候在角落有放大的预览——
<img src="https://pic4.zhimg.com/a3b1f8a609a38db6b6387d22adcd5a33_b.jpg" data-rawwidth="284" data-rawheight="327" class="content_image" width="284">
<img src="https://pic3.zhimg.com/a01bcdb81cc4fe63681a0b6debd715ee_b.jpg" data-rawwidth="244" data-rawheight="359" class="content_image" width="244">
取色后可以看到RGB、Dec、Hex的颜色代码——
<img src="https://pic4.zhimg.com/5652e2137696733b9cc8eb109cbdb29f_b.jpg" data-rawwidth="414" data-rawheight="385" class="content_image" width="414">
另外,如果是设计前期,取色用来分析配色方案,那推荐ColorSchemer Studio。这个可以说是专业级的配色工具了,自带取色器(界面左下角那个吸管)。界面如下——
取色后自动生成与之饱和度、明度匹配的十二色相环。
<img src="https://pic1.zhimg.com/51fe0bba9f3d2a8f8b9486dbbe1ada24_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic1.zhimg.com/51fe0bba9f3d2a8f8b9486dbbe1ada24_r.jpg">
另外“实时方案”、“合成器”、“变体”里面可以非常非常方便的选取同色、补色、类比色。
<img src="https://pic3.zhimg.com/7190e34e650fbc2d9f035ee88275b7fa_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic3.zhimg.com/7190e34e650fbc2d9f035ee88275b7fa_r.jpg">
<img src="https://pic2.zhimg.com/68cdfcfacd9e01ef0625dd11d3e4de29_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/68cdfcfacd9e01ef0625dd11d3e4de29_r.jpg">
对图片的色彩分析也很容易,打开图片就能看到提取出的颜色,可以设置提取颜色的数量,甚至可以一键打码= =||——
<img src="https://pic2.zhimg.com/6080110f12ddd85318978e439a7737d9_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/6080110f12ddd85318978e439a7737d9_r.jpg">
如果没有合适的图片,自己也找不到好的配色思路,那ColorSchemer还提供了一个可以让社稷诗更偷懒的功能,配色方案搜索(可惜不支持中文)——
<img src="https://pic2.zhimg.com/55b480bafa516ada6553ae13a07ac5f9_b.jpg" data-rawwidth="788" data-rawheight="605" class="origin_image zh-lightbox-thumb" width="788" data-original="https://pic2.zhimg.com/55b480bafa516ada6553ae13a07ac5f9_r.jpg">
其他功能诸如保存配色方案、色盲模拟、网页安全色、随机颜色等不再一一截图。
首先是格式问题,ps里可以兼容 cmyk与rgb等多种颜色模式,统一想要做的文件颜色格式,cmyk一般用于印刷,rgb一般用于网页及打印。第二点需要注意的是显示器颜色,因为发光体与打印出来的要有一定差别,最好是根据需要打印的文件先矫正一下显示器。最后就是输出,有些打印机是4色的,有些是6色,12色,根据不同打印机类型出小样后再制作。印刷的话也需要出小样,但转换度较小差别不大。一、认识CSS 颜色(CSS color)这里要介绍的是网页设置颜色包含有哪些;网页颜色规定规范。
1、常用颜色地方包含:字体颜色、超链接颜色、网页背景颜色、边框颜色
2、颜色规范与颜色规定:网页使用RGB模式颜色
二、颜色基础知识
网页中颜色的运用是网页必不可少的一个元素。使用颜色目的在于有区别、有动感(特别是超链接中运用)、美观之用,同时颜色也是各种各样网页的样式表现元素之一,了解CSS 字体颜色。
传统的html颜色与w3c标准下的css颜色对比和DIV CSS运用颜色
CSS color颜色语法:
color:#000000
Css样式中color后直接加RGB颜色值(#FFFFFF 、#000000 、#F00)
RGB颜色值在实际布局时候确定,可以使用Photoshop(简称PS)拾取工具进行获取获得。
三、两种方法设置对象颜色样式
1、在DIV标签内使用color颜色样式
<div style="color:#F00">www.jb51.net</div>
2、在CSS选择器中使用color颜色样式CSS代码:
.divcss5{color:#00F}
/* 设置对象divcss5内文字为蓝色 */
扩展阅读:这里运用了CSS注释对此样式设置说明,了解CSS 注释
3、DIV+CSS颜色样式完整案例:
Css代码:
复制代码
代码如下:
.divcss5{color:#00F}
/* 设置对象divcss5内文字为蓝色 */
HTML代码:
复制代码
代码如下:
<p>
标签内使用color css样式
<div style="color:#F00">www.jb51.net 红色</div>
</p>
<p>外部样式表设置对象color颜色
<div class="divcss5">www.jb51.net 蓝色</div>
</p>
4、实例结构图:
以上使用标签内使用color颜色样式和css代码使用color颜色样式。
四、文字颜色控制一样
传统html和css 文字颜色相同使用“color:”+“RGB颜色取值”即可,如颜色为黑色字即对应设置CSS属性选择器内添加“color:#000”即可。
五、网页背景颜色设置区别
传统设置背景颜色使用“bgcolor=颜色取值”,而CSS中则“background:”+颜色取值。例如:设置背景为黑色,传统Html设置,即在标签内加入“bgcolor="#000"”即可实现颜色为黑色背景,如果在W3C中即在对应CSS选择器中始终“background:#000”实现。
六、设置边框颜色区别
传统“bordercolor=取值”,CSS中“border-color:”+颜色取值。例如:在传统html直接在table标签加入“bordercolor="#000"”即可,在现在CSS中设置“border-color:#000”即可让边框颜色为黑色,同时记得对包括设置宽度和样式(虚线、实现)。
DIV+CSS颜色值扩展知识:
颜色值是一个关键字或一个数字的RGB规范。
16个关键字是采取从Windows的VGA调色板: 水色 , 黑色 , 蓝色 , 紫红色 , 灰 , 绿 , 灰 , 褐红色 ,藏青色, 橄榄色 , 紫色 , 红色 , 银色 , 青色 , 白色 , 黄色 。
七、RGB颜色给出了四种方法之一
1、#rrggbb( 如 ,#00cc00) (强烈推荐使用此表示颜色取值)
2、#的RGB( 如 ,#0c0)
3、RGB(十中,x,x)的x是一个包容性的0和255之间的整数( 如 的RGB(0,204,0))
4、RGB(Ÿ%,Ÿ%,Ÿ%),其中 y是一个包容性的数量介于0.0和100.0( 如 的RGB(0%,80%,0%))
八、以下是RGB颜色表
当然一般的网页开发软件都有颜色取值器:
网页开发软件DW软件中CSS取色器
如何获得CSS颜色值?
我们又不能记住颜色值,以及如何确定准确的与美工图相同颜色值呢?其实很简单通常我们是在PS软件里通过识色器工具进行获得准确颜色值,当然也可以借用其它专门识别颜色工具进行获取准确的color颜色值。
九、div css color颜色样式总结
使用css样式设置对象内容color颜色样式,我们可以使用命名CSS类对象设置其颜色样式,还有直接在html标签内设置color样式