色彩 - 上

用户头像
南京/设计爱好者/4年前/228浏览
色彩 - 上
用户头像
张肆柒

~

1.色彩的由来

我看过对色彩最有意思的定义:色彩是视锥细胞对不同波长的光的测量。说白了色彩是人对光的一种感觉。

在我们的生活中,有物体自身发光比如显示器,我们可以直接看到它的色彩;还有很多物体本身不发光,比如书籍、布料,需要光线照射到物体上反射到眼睛,我们才会感知到色彩。

所以说,有光才会有颜色,眼睛和大脑的配合使人产生对于色彩的认知。

2.几种常用的颜色模式

发光体的颜色模式-RGB模式

R(red)红;G(green)绿;B(blue)蓝

红绿蓝是三个原色,原色可以叠加出其他颜色,而其他颜色不能叠加出原色

三个通道范围0~255,如R255G0B0红色最大值绿色蓝色都是0那么就是红色,R0G0B0三个通道都不发光是黑色,R255G255B255三个通道都发出最亮的光是白色

RGB模式是一种加色模式,可以理解为光的叠加。红+绿=黄(#FFFF00)、红+蓝=品红(#FF00FF)、绿+蓝=青(#00FFFF)

下面说RGB与十六进制颜色码(HEX)的转换关系

十六进制颜色码通常写为#加六位,前两位对应R、中间两位对应G、后两位对应B

最大值FF对应255,最小值00对应0

不发光体的颜色模式-CMYK模式

C(cyan);M(magenta);Y(yellow);K(black)

CMYK模式是一种减色模式,可以理解为光吸收(减掉)了其他波长的光进行反射。所以印刷用这种模式,C减掉了R,M减掉了G,Y减掉了B。K的存在因为CMY混不出黑色,所以加入black,为了不与blue混淆用K。

四个通道范围0~100%


感知度强的两种颜色模式-HSB/HSV和HSL

给一个色值无论是RGB还是HEX都需要去找个拾色器才能知道是什么颜色,人习惯于通过颜色名称、重一点淡一点亮一点暗一点来描述颜色,下面说符合人们习惯的颜色模式:HSB/HSV和HSL

HSB和HSV是可以理解为同一种色彩模式

H(hue)色相;S(saturation)饱和度;B(brightness)明度

H(hue)色相;S(saturation)饱和度;V(value)明度值

HSL

H(hue)色相;S(saturation)饱和度;L(lightness)亮度

两者因为缩写相似经常被搞混,差异如下:

H:一样

S:HSB/HSV中的S可以理解为深浅(白→基色)

HSL中的S(灰→基色)

B、V/L:HSB/HSV中的B/V可以理解为明暗(黑→基色)

HSL中的L(黑→白)


可见HSB/HSV更符合人的直觉


H范围0~360°,S范围0~100,B、V/L范围0~100

接近人眼的颜色模式-LAB

L(Luminosity)明度,A红绿色,B黄蓝色(不是RGB里的颜色)

l是照度,正向白(最强)负向黑(最弱);正向a为红、负向a为绿;正向b为黄、负向b为蓝

L范围0~100,A范围127~-128,B范围127~-128

这种颜色模式色域广,这种模式和图层样式调整图层结合去用,在一些情况下有妙用

3.色彩的显示

这里要先说下色域的概念:色彩空间,是另一种形式的颜色模式。举例如下图

颜色配置文件:描述色域的文件,为了线上线下输入输出的一致性,后缀icc

放一些比较常用的色彩配置文件,同时解释下那些乱七八糟的前缀都大概是什么意思

列举影响色彩显示的几个因素

4.颜色配置的应用

保证设计中颜色配置文件和输出时颜色配置一致,用户的接受终端的支持的色域能够涵盖你的颜色配置文件的色域便可以保证颜色显示不出问题

几个注意事项:

  1. 养成新建检查颜色配置的习惯
  2. 颜色配置文件的选择并不是越大越好,适合的才是最好的,要视具体情况而定,比如用户iOS多那从头到尾用DisplayP3肯定没问题
  3. 这里在说下Ps的几个坑,①Ps默认的display不是苹果的P3,而是调用你工作设备的颜色配置文件②如果不用sRGB比如用DisplayP3那不要“存储为web所用格式”



以上图片仅为示例用图,勿取色用~

5
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】秒杀icon
【新年UI图标】30个图标
Security Camera UI kit
【新年UI图标】汽车icon
钱包ui模板
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
新拟态风格 UI设计组件库
智能家居中心 简约 UI设计组件库
我的钱包-UI界面设计-app
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】会员icon
户外旅行飞机情侣假日出行
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI通用设计素材1
【新年UI图标】礼物/活动icon
新能源APP应用UIKit
【新年UI图标】旅行icon
UI 登录界面设计模板包
【新年UI图标】钱包icon
【新年UI图标】体育icon
UI界面 组件
手表表盘UI系列
盲盒APP UI设计
你可能喜欢
相关收藏夹
大家都在看
登录注册