srgb色彩空间

The desire for the color of elements to appear consistently on the web across different devices and screens has long been a quest for web designers. However, with the vast majority of people unaware of how to properly color calibrate their monitors beyond crude and often ignorant manipulation of brightness and contrast controls, the quest always seemed a pipe dream.

长期以来,网页设计人员一直希望将元素的颜色显示在不同设备和屏幕上的网页上。 但是,由于绝大多数人不知道如何对显示器进行适当的色彩校准,而不仅仅是对亮度和对比度控件的粗暴和无知的操纵,因此,这一任务似乎一直是个白日梦。

This is beginning to change. The first hurdle – a broad agreement on a standardized color space and gamma – was reached in 1996, in the form of a standard called sRGB. Device and application support for the sRGB color profile – including digital cameras, scanners, printers, HD televisions, monitors, and design tools like PhotoShop – is now widespread.

这开始改变。 第一个障碍-关于标准化色彩空间和伽玛的广泛协议-于1996年以称为sRGB的标准形式达成。 如今,对sRGB颜色配置文件的设备和应用程序支持已广泛普及,包括数码相机,扫描仪,打印机,高清电视,显示器和设计工具(如PhotoShop)。

Color management is also supported in modern browsers, including Firefox 3.6 and higher, Safari 5+ (include Mobile Safari) and Internet Explorer 9 (although IE’s support comes with one important caveat). Chrome and Opera both lack support for color management as of this writing.

现代浏览器(包括Firefox 3.6和更高版本,Safari 5+(包括Mobile Safari)和Internet Explorer 9)也支持颜色管理(尽管IE的支持附带了一个重要的警告)。 在撰写本文时,Chrome和Opera均不支持颜色管理。

The browser color management process could be simply described as this:

浏览器颜色管理过程可以简单地描述为:

  1. The browser reads the monitor settings, to understand how the user’s system displays color. (This is the part that IE currently skips).
    浏览器读取监视器设置,以了解用户系统如何显示颜色。 (这是IE当前跳过的部分)。
  2. The browser reads the image file, and attempts to determine its color profile (i.e. how it was displayed on the original creator’s system). “Untagged” images (those without an embedded color profile) are assumed to be sRGB.
    浏览器读取图像文件,并尝试确定其颜色配置文件(即,它在原始创建者的系统上的显示方式)。 假定“未标记”图像(那些没有嵌入的颜色配置文件)是sRGB。
  3. By understanding the color profile of both the image and the monitor, the browser can map one to the other to preserve the best image quality.
    通过了解图像和监视器的色彩配置文件,浏览器可以将一个映射到另一个以保持最佳图像质量。

If any of these steps is skipped, the color in the final image is likely to be compromised: it will usually appear over saturated or washed-out. To avoid this issue, the suggested workflow for color management on the web is:

如果跳过这些步骤中的任何一个,则最终图像中的颜色可能会受到损害:通常会显示为饱和或褪色。 为避免此问题,建议的Web颜色管理工作流程为:

  1. Work in whatever RGB color space you prefer (Adobe RGB is a general recommendation), but always convert to sRGB for export. (Adobe PhotoShop 5.5 does this by default in the Save For Web option).
    可在您喜欢的任何RGB颜色空间中工作(一般建议使用Adobe RGB),但始终转换为sRGB以进行导出。 (默认情况下,Adobe PhotoShop 5.5在“另存为Web”选项中执行此操作)。
  2. You may wish to tag your JPEG image (“Embed Color Profile”) for greater color profile support across browsers. The downside of this is that doing so will usually increase the file size by a few kilobytes. GIF and PNG files will be tagged during export from PhotoShop by default.
    您可能希望标记JPEG图像(“嵌入的颜色配置文件”),以在浏览器中更好地支持颜色配置文件。 这样做的缺点是这样做通常会使文件大小增加几千字节。 默认情况下,在从PhotoShop导出期间,将对GIF和PNG文件进行标记。

资源资源 (Resources)

Gary Ballard has an excellent tutorial on web browser color management. While focussed primarily on WordPress, OM4 has very good resources on color profiles, sRGB and workflow.

加里·巴拉德(Gary Ballard) 在网络浏览器色彩管理方面有出色的教程 。 虽然OM4主要专注于WordPress,但在颜色配置文件,sRGB和工作流程方面拥有非常好的资源。

翻译自: https://thenewcode.com/392/Color-for-Web-Designers-Understanding-sRGB

srgb色彩空间

