2022-1-2-1 Chromatic System
2022-1-2-1 Chromatic System
Chromatic System
色彩体系
色彩
COLOR
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Communicate something
important without using
words at all.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
光
LIGHT
Colour is a pulsation of Electromagnetic
energy.
No light, no color.
光是人类眼睛所能观察到的一种辐射,就其
本质而言是一种电磁波。波长在 380纳米至
780纳米之间的电磁波才能引起人的色知觉。
这段波长的电磁波叫可见光谱,或叫做光。
光具有波粒二象性,即既可把光看作是一种
频率很高的电磁波,也可把光看成是光子 。
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
色彩
COLOR
光反射到人眼中产生的视觉感,
即光的辐射能刺激视网膜
(Retina) 而引起观察者通过视
觉而获得的景象。
Is it really important to
know about this?
色彩轮
Color Wheel
牛顿认为三棱镜分解七种色光为原色 三原色
Primary Colors
物理学家大卫·鲁伯特发现染料原色只是红、黄、蓝三色,理 Red, Blue, Yellow
论被法国染料学家席弗通过染料配合试验所证实。从此,三原
色理论被人们所公认。 Three colors are called
1802年物理学家和医生杨·托马斯Young Thomas根据人眼的
primaries because without
视觉生理特征提出了新的三原色理论。他认为色光的三原色并 them other colors would
非红、黄、蓝,而是红、绿、紫。这种理论又被物理学家麦克 not exist.
斯韦尔证实。 Primary colors cannot be
made through mixes of
色光和颜料的原色及其混合规律是有区别的 other colors.
颜料的三原色是红(品红)、黄(柠檬黄)、青(青蓝)。颜
料混合变暗,为减色混合。
Magenta / Yellow / Cyan( Subtractive color synthesis)。
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
间色
Secondary Colors
When two primary colors
mixed, you can get
secondary colors.
三次色
Tertiary Colors
加色混合 色光三原色
Additive Color Synthesis RGB Additive Primary
Colors
色光三原色是指红、绿、蓝三色,各自对应的波长分别为
700nm,546.1nm,435.8nm,这三种色光是其他色光所混合不 RED 红
出来的。改变三原色的混合比例,可得到各种不同的颜色。 GREEN 绿
BLUE 蓝
由于加色混合是色光的混合,因此随着不同色光混合量的增加,
色光的明度也渐加强。当全色光混合时则可趋于白色光,它较
任何色光都明亮。
加色混合效果是由人的视觉器官来完成的,因此是一种视觉混
合。
加色混合原理被广泛地应用在电视机和电脑的显示器、光效应
艺术等主动发光的产品中。
RGB colors are light-based and are used for digital and
on screens.
减色混合 色料三原色
Subtractive Color Synthesis CMYK Subtractive Primary
Colors
物体之所以能显色,是因为物体对色谱中色光选择吸收和反射
所致。吸收的部分色光,也就是减去的部分色光。当两种以上 MAGENTA 洋红
的色料相混或重叠时,相当于照在上面的白光中减去各种色料 YELLOW 黄
的吸收光,其剩余部分的反射光混合结果就是色料混合和重叠 CYAN 青蓝
产生的颜色。
色料混合种类愈多,白光中被减去吸收光愈多,相应的反射光
量也愈少,最后将趋近于黑浊色。这就是减色混合。
印染染料,绘画颜料、印刷油墨等各色的混合或重叠,都属减
色混合。
CMY三色混合可以得到黑色,但这种黑色并不是纯黑,所以
印刷时要另加黑色Black。
The color gamut range of RGB is larger than the one of CMYK.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
补色
Complementary Colors
当一对色光混合叠加能够产生白
色光,或一对色料相互混合能形
成黑灰色,这两种颜色就成为互
补色。
补色为色相环上处于直径两端位
置的颜色。
Complimentary colours sit
opposite each other on the
color wheel
Red and green
Blue and orange
固有色
Proper Color
物体本身所固有的颜色。
习惯上把白色阳光下物体呈现
出来的色彩效果称为固有色。
The inherent color of an
object under white sunlight
is called proper color.
光源色
Illuminant Color
由各种光源发出的光,光波的
长短、强弱、比例性质不同,
形成不同的色光,叫做光源色。
普通灯泡的光所含黄色和橙色
波长的光多而呈现黄色味,普
通荧光灯所含蓝色波长的光多
则呈蓝色味。
The light emitted by various
light sources is different in
length, intensity, and
proportion, is called
Illuminant color.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Monet stayed in an empty apartment that overlooked the cathedral façade and has painted the
same cathedral for over 2 years.
“The cathedral was coming down on top of me, it was blue or pink or yellow.”
written by Monet in a letter to his friend
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Monet painted the same north side of the cathedral from an exact same angle from early morning
to the noon to late afternoon.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
The paintings of Cathedral tell us how important the light and time of day were for Monet,
specifying that he worked particularly well between midday and two o’clock, when the light fell
across the façade from right to left.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
环境色
Ambient Color
物体周围环境的色彩称为环境
色。物体与物体之间的色彩是
相互影响和相互制约的。
不同的色彩对比,会得到一些
同一纯度的颜色,在几乎等明度、等色相而纯度不同的两种颜色 特定的视觉反应。
背景上时,在纯度低的背景色上的会显得鲜艳一些,而在纯度高
的背景色上会显得灰浊。 Color is best like a word in
If we take away the context, you can see that they are exactly some kind of context.
the same colour. A colour can look entirely different in a new
context. We look at a particular
colour. We might describe it
based on its relationship to
the other colours around it
in an image. And because
it’s affected by its
surroundings.
无彩色
Achromatic Color
白、灰、黑等没有色彩倾向的
颜色为无彩色
有彩色
Chromatic Color
无彩色之外的一切色彩均为有
彩色
All colors except
achromatic are called
chromatic colors.
我国古代把黑、白、玄(偏红
的黑)称为色,把青、黄、赤
称为彩,合称色彩。
有彩色就是具备光谱上的某种
或某些色相,统称为彩调。
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
How do we know which colors look good together and which ones don’t?
The colour wheel helps designers and illustrators to brainstorm for ways of
coming up with good looking colour schemes.
The easiest formula for harmony is monochromatic because it only uses one color.
Just pick a spot on the color wheel and use your knowledge of saturation and value to create
variations.
The best thing about monochromatic color scheme is that they’re guaranteed to match.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Analogous color scheme uses colors that are next to each other on the wheel,
like red and orange or cooler colors like blue and green.
Don’t be afraid to play with the palette and create your own unique interpretation.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
To avoid complementary color schemes that are too simplistic, add some variety by introducing
lighter, darker, or desaturated tones.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
A split complementary color scheme uses the colors on either side of the complement that gives
you the same level of contrast but more colors to work with and potentially more interesting
results.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
When you are working with two colours that are closely related, you know they visually agree with
each other.
Then you combine them with a colour with a completely opposing look across the colour wheel.
This gives you convinces about agreement and decent withing a single colour scheme.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
A triadic color scheme uses three colors that are equally spaced, forming a perfect triangle on the
wheel.
These colour schemes have a strong potential for expressing feelings of energy and diversity.
These combinations tend to be pretty striking especially with primary or secondary colors, so be
mindful when using them in your work.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Tetradic color schemes form a rectangle on the wheel, using not one but two complementary color
pairs.
This formula works best if you let one color dominate while the others serve as the background.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
色相 HUE
明度 VALUE
彩度 CHROMA (SATURATION)
Any colour you can imagine has three things going on with it.
What we are talking about here are hue, value, and chroma (or saturation).
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
色彩属性
Color Components
HUE 色相
VALUE 明度
CHROMA 彩度
色相 HUE
色相表示色彩的特质,是区别
色彩的必要特征。色相取决于
光的波长。
简写为H(HUE)。
有彩色为包含了彩调的颜色,
如红、黄、绿、蓝、紫等几个
彩色调,这些色调便叫色相。
色相和色彩的强弱及明暗没有
关系,只是纯粹表示色彩相貌
的差异。
Hues or colours can be given fancy names, such as pumpkin orange, sky blue, baby blue…
Or they can go named by the colour wheel, like blue, orange, yellow-orange…
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
色相 HUE
色相常被组织成色相环。它的
建立为色彩之间的数学逻辑关
系打下了科学基础。
If we make different hues
together, we can get more
in between shades. All
together they form are
called a color wheel.
著名的有伊顿色相环(12色)
Itten Color Wheel (12 hues) Wilhelm Ostwald Color Wheel (24hues)
奥斯瓦尔德色相环(8色相、
24色相)
蒙塞尔色相环(10色相、100
色相)
Muncell Colour Wheel (10 basic colours and 100 detailed hues)
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
色相 HUE
色相常被组织成色相环。
色相环的波长并不均匀。
明度 VALUE
Value establishes visual clarity
色的明亮程度叫明度。
明度简写V(VALUE)。
明度最高的色为白色,黑色为明
度最低的色。他们之间按不同灰
色排列即显示了明度差别。
有彩色的明度以无彩色的明度为
基础判定。
明度 VALUE
黄光是由绿光与红光加光混合
而成。加光混合后新产生的光,
要比原两种光的任何一种都亮。
黄色光和黄绿色光,它们的振
幅与波长之比,较红光和绿光
的振幅与波长的比数都大。
这就是混合后的加色光要比混
合前任何一种原色光亮的原因。
Our eyes actually depend on value differences more than they depend on hues or levels of
saturation to make sense of what we see. Value tells the eye where one thing ends and another
thing begins. It’s as simple as that the eye is designed to prioritize value differences to make sense
of what it’s looking at.
So, value establishes clarity.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
彩度 CHROMA
彩度表示色的纯度,亦即是色
的饱和度。
简写为 C(CHROMA) or
SATURATION。
颜色的彩度高,叫清色;
混浊色的彩度低,叫浊色。
彩度高的色相特征明显,
同一色相中彩度最高的叫纯色,
无彩色没有彩度。
Saturation refers to a
colour’s brightness or
intensity, meaning how
bright or how muted it is.
Any colour you may know has these three components. Hue, saturation and value are each very
important when it comes to choosing colours for illustrations and photos.
Summary
There are three things to look at when assessing a colour.
It’s hue known as colour.
It’s saturation, meaning how bright or muted the color is and whether the color appears more
subtle or more vibrant.
The value, which how dark or light a colour is. As you can see, it gives us many different
shades, from a deep brown to light pink.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
蒙塞尔表色系
Albert H.Munsell
蒙塞尔色相环
Munsell Color Wheel
蒙赛尔色相以围绕纵轴的环形
结构来表示,常称为蒙赛尔色
相环,共有10种基本色。
Five primary colors:
5R: Red (红)
5Y: Yellow (黄)
5G: Green (绿)
5B: Blue (蓝)
5P: Purple (紫)
Five secondary colors:
5YR: Yellow Red (黄红)
5GY: Green Yellow (绿黄)
5BG: Blue Green (蓝绿)
5PB: Purple Blue(紫蓝)
5RP: Red Purple(红紫)
为了对色相作更详细的划分,
每一种色相又分成10个等级,
总共有100个色相刻度。例如,
红以1R、2R、……、10R为标
10 principle colours and 100 hues in total.
志,且以5R为主要色的标志。
前一色相中的10是后一色相的0,
如10R即为0YR等。
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
蒙塞尔表色系
Albert H.Munsell
蒙塞尔色立体
Chromatic Stereoscope
蒙赛尔表色体系是由色相(H)、
明度(V)、彩度(C)来表示的。
其色立体的基本结构,即以明度阶
段为中心垂直轴,往上明度渐高,
以白色为顶点,往下明度渐低,直
到黑色为止。
其次由明度轴向外做出水平方向的
彩度阶段,愈接近明度轴,彩度愈
低;愈远离明度轴,彩度愈高。
Munsell color system is represented by hue (H), value (V), and Chroma (C).
Hue (H) is the name of colour. Hue is indicated by the initial letters, R for Red, B for blue, PB for
Purple-Blue…
Chroma (C) is degree of strength in a colour. The chromas close to neutral are known as weak
chroma while those are near the maximum are called strong chromas.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Value, hue, and chroma varies and arranged accordingly in a three-dimensional space.
VALUE Vertical axis: the change of value, which increases upward until
white and decreases downward until black
e.g. Light color (higher value) versus dark color (lower value)
CHROMA
Horizontal axis: the change of chroma
The further away from the vertical axis,
the higher the chroma is, which means
the color is brighter; while closer to the
vertical axis, the lower the chroma is,
which means the color is muted
CHROMA
CHROMA
Munsell Colour Longitudinal Section indicated with numbers (from blue green to red)
蒙塞尔表色系明度分割是将黑白之间列为9个灰色段。
无彩色明度阶为1-9,有彩色为2-8。
According to the Munsell color system, we can precisely describe colour, for example, 5R with
value 4 and chroma 14, 5R with value 5 and chroma 12.
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
According to the Munsell color system, we can precisely describe colour and precisely locate a
certain color.
Value, hue, and chroma varies and arranged accordingly in a three-dimensional space.
Homework 1
PDF
Example: former students’ work
Ten principle hues, hues at value 8, Longitudinal Section of Red (5R)
· Red (5R)
· Red-Yellow (5RY)
· Yellow (5Y)
· Yellow-Green (5YG)
· Green (5G)
· Green-Blue (5GB)
· Blue (5B)
· Purple-Blue (5PB)
· Purple (5P)
· Purple-Red (5RP)
· Red (5R)
· Red (5R)
· Red-Yellow (5RY)
· Yellow (5Y)
· Yellow-Green (5YG)
· Green (5G)
· Blue-Green (5GB)
· Blue (5B)
· Purple-Blue (5PB)
· Purple (5P)
· Purple-Red (5RP)
· Red (5R)
· When painting the hue list, the change of the colors should be clear.
· When painting the longitudinal section, the change of Values and Chromas should be even.
· Make the painting neat – cut each color square precisely and paste all squares neatly
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Example
Ten basic hues, hues at value 8, Longitudinal Section of Purple (5P)
INTRODUCTION TO DESIGN THEORY & FUNDAMENTALS OF DESIGN-I
Chromatic System
Example
Ten basic hues, hues at value 8, Longitudinal Section of Blue (5B)
■ Institute of Fundamentals in Architecture & Design 01.09.2022