优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 16 分钟
（微软工程师）：色彩管理确实是个复杂的话题，前阵子我也被它弄得烦不胜烦。网上搜索一番发现相关文章都晦涩难懂，硬是啃完那些文章，我的问题解决了，但也发现这个话题其实完全可以用浅显的方式来解释，于是就分享出来给大家省点时间 &&&
作为一个摄影爱好者，我的绝大部分照片都是用来在网上分享的，所以本次讨论的重点是如何让自己的照片在网上正确地显示。
当然，也会有另外一小部分照片是自觉拍得特别好的，打印出来拿出去得瑟，但那个就不在此次讨论范围了。
本文对应的PPT可以到微盘下载：
问题出在哪？
首先，模仿那张著名的CMOS尺寸示意图，我们来粗略地比较一下几个常见的色彩空间：
可见，各个色彩空间表达颜色的能力大相径庭。而这种不同也正反映了我们平时使用的各种屏幕（显示器、手机屏幕、iPad屏幕）显示颜色的能力不同，同一个颜色代码在不同屏幕上看上去极有可能是不同的颜色。所以我们不得不在若干个色彩空间之间转换，而色彩不一致的问题，就出在转换的过程中。
让我们通过下一页的图表来看看一张照片从RAW文件到被人眼看到都经历了哪些步骤。
* 勘误：RAW本身是没有色彩空间的，详情见最后的增加的一页。
在这些步骤中，两个红色箭头标出的就是最容易出问题的地方，因为它们都会把图片在两个色彩空间之间转换。
第一个红箭头代表的是P图阶段，第二个红箭头代表的是看图阶段，接下来我们就针对这两个阶段来研究一些对策。
校色是前提
无论你用的是什么显示器，都必须经过校正才能显示出正确的颜色。
谁能告诉我上面几个色块里哪个是标准的红色？反正我是不能，不要相信自己的眼睛，因为它太容易被骗，让校色仪来解决这个问题。
还有人说专业P图用的都是苹果，那我买个苹果的显示器或者笔记本不就行了。苹果的OSX在颜色管理方面确实比WINDOWS要先进一点点，但不代表它的显示器就会一直显示正确的颜色，就拿我自己的两台MBP来说，都是偏黄的，而且各有各的偏。所以无论你是用DELL、EIZO还是苹果的显示器，请校色！
插播老段子一则：啊不不，张总，是这样的，再贵的显示器都要校色的。
校色仪太贵？
淘宝上红蜘蛛100块租一天，可以把电脑、手机、iPad、笔记本甚至电视机全都校一遍。
显示器ICC文件
通过校色，我们可以得到一个ICC文件，这个文件是针对被校正的那台显示器生成的一个色彩空间描述文件。有了这个文件，各种软件就有了在不同色彩空间之间转换的依据。
有人问，同样型号的显示器，我把别人生成的ICC文件拷贝过来用可以吗？
想得美！每台显示器或多或少都有点区别，同一批次可能行得通，但批次这东西谁说得清。
另外，厂家给你提供的那个默认的ICC文件其实就是省事的做法，因为逐台校色实在太费时间，所以这个事情得自己做。
校色后WINDOWS长啥样
就拿我的WINDOWS机器举个栗子，经过校色之后的系统设置如图（控制面板-&颜色管理，即可进入该界面）
首先，在设备列表里选中你的显示器（DELL U2413）
然后你会在ICC配置文件列表里看到若干个项目：
Dell U2413（HDMI）-1（默认值）
这个就是校色仪生成的配置文件，设置为默认值的意思就是该文件在系统里生效了，你现在在显示器上看到的任何颜色都是用这个ICC文件转换出来的。
Dell U2413 Color Profile, D6500
这个是DELL提供的通用ICC文件，你可以试试把这个设为默认，会发现屏幕会有非常明显的变化（人眼的不可靠啊。。）
这个就是WINDOWS默认的色彩空间了，也是网络通用的色彩空间（微软一厢情愿地希望用sRGB来统一宇宙色彩空间，但被现实无情地鄙视了）
那么多ICC配置文件，用哪个？
无论你在系统的ICC列表里看到多少个配置文件，遵循以下原则：
如果校色了，那么用校色仪生成的那个ICC文件，这个一定是首选。
如果没有校色的条件，那么用显示器厂商提供的通用ICC文件。
只有以上两个是最接近真实的方法，网上一部分教程建议把色彩空间统一设置为sRGB是非常错误的做法，那样做的效果只是让同一张图片在你自己电脑的不同软件上看起来是一样的，但世界上的其他人看到的跟你都不一样！
————————————————————下面进入P图阶段————————————————————
P图阶段（Photoshop）
P图阶段所用到的软件，比如Photoshop、Lightroom等都对色彩空间有很好的支持。先说Photoshop，进入色彩设置界面（编辑-&色彩设置），在显示器颜色的设置中，RGB三原色所对应的ICC配置应该与上一节里所展示的WINDOWS设置一致。
当你在PS里打开一张图片的时候，你很有可能遇到这个对话框：
以下三张图分别对应着从上到下三个选项的效果：
无论如何都不要选第三项，因为它粗暴地放弃了色彩管理，那张图看起来也非常假
不得不说的是，有人还就喜欢把图调成这种重口味的，哈哈，但即便是这个审美倾向，也不应该选这个
剩下的两个，乍一看选任何一个都可以，因为看上去效果是一样的，颜色自然而真实，下面将介绍它们之间的区别。
首先，被打开的图片是一张内嵌了ICC色彩配置的RAW文件，而那个ICC就是常见的Adobe RGB。而我的显示器校正以后的ICC简称为U2413，这也是Photoshop和Windows当前生效的色彩配置。两个选项的作用分别是：
使用图片内嵌的色彩配置。
PS处理图片的时候用的是原有色彩空间Adobe RGB，仅在显示的时候转换为U2413
把图片从自己的色彩空间转到。
PS色彩空间 PS直接把图片里的颜色从Adobe RGB转换到U2413，显示的时候就不需要再转了。
看上去非常绕，事实上以上两项无论你选哪个，影响的都只是PS的内部运算，而在显示的时候，PS都会把颜色转换到U2413，所以最终看到的效果都是一样的。
简单来说，就跟我们追求大的动态范围是一个道理，如果图片内嵌的色彩空间大于你当前的色彩空间，那么保留。比如在这个例子里，Adobe RGB是比U2413要丰富的，那我们选第一项来保留原有色彩空间。而如果原图内嵌的仅仅是sRGB这样的货色，那转成U2413这样的广色域也未尝不可。
还能再简单点吗？
能，一律选第一项！
P图P得差不多就可以导出成JPG了，Ctrl+Shift+Alt+S就进入了导出JPG的界面，红框里的区域就是关键：
务必要勾选“转换到sRGB”
sRGB就是浏览器里看图片的最保险的色彩空间，因为WINDOWS默认色彩空间就是这个，而WINDOWS又是最被广泛使用的操作系统。各个显示器厂家在生产的时候，也尽量保证sRGB色彩空间显示出来不会太离谱。可以说，把图片导出到sRGB色彩空间的这个做法，就是针对网络浏览的最佳实践，所以请务必勾选。
至于那个下拉框里的四个选项，是用来预览导出后的图片在不同条件下面查看的效果，从上到下解释一下：
在IE和WINDOWS上看的效果（仅限于你自己的机器）
在古董MAC下看的看的效果
在支持完整色彩管理的浏览器下看的效果，比如Chrome和Firefox（近似别人看到的效果）
在你自己的显示器上看的效果（同时也是别人看到的效果）
请以第四项的效果为准，同时可以参考第三项的效果，头两项则可忽略。
这些天杀的软件啊，给我那么多选项做什么，老子只要最make sense的那个！
P图阶段（Lightroom）
Lightroom相对傻瓜化，根本找不到任何与色彩管理相关的设置，它的工作方式是保留原图的色彩空间，显示的时候转换为系统默认的色彩空间，导出JPG的时候一律转成sRGB。我觉得这个工作流非常正确，保留原图色彩属性，用正确的颜色预览方便P图，导出为网络通用色彩空间，完美。
所以在一台经过校色的显示器上，你在Lightroom里面看到的就是正确的颜色，导出以后可能会稍有偏差（主要是没那么鲜艳了），但也非常接近原有效果了。
如果你使用LIGHTROOM，恭喜，你啥都不用做，相信它就好。
有人会问，为什么LR导出来的图片放在IE里面看，会异常鲜艳呢？
答案是你很有可能使用了广色域显示器，接下来进入看图部分。
有没有发现导出的JPG放到浏览器里就变得异常鲜艳呢？这就是之前困扰我许多天的问题，我翻阅很多文章，来回倒腾系统设置，甚至重新P图，非常挫败，所以得解时几乎内牛满面啊。。。
首先，那个把图片显示得异常鲜艳的浏览器极有可能是IE或者各种带壳的IE（比如QQ浏览器、360浏览器等所有以IE为内核的浏览器。。。），因为IE的颜色管理是半吊子。它虽然支持的ICC版本最全（版本2和4都支持），但它在显示的时候，漏掉了最重要的一步，也就是把图片从sRGB转换为显示器的色彩空间（还是拿我举个栗子，就是之前提到的U2413）。
接下来让我们来仔细分析并想一些对策。
让我们来复习一下这张图，理论上浏览器应该把图片从sRGB转换为显示器色彩空间（U2413）来显示。但IE偏不这样，它直接把未经转换图像数据直接丢给显示器了，这就相当于一个中国人看一部印度字幕的美国电影，就是这么滑稽。背后原因不得而知，以下纯属个人猜想：
微软自己主导sRGB，所以一切到此为止。
转换要时间的啊，为了性能，不转了，反正大部分人看不出来。
而所有其他浏览器都做得很到位，无论是Chrome、Firefox还是Safari，都会兢兢业业地做色彩空间地转换，让你看到真实的效果。
这个问题有多严重？
这个问题并不严重，因为仅在使用广色域显示器的情况下，这个问题才变得显眼。而广色域显示器并不是那么普及，大部分人用的还是是普通（非广色域）显示器。对于普通显示器，由于它们在生产的时候就是针对sRGB色彩空间的，所以直接把sRGB的图像数据往上丢也是行得通的，即便没有那么准确，但也八九不离十。
所以，如果你以正常流程P图、导出JPG，那么绝大部分人看到的都是正常的颜色。
而如果你正在使用广色域显示器，千万不要骂它，广色域可是好东西，让你以最丰富的色彩空间来处理图片，所以只要解决那一点点不太和谐的看图问题就好了。
如何用广色域显示器在WINDOWS里看到真实的色彩呢？
无论是IE还是WINDOWS资源管理器里的预览，图像都不做色彩空间转换。但是“Windows图片查看器”除外，它和其他几个浏览器一样，会老老实实地做色彩转换，所以用它看到的图片，就是正确的颜色。
其次，各种第三方看图软件，比如ACDSee和IrfanView，默认是不做色彩空间转换的。所以你要做的是到更改它们的设置，把色彩管理的选项给勾起来。
如图所示，我自己用的是IrfanView，到设置里面把相应的选项勾上即可（当然会需要到官网下载一点额外的插件，相信难不住聪明的你的）
最后，尽量避开IE及其马甲，改用Chrome、Firefox或Safari等对色彩空间有完整支持的浏览器，以它们的显示效果为准。
如果你用苹果
如果你使用的是苹果电脑（装Windows的除外），那么恭喜你，无论是P图还是看图，唯一需要做的事情就是校色。
即便不校色，Mac的显示效果也是非常接近真实的，OSX接管了所有颜色管理的事情，不需要用户操心。这就是那么多人爱用苹果来做图的原因。
扩展阅读 ——RAW文件的色彩空间
RAW文件本身记录的是相机传感器（CMOS）对光线的物理反应，所以它本身是没有套用在任何色彩空间的。
那么问题来了，相机的色彩空间会影响RAW吗？
答案是不会，这个和相机内设置的色温是类似的效果，只影响机内直出的JPG。
本文提到RAW的时候直接套用了Adobe RGB色彩空间确实欠妥，因为色彩空间是在Adobe Camera Raw(ACR)插件在解析RAW文件的时候套用上去的。我们不仅可以查看，还可以改变ACR的工作方式。
如图所示，红框里的就是ACR渲染RAW时候的设置，用的是Adobe RGB色彩空间，每个通道的深度是16位。
点击它就可以进行进一步设置。
这是ACR的设置界面，列表里面有四种色彩空间供选择。
个人认为，色彩空间的选择，应当尽量与当前显示器的显示能力相匹配，选择过大或过小的色彩空间，都会造成色彩的不准确或损失。
Adobe RGB，市面上的广色域显示器，大部分是针对该色域设计的，能够表达99%的色彩。所以如果是用的广色域显示器，可选择Adobe RGB。
ProPhoto RGB是比Adobe RGB更加宽广的色彩空间，宽广到大部分显示器无法显示，所以选择它意义不大。
再就是sRGB，如果你的显示器是针对sRGB校准的，那么选择这个色彩空间也是可以的。
ColorMatch RGB与sRGB比较接近，如果你都没有听说过，那忽略它吧。
最后，希望本文能帮到你。
【配色达人速成三部曲】
Step 1：打好色彩基础是关键呦！
Step 2：进阶技巧！向高手模仿是捷径！
Step 3：直接开挂！不保证顶尖但一定正确！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量92万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
网站也玩参与感！10个技巧让用户拥有暖心的VIP体验
编者按：参与感适用多个领域，效果显著，回到网页设计领域，今天@AnyForWeb_UED 同学分享10个打造参与感的技巧，另附上腾讯多位高级设计师的相关...
评论还可以输入字
验证码加载中....
评论就这些咯，让大家也知道你的独特见解
以上留言仅代表用户个人观点，不代表优设立场
阅读 35750编者按：无论校园还是职场，PPT都是必备技能，想快速提高PPT设计能力，少不了有个系统全面的教程。今天将PPT整个设计流程与方法技巧都分享出来，转给需要的同...阅读 7039授人以鱼不如授人以渔，我写文章的目的并不是让大家完全按照我的方法来做，而是希望我们都能提高自己的思维方式，因为现在网上的方法与经验实在太多（又不能确定都是正...阅读 137309Helvetica 是一种被广泛使用的的西文字体，于1957年由瑞士字体设计师爱德华德·霍夫曼（Eduard Hoffmann）和马克斯·米耶丁格（Max ...阅读 6440编者按：也许是刚毕业的你最该看的一篇干货。如果你已经习惯了等别人给需求，然后开Photoshop，再等别人说改哪里就改哪里，肯定谈不上工作成就感。想掌握设计...阅读 5079王M争：最近发现一款看片神器——埋堆堆。这是 TVB 推出的官方 APP，里面有 TVB 历年制作的经典剧集，而且更重要的是不需要充会员，没有片头广告。 整...阅读 38802正如同我们所知道的，网页从诞生之初直到标准化经历了一个漫长的过程，随着网络、硬件、软件的逐步成熟，才有了今天我们所看到的丰富多彩的网络世界。但是世界从来都不...移动互联网领域在产品中搭建积分系统，利用小积分的杠杆作用，可有效提升APP留存率，同时在用户忠诚度、活跃度以及品牌美誉度等方面都会获得积极的反响。 一个完整...阅读 7227逗砂：当你把一个好作品完成后，如何才能卖出一个好价钱？今天这9个商业小贴士，帮你成为一个会赚钱的设计师。 这发生在我们所有人身上。你在大街上挥洒着汗水和泪水...阅读 16246圆梓：早在1996年，我们就汇总了网站的10种错误设计。今年，我们访问了215位英美用户，就当代网站存在的错误设计进行了新一轮大规模可用性研究。从小型的地方...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里803 条评论分享收藏感谢收起colourco.de/18.19.20.21.22.
------------------设计相关回答------------------------
· ·· ·------------------12月20日更新--------------------
UI设计交流群：-赞同 40627 条评论分享收藏感谢收起先进的吸管，颜色选择器，渐变发电机等丰富多彩的东西
ColorZilla，最流行的Firefox扩展开发者超过500万下载量的一个终于可以为Chrome！
随着ColorZilla你可以得到颜色从浏览器的任何一点阅读，快速调节这个颜色，并将其粘贴到另一个程序。它可以做这么多......
?吸管 - 得到任何像素的颜色在页面上
?高级颜色选择器（类似Photoshop的）
?终极CSS渐变发电机
?网页色彩分析仪 - 获得一个调色板任何网站
?调色板浏览器7预装调色板
?颜色最近挑颜色
?显示元素信息，如标记名称，类别，标识，尺寸等历史?
自动复制挑颜色到剪贴板
?键盘快捷键
的?获取颜色动态悬停元素
?单单击开始采摘颜色（目前仅在Windows上）
?挑选的颜色从Flash对象
?挑选的颜色，在任意缩放级别
==为什么ColorZilla需要许可QUOT＆;在所有网站上＆QUOT存取数据;？ ==
此权限需要ColorZilla其基本从网站上挑选颜色的功能。 ColorZilla **不**收集您的任何数据或浏览活动上的任何网站。我们是非常狂热的隐私自己，你的隐私是极其importan
注：中文翻译来自GOOGLE
ColorZilla插件概述
ColorZilla是个很流行的，(当然啦，colorzilla还支持Firefox浏览器)它为设计师提供了一种简单的浏览器平台工具来找到具体颜色数值并且测量它们的不同。它还具有一个&配色方案浏览器&，允许您选择预配置设置的颜色，容易使用而且功能极其丰富。
ColorZilla插件功能介绍
colorZilla功能很简单，对于web相关开发人员来说用处非常大,利用 ColorZilla&您可以从浏览器中的任一点读取色彩值，快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允 许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。DOM 侦测功能让您可以快速、容易地获得关于 DOM 元素的各种信息
ColorZilla插件下载安装
1.在谷歌浏览器中安装colorZilla插件，并在Chrome的扩展器中colorZilla的功能，colorZilla插件的下载地址可以在本文的下方找到，离线colorZilla插件的安装方法可参考：：？&？
2.colorzilla安装成功后，重启浏览器后，在浏览器的右上方有如下所示的colorzilla的图标：
ColorZilla插件如何使用？
colorZilla安装成功后，我们可以打开一个页面，比如我们想知道新闻的标题是用什么颜色，我们只需点击一下标签栏右上角的取色器，然后托到新闻标题上就可以了，如下图
&ColorZilla有5个功能：
1. 颜色选择器 &点击颜色选择器后，出现一个类似调色盘的窗口，这里是让你调色的，可以将颜色的代码值拷贝并粘贴到网页代码中去。似乎这个功能不是我们需要的，如下图：
2.鼠标点选器 &点击鼠标点选器后，出现一个黑色的数值条，鼠标指针变成十字形，将其移动到当前网页任何有颜色的地方，显示条上会出现对应颜色和颜色的代码值，恩很好，当我们发现自己喜欢的颜色时，选择这个功能，就能立马得到所想要的颜色RGB值或者十六进制值了。So easy！
3. Palette Browser& &点击这个功能后，其实是跟颜色选择器一样的功能。 &
4. Css gradient generator &这个功能很强大，能够将颜色进行渐变，而且还能生成对应的能够兼容所有浏览器的css代码。堪比ps，HTMLer再也不需要到ps中画渐变图啦！省时省力。使用方法很简单，只要选择好自己喜欢的渐变的颜色就行，基本跟ps的渐变用法一致，最后在右下角会生成css代码，直接拷贝粘贴到自己的CSS文件中就可以啦！
5.Webpage Dom color analyzer& &这个功能其实就是分析并计算当前整个网页中所有用到的颜色及颜色代码值的集合，结果会出现在当前网页底部的控制台中。这个功能很直观的观察整个网页的颜色布局，对于如何配色提供参考。当鼠标移动到颜色块上时，对应的使用该颜色的元素在当前网页中会被虚线框动态的标识出来，很清楚的看到网页中哪些元素用到了整个颜色
ColorZilla插件注意事项
& &colorzilla插件安装后需重启浏览器才能生效。
更多的开发者插件可以本站：
网页取色器插件-ColorZilla插件LOGO图片
网页取色器插件-ColorZilla Chrome插件相关插件推荐织梦模板怎么设置背景颜色_百度知道
织梦模板怎么设置背景颜色
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
方法1、首先制作网站背景图片，这个建议找一些大尺寸的图片。（本图仅限测试使用）2、通过FTp工具链接到网站的空间，找到dedecms网站的模版文件templets。找到模版目录下的模版样式文件。如果使用的是默认模版，文件在templets/default/style/dedecms.css文件如果使用的是其他模版，那就看下网页源代码中最上面那部分有行：&link href=&xxxxxxx& rel=&stylesheet& media=&screen& type=&text/css& /&其中的xxxxxx就是目标css位置。3、使用nopepad文件编辑工具打开模版下的dedecms.css样式文件。将html{&&&&background:#FFF;}body{&&&&font:12px Verdana,Arial,T}更改为如下代码：html {&&&&background-image: url(&../images/bj.jpg&);&&&&text-align:}body {&&&&background: &#FFF;&&&&font: 12px Verdana,Arial,T&&&&margin: 0&&&&text-align:&&&&width: 970}4、然后保存，通过FTP工具重新上传至网站模版目录，然后打开网站首页就可以看到网站已经有了背景图片了。从这两个图就可以看到背景图片已经添加成功了。代码解释：background-image为背景图片url(&../images/bj.jpg&) 为背景图片路径text-align: 为居中background: &#FFF; 设置body的背景色&font: 12px Verdana,Arial,T &字体设置margin: 0 &&声明外边距属性&text-align: 位置为居左&width: 970 &body的宽度
电子产品技术支持
你好，背景颜色在body样式里面设置，你可以加图片，或者单纯的颜色，注意是全局调用否则只对一些页面有用。希望采纳，谢谢
在后台模板中怎么改……
为您推荐：
其他类似问题
您可能关注的内容
二倍角公式的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。JS网页版ColorPicker颜色选择器(拾色器)_模板无忧www.mb5u.com
JS网页版ColorPicker颜色选择器(拾色器)_Ajax/JavaScript
JS网页版颜色选择器，也就是大家所说的拾色器，在PhotoShop、DW、Flash软件里面，都有这个东西，作用于拾取屏幕上任意一点的颜色值。本插件是用在网页上的，完成的功能一样，运行的环境不同。这个颜色拾取器用起来挺方便，鼠标在颜色样板上移动，会适时显示颜色基色值，拖动滑块可改变色系色深等。
售价：50UB
相关Ajax/JavaScript：
特效代码搜索
Ajax/JavaScript推荐
猜你也喜欢看这些