恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
UI设计师应该了解的色彩模式有哪几种
0.0°
2022-03-14 原创文章 经验/观点 举报 3233 4 5 0

了解色彩模式以及每一种模式的原理,对于一个设计师来说是必修课。那目前大家常见的色彩有 RGB、CMYK、HSB、HSL、LAB 模式,此外还有位图、灰度、双色调、索引颜色、多通道颜色这些不常见的模式,设计中用的比较少。以下就介绍常见的几种色彩模式,有啥疑问可以留言哦。

1、色彩 RGB 模式

RGB 色彩模式是工业界的一种颜色标准,红 (Red) 、绿 (Green) 、蓝 (Blue) 是色光三原色,三者本身就是一种色光。每一种色光包含 0-255 共 256 级亮度,打个比方 0 级就是关灯最暗,255级就是开灯并调到最亮。RGB三种色光通过不同级的亮度进行叠加形成上千万种(即256×256×256=16777216)颜色,是一种加色模式,比如RGB(255,255,255)是白色,是这三种色光最亮级叠加形成的。RGB 模式是发光显示屏幕的标准色彩模式,通过红、绿、蓝三色发光极上来产生色彩。

2、色彩 CMYK 模式

青 (Cyan) 、洋红 (Magenta) 、黄 (Yellow) 、黑 (Black) 简称 CMYK,众所周知这种颜色模式专门用来印刷,是一种颜色反光(需要借助自然光)的印刷减色模式,比如日常所看到的纸质海报在白天或灯光照射下才能呈现出各种颜色。理论上把 CMY 加在一起就可以得到黑色,但是目前的工艺制造不出高纯度的油墨,CMY 相加后的结果实际是暗红色,因此,为了确保黑色的输出,需要加入一种专门的黑墨来调和。从上图观察有没有发现,RGB 和  CMYK 模式刚好是以相反方向叠加生成对方的颜色。

3、色彩 HSB / HSV 模式

HSB 和 HSV 色彩模式是相同的,HSB 色彩模式使用了更贴近人类感官直觉的方式来描述色彩,比如我们常说的这是什么颜色以及颜色的深浅。HSB作为色彩的三要素,即色相(Hue)、饱和度(Saturation)、明度(Brightness),那么色彩可通过这三个属性去描述,为自然颜色转换为计算机创建的色彩提供了一种直接方法。

色相是组成可见光谱的单色,是色彩呈现出来的相貌。在标准色轮上,色相是按位置度量的,以角度 (0°-360°) 表示(黑色和白色无色相)。

饱和度指颜色的纯度,是从 0%-100% 之间取值,通常我们说这个颜色太深、太浅了一般就指饱和度。饱和度高色彩就较鲜艳,饱和度低色彩就接近灰白色。

明度也称亮度,是指颜色的明暗程度,就是通常我们说的颜色太亮或太暗。也是从 0%-100% 之间取值,0% 即为黑色,100% 是色彩最鲜明的状态。

4、色彩 HSL 模式

HSL是常用在在网页CSS中的颜色模式,部分设计软件也是支持HSL拾色器。HSL与HSB色彩模式非常相似,HSL即色相(Hue)、饱和度(Saturation)、亮度(Lightness),二者的饱和度是相同的,而在亮度上表现的方式不一样。如果用圆锥体模型去描述两种色彩模式更加直观些,如下图:

从模型可以看到 HSB 的往白色靠近,需要同时降低饱和度和提高亮度,往黑色靠近只需要降低亮度即可,不受饱和度影响,这就意味着黑色和白色不是对立的。而 HSL 模式往上就是添加更多白色,往下就是添加更多黑色,白色和黑色是完全对立,来看下两种模式的拾色器就更加直观:

5、色彩 LAB 模式

LAB这样的叫法其实并不准确,准确来说应该称作 CIELAB 或 L*a*b* ,是国际照明委员会(简称 CIE)于1976年定义的色彩模式。CIELAB 空间是三维的,既不依赖光线,也不依赖于颜料,涵盖了人类颜色感知的整个范围,即色域,CIELAB 坐标空间代表了人类明视(日光)视觉的整个色域,远远超过了 sRGB 或 CMYK 的色域。它基于人类视觉的对手颜色模型,其中红色和绿色形成对手对,蓝色和黄色形成对手对。下面用一个三维模型描述更加直观:

如上图 L*a*b* 色彩模型可知,L* 表示亮度,取值范围 [0,100] ,a* 和b* 是色度坐标,取值范围 [127,-128] 。a* 和 b* 是颜色方向:+a* 是红轴,-a* 是绿轴,+b* 是黄轴,-b* 是蓝轴。

6、HEX 色彩模式

HEX 常用在代码中表示颜色,采用的是十六进制(0-9,a-f组合),而 RGB 的各项数值采用的是十进制表示。HEX 的参数是通过十六进制表示法连接三个字节形成,顺序如下,字节 1:红色值(颜色类型红色),字节 2:绿色值(颜色类型为绿色),字节 3:蓝色值(颜色类型蓝色),一个字节表示 00 到 FF 范围内的数字。HEX 每个字节必须是两位数,对于只有一位的,应在前面补零。

好了,色彩模式的探究就到这,接下来笔者还会更新一些色彩相关的研究和总结,一定会给你在设计工作中带来帮助的,记得关注分享点赞哦,谢谢阅读。

Powered by Froala Editor

更新:2022-03-14

收藏

4人已收藏

设计元视界

一起来学习、探索设计新视界吧

  • 7

    作品

  • 2

    粉丝

  • 0

    关注

  • UI设计行业已经饱和了?你是否了解其中的真相
  • 2022年了,UI设计师到底应该具备什么样的能力
  • 色轮是牛顿发明的吗?如何利用色轮创建丰富的调色板
  • 红黄蓝不是真正三原色?一文读懂色彩理论的常见定义

    猜你喜欢

      2022-03-14 原创文章 经验/观点 举报 3233 4 5 0

      UI设计师应该了解的色彩模式有哪几种

      0.0°

      你确定要举报UI设计师应该了解的色彩模式有哪几种

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年03月14日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      4
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录