srgb色彩空间_网页设计师的色彩:了解sRGB相关推荐

  1. 陶瓷设计灵感来源_网页设计师的色彩灵感来源

    陶瓷设计灵感来源 Design inspiration can (and should) come from any source at all, but there's something to b ...

  2. gamma 色彩饱和度_网页设计师的色彩:了解Gamma

    gamma 色彩饱和度 Explained in very simple terms, "gamma" is a measurement that describes a digi ...

  3. 轻巧画图工具_网页设计师使用的20种超轻巧典雅字体

    除了选择颜色和布局之外,选择正确的字体对于产生几乎所有好的设计作品都至关重要. 但是,对于设计人员来说,寻找合适的字体用于设计项目通常是一项艰巨的任务. 以前,我们曾经展示过一个可以展示100个必备免 ...

  4. ui设计师色彩运用_网页设计师的20多种色彩工具

    为您的Web设计项目设置基本的颜色主题可能是一件容易的事,但是, 确定正确的组合或提出一种配色方案可能会很棘手,尤其是当您不知道哪种颜色工具最适合您时. 因此,为了帮助确定适合您项目的最佳配色方案,以 ...

  5. neo4j图形算法综合指南_网页设计中色彩使用的综合指南

    neo4j图形算法综合指南 There is a lot of material about color to be found online. But none of us has the time ...

  6. Adobe RGB和sRGB色彩空间的主要区别

    首先在于开发时间和开发厂家不同.sRGB色彩空间是美国的惠普公司和微软公司于1997年共同开发的标准色彩空间(standard Red Green Blue),由于这两家公司的实力强,他们的产品在市场 ...

  7. 成功网页设计师的七大必备技能

    成功网页设计师的七大必备技能 那么一个设计师的基础应该从哪里开始构建呢?当然,既然称之为基础,那么它必然不可能一蹴而就.经验是没有替代品的,所以系统的设计课程(无论是否  正式教育)还是很有帮助的.另 ...

  8. 加快信息化建设对地方发展的_加快设计师职业发展的9种方法

    加快信息化建设对地方发展的 重点 (Top highlight) Over the past few months, I have had an increase in conversations w ...

  9. 【赶紧收藏】22款设计师必备色彩工具,轻松打造别样的“视觉诱惑”

    色彩,作为网页或App设计的重要视觉元素之一,不仅能够帮助UI/UX设计师有效地展示和突出界面或产品相关信息和功能, 而且还能够轻松自然的流露和传达设计师相应情感,迅速吸引用户眼球的同时,引起用户情感 ...

最新文章

  1. PCIE BAR空间
  2. 【深度学习】深度学习之对抗样本问题和知识蒸馏技术
  3. linux fish,LINUX命令fishshell-系统管理-比bash更好用的shell
  4. Mysql 数据插入 修改删除
  5. 专属海报小程序_剑3泡泡 | 小程序给你一份专属的账号海报!
  6. leetcode 28 实现strStr()
  7. ISIS开发出加密安卓通信软件
  8. 2022-02-09大数据学习日志——Hadoop离线阶段——Hive窗口函数、性能调优
  9. VB如何自动保存_VB编程——菜单栏设计教程
  10. 计算机组成电路图符号大全,电路图|电路图讲解|电路图符号大全_极客迷
  11. html5 移动端上传图片插件,H5文件上传插件easyUpload.js
  12. 【neo4j】知识图谱实战---构建红楼梦知识图谱
  13. python读取grd数据_一个关于grads显示grd格式数据的问题。
  14. 地质体剖面从构建到Web三维展示
  15. docker ss-pannel_如何构建Docker镜像
  16. Scratch3.0——助力新进程序员理解程序(案例九、等差数列2)
  17. go ent框架使用
  18. 基于Flink的电影数据实时统计平台(一):项目展示
  19. 淡淡的感动——电影《听说》观后感
  20. R语言数据处理——基于tidyverse (一)

热门文章

  1. php 每天的凌晨三点,为什么有些人总是会在凌晨3、4点醒来,到底是在暗示什么?...
  2. 物联网智慧物流平台开发
  3. java关联jnlp,[javaws]jnlp介绍及使用
  4. 内网渗透-PTHPTTPTK
  5. 【从面试出发学习java】- 缓存 - Redis面试题
  6. DVM,ART,JVM之间的关系
  7. android机器人酷炫壁纸,机器人秀app下载
  8. Vue3+Vite项目配置Eslint+Prettier+Husky+Lint-Staged+Commitlint
  9. android调用另一个app,Android调用另一个App界面
  10. Connection Backoff Interop Test Descriptions