css取色问题

html-css014

css取色问题,第1张

首先是格式问题,ps里可以兼容 cmyk与rgb等多种颜色模式,统一想要做的文件颜色格式,cmyk一般用于印刷,rgb一般用于网页及打印。第二点需要注意的是显示器颜色,因为发光体与打印出来的要有一定差别,最好是根据需要打印的文件先矫正一下显示器。最后就是输出,有些打印机是4色的,有些是6色,12色,根据不同打印机类型出小样后再制作。印刷的话也需要出小样,但转换度较小差别不大。

它的功能基本就是这个菜单上这些了——

<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">

其他功能诸如保存配色方案、色盲模拟、网页安全色、随机颜色等不再一一截图。

首先,在打开浏览器,摁F12,一般在页底都会出现开发人员调试器,例如:

(chrome)

(firefox)

把鼠标移到你想要查看的模块,单击右键,选择“审核元素”

开发人员工具会自动定位到该元素,并且将对应的css显示给您,您就可以查看背景颜色了

有可能这个div的层或者元素选择错误,那您可以通过展开html,点击,查找对应的元素

以上方法需要您对html的结构和css的属性有一定了解

如果您只是想要知道这个背景颜色是什么,可以直接下载一个截屏取色的工具进行查看