从需求开始研究颜色. 工作中会遇到关于颜色的问题, 每次自己有权力选个颜色就选得超不和谐, 另外, 有的网页看久眼睛难受, 但现实生活里的东西看久不会难受, 带着这些问题来研究下颜色.

Q

整理需要通过研究解决的问题:

  • 已知一个颜色, 如何匹配到与他能匹配的颜色.
  • 颜色的对比是如何产生的(组成角度), 什么样的对比度在什么情境下最合适.
  • rgb和色轮是两种系统, 如何讲色轮映射到rgb上. 包括色轮的”加”操作如何映射到rgb的”加”操作上.
  • 色轮的三原色是否是cmy

颜色知识太深, 先务实解决问题.

初步认识

三原色

光的三原色是红绿蓝. 色的三原色是红黄蓝. 两者区别在于模式.

光的三原色相加是白色, 所以是加色模式: 即在无色模式下rgb相加得出颜色, 色的三原色相加是黑色: 即在白纸情况下ryb相加得出颜色.

推倒: 无色的表现是黑色, 所以rgb(0, 0, 0)是黑色. 而白色是具有所有颜色rgb(255, 255, 255)

RGB

RGB是牛顿发现的. 光通过色散分解, 发现RGB是不能分解的. 所以原色是RGB.

RGB的特点是”加”.

场景是RGB值代表光的强度.

  • 1~255代表光强度, 越低合成色越接近黑色.
  • RGB的比例代表色相
  • RGB全255代表白色

CMY(K)

CMY是颜料三原色, 场景是在白纸上涂上颜料, 特点是”减”.

  • C代表没有去除红元素, RGB的 G+B 的颜色为C.
  • 颜料里经常用CMY合黑色不合适, 所以加一个黑色.(与RGB的蓝色区分用K)
  • CMY全100%代表黑色.

HSB与RGB的关系

HSI代表从感官上认知颜色的三个方面.

  • 色相(Hue) 颜色的品种. 也就是RGB的配比. 同一个色相的不同饱和度亮度也算同色搭配.
  • 饱和度(Saturation) 颜色的纯度, 鲜艳度. 色相不变的情况下(RGB比例), RGB越大, 颜色越接近白色, 饱和度越低.
  • 亮度(Brightness) 亮度与饱和度相反. 在RGB比例不变情况下, 越小, 颜色越接近黑色, 亮度越低.

色相

色相的单位是度(角度). 也就是以RGB(255, 0, 0)为0deg/360deg的色轮. 其公式为H = f(R, G, B) (°).

在色轮的最外环移动(保持饱和度100%, 明度100%), 发现RGB种总有一个值为0. 也就是纯色的特点. 以此判断其实色相是由2个原色的比例决定的, 其余的那个是配合控制饱和度与明度的.

饱和度

饱和度单位是百分比. 公式: S = 1 - (min(r, g, b) / max(r, g, b)) (%). (应该补充rgb(0, 0, 0)为100%)

公式的字面感觉是: rgb的最小值占rgb值总和的比例. 也就是rgb值越靠近饱和度越低(越接近黑白). 而特殊的是当rgb最小值为0的时候饱和度100%.

饱和度最高

rgb总有一个为0

饱和度最低

rgb值相同

改变饱和度时rgb的变化

当饱和度从100%变为0%时, rgb值都向最大值靠拢. 最大值由亮度决定.

当饱和度达到0%, 当前色相已经掺入最大的白光(rgb相同), 形成的灰色是由原来颜色的亮度决定的.

亮度

亮度的单位是百分比. 公式: B = max(r, g, b) / 255 (%).

从公式看出, 亮度与rgb值总和的大小有关, 可以把rgb值想成三束光的大小, 都没光时一片黑, 都打到最亮时为白色.

亮度最高

rgb总有一个值为255

亮度最低

rgb全为0

改变亮度时rgb的变化

当亮度从100%变为0%时, rgb的值各自匀速变为0. 所以亮度代表rgb的最大值.

颜色对比效果

颜色对比效果也可以分为多个通道.

根据色相

色相相差越多, 颜色对比越明显.

最大的相差为180°, 此时颜色对比最明显, 成为补色, 并且两者相加为白色.

色块相隔30%°为相似色, 用多个相似色做主题可以在同一个色调中制造丰富的质感和层次.

根据饱和度

饱和度明度越高, 页面色彩强烈艳丽, 对视觉刺激是迅速的, 醒目的效果, 但不易于长时间的观看.

根据亮度

亮度相差越多, 对比越大.

本文参考各种网上资料:

RGB/HSB转换

推荐工具:

adobe color

自制工具