数字色彩的配色工具幻灯片.ppt

数字色彩的配色工具第1页，共27页，编辑于2022年，星期六第五章 数字色彩的配色工具第五章第五章 数字色彩的配色工具数字色彩的配色工具 第一节第一节 HSV色彩六棱锥色彩六棱锥 第二节第二节 以以HSV建立的色彩六棱锥立体模型建立的色彩六棱锥立体模型 第三节第三节 数字色系五级配色表数字色系五级配色表第2页，共27页，编辑于2022年，星期六不同的色彩模型有不同的色彩布局和体系结不同的色彩模型有不同的色彩布局和体系结构，同时也会带来不同的配色方式。构，同时也会带来不同的配色方式。HSV色彩模型色彩模型是用户（设计师）直观的色彩模型，它的配色很接是用户（设计师）直观的色彩模型，它的配色很接近调制颜料绘画的配色。我们可以通过调节色相、近调制颜料绘画的配色。我们可以通过调节色相、明度、饱和度，来实现我们期望得到的配色。明度、饱和度，来实现我们期望得到的配色。第五章第五章 数字色彩的配色工具数字色彩的配色工具第3页，共27页，编辑于2022年，星期六HSV是计算机颜色的模型之一，它在计算机实用是计算机颜色的模型之一，它在计算机实用软件里，常被称为软件里，常被称为HSB色彩模型。因为它用色彩的直色彩模型。因为它用色彩的直观属性来描述颜色，它的三个颜色参数正好对应色彩的观属性来描述颜色，它的三个颜色参数正好对应色彩的主观三属性（三要素），跟我们传统的颜料色彩设计相主观三属性（三要素），跟我们传统的颜料色彩设计相类似，所以它称为用户（设计师）直观的色彩模型。类似，所以它称为用户（设计师）直观的色彩模型。第一节 HSV色彩六棱锥 一、HSV色彩六棱锥的外观第五章第五章 数字色彩的配色工具数字色彩的配色工具第4页，共27页，编辑于2022年，星期六 HSV模模型型的的色色彩彩从从CIE三三维维颜颜色色空空间间转转变变而而来来，它它采采用用的的是是用用户户直直观观的的色色彩彩描描述述方方法法，它它跟跟蒙蒙塞塞尔尔显显色色系系统统的的色色立立体体较较接接近近，但但只只是是显显示示了了蒙蒙塞塞尔尔色色立立体体的的南南半球。半球。色色相相（H）处处于于六六棱棱锥锥顶顶面面的的色色平平面面上上，它它们们围围绕绕中中心心轴轴V V旋旋转转和和变变化化。色色彩彩明明度度（B）沿沿六六棱棱锥锥中中心心轴轴V V从从上上至至下下变变化化。色色彩彩饱饱和和度度（S）沿沿水水平平方方向向变化，越接近六棱锥中心轴的色彩，其饱和度越低。变化，越接近六棱锥中心轴的色彩，其饱和度越低。（一）HSV色彩六棱锥的色彩描述第五章第五章 数字色彩的配色工具数字色彩的配色工具第5页，共27页，编辑于2022年，星期六HSV HSV 色彩六棱锥色彩六棱锥第五章第五章 数字色彩的配色工具数字色彩的配色工具第6页，共27页，编辑于2022年，星期六 HSV色色彩彩模模型型是是从从RBG立立方方体体的的正正投投影影演演化化而而来来，如如果果我我们们沿沿RBG立立方方体体的的对对角角线线从从白白色色顶顶点点向向黑黑色色原原点点看看去去，可可以以得得到到立立方方体体六六边边形形外外形形。RBG立立方方体体的的红红（R）、黄黄（Y）、绿绿（G）、青青（C）、蓝蓝（B）、品品红红（M）六六个个顶顶点点依依次次组组成成HSV色色彩彩模模型型顶顶面面的的六六个个基基本本色色点点，白白（W）则则作作为为顶顶面面的的中中心心点点，以以此此形形成成的的六六边边形形向向RBG立立方方体体的的黑黑（B）做做正正投投影影而而形形成成的的倒倒棱棱锥锥，就就是是HSV色彩模型。色彩模型。（二）HSV色彩六棱锥模型的演变第五章第五章 数字色彩的配色工具数字色彩的配色工具第7页，共27页，编辑于2022年，星期六RBG立方体的立方体的正投影演化正投影演化第8页，共27页，编辑于2022年，星期六 这种这种“基于明度的基于明度的HSBHSB色彩模型色彩模型”的的调色板，在一些实用的图形图像软调色板，在一些实用的图形图像软件里也有体现件里也有体现第9页，共27页，编辑于2022年，星期六 （一）HSV 色彩六棱锥顶面及其色相在在HSV色彩模型中，六棱椎顶面的正六边形，是色彩模型中，六棱椎顶面的正六边形，是一个饱和度最高的有彩色系的色相环。在这个六边形色一个饱和度最高的有彩色系的色相环。在这个六边形色相环中，色相是沿逆时针方向变化的，用相环中，色相是沿逆时针方向变化的，用H（hue）来表来表示色相。在六边形中，示色相。在六边形中，S（saturation）表示色彩饱和度表示色彩饱和度变化的量。当颜色位于六边形中心时，颜色的饱和度为变化的量。当颜色位于六边形中心时，颜色的饱和度为0（S=0），呈纯白色。饱和度的变化由六边形中心向六呈纯白色。饱和度的变化由六边形中心向六边形外框逐渐增大，位于六边形外框上的颜色的饱和度最边形外框逐渐增大，位于六边形外框上的颜色的饱和度最高。高。二、HSV色彩六棱锥的结构第五章第五章 数字色彩的配色工具数字色彩的配色工具第10页，共27页，编辑于2022年，星期六HSV色彩六色彩六棱棱锥锥顶顶面六面六边边形色平面形色平面第11页，共27页，编辑于2022年，星期六在在数字色彩设计中，我们把数字色彩设计中，我们把HSV色彩六棱椎顶面色彩六棱椎顶面六边形色平面以外的有彩色系的颜色，统称为复色。六边形色平面以外的有彩色系的颜色，统称为复色。我们把我们把 HSV色彩六棱椎在红色的位置上纵向剖色彩六棱椎在红色的位置上纵向剖开，可得到一个等腰直角三角形的红色剖面图。下面开，可得到一个等腰直角三角形的红色剖面图。下面的剖面图显示了红色（的剖面图显示了红色（M100,Y100M100,Y100）的明度及饱和度）的明度及饱和度变化趋势。变化趋势。第五章第五章 数字色彩的配色工具数字色彩的配色工具（二）HSV 色彩六棱锥立面及其明度、饱和度第12页，共27页，编辑于2022年，星期六HSV色彩六色彩六棱棱锥锥纵纵向剖面向剖面图图第13页，共27页，编辑于2022年，星期六 在在HSVHSV顶面六边形色相环中，色相是沿逆时针方向变顶面六边形色相环中，色相是沿逆时针方向变化的，用化的，用H H（huehue）来表示色相。每变换）来表示色相。每变换11夹角，色相夹角，色相就有细微的变化。从就有细微的变化。从00到到360360，色相变化的顺序按，色相变化的顺序按红红橙橙黄黄绿绿蓝蓝品红，每个颜色相隔品红，每个颜色相隔6060，这，这6 6个颜色也构成了六边形的个颜色也构成了六边形的6 6个顶点。从个顶点。从00到到359359，色相按光谱色带依次排列，当到达，色相按光谱色带依次排列，当到达360360时，色相又时，色相又回到回到00时的色彩。时的色彩。第二节 以HSV建立的色彩六棱锥立体模型 一、HSV六棱锥立体模型第五章第五章 数字色彩的配色工具数字色彩的配色工具第14页，共27页，编辑于2022年，星期六HSV色彩六色彩六棱棱锥锥三三维维模型模型第15页，共27页，编辑于2022年，星期六 从从六六棱棱锥锥顶顶面面六六边边形形的的中中心心向向外外辐辐射射的的方方向向，我我们们把把六六边边形形的的色色彩彩按按照照饱饱和和度度分分成成5个个等等级级，形形成成5圈圈不不同同饱饱和和度度的的色色相相环环。这这5圈圈色色相相环环从从中中心心层层层层向向外外辐辐射射，每每一一圈圈色色相相环环之之间间显显示示了了色色彩彩的的饱饱和和度度由由低低向向高高变变化化，每每级级的的色色彩彩值值差差为为25%。最最里里面面1 1圈圈是是饱饱和和度度为为0的的颜颜色色，呈呈白白色色；第第二二圈圈是是饱饱和和度度约约为为25%的的淡淡色色调调颜颜色色，第第三三圈圈是是饱饱和和度度约约为为50%的的低低纯纯调调颜颜色色，第第四四圈圈是是饱饱和和度度约约为为75%的的中中纯纯调调颜颜色色，最最外一层是饱和度为外一层是饱和度为100%最高的纯色调颜色。最高的纯色调颜色。第五章第五章 数字色彩的配色工具数字色彩的配色工具二、HSV六棱锥立体模型横截面分解第16页，共27页，编辑于2022年，星期六HSV色彩六色彩六棱棱锥锥顶面横截面分解图顶面横截面分解图第五章第五章 数字色彩的配色工具数字色彩的配色工具第17页，共27页，编辑于2022年，星期六 我我们们把把HSV色色彩彩六六棱棱椎椎纵纵向向剖剖开开，取取一一个个直直角角三三角角形形，并并分别把它两直角腰上的色彩分成分别把它两直角腰上的色彩分成5个等级。水个等级。水 平平方方向向是是有有彩彩色色系系的的颜颜色色，它它显显示示颜颜色色的的饱饱和和度度变变化化。等等腰腰直直角角三三角角形形最最左左边边的的颜颜色色饱饱和和度度为为0，它它是是HSV色色彩彩六六棱棱椎椎顶顶面面色色相相环环的的中中心心，呈呈纯纯白白色色；每每个个等等级级之之间间颜颜色色的的饱饱和和度度从从左左至至右右依依次次增增大大，每每级级的的色色彩彩值值差差为为25%；它它们们依依次次是是25%、50%、75%、100；最最右右边边的的颜颜色色是是最最纯纯的颜色，饱和度也最高。的颜色，饱和度也最高。（HSV模型）模型）第五章第五章 数字色彩的配色工具数字色彩的配色工具三、HSV 六棱锥立体模型纵截面分解第18页，共27页，编辑于2022年，星期六 垂垂直直方方向向是是无无彩彩色色系系的的颜颜色色，它它显显示示颜颜色色的的明明度度变变化化。最最上上面面的的颜颜色色明明度度最最高高，垂垂直直中中心心轴轴的的顶顶端端呈呈纯纯白白色色，与与S=0的的有有彩彩色色系系的的颜颜色色重重合合，垂垂直直中中心心轴轴最最下下面面的的颜颜色色明明度度最最低低，是是纯纯黑黑色色，中中间间三三个个等等级级颜颜色色的的明明度度从从上上至至下下依依次次减减弱弱，每每级级的的色色彩彩值值差约为差约为25%。（HSV模型）模型）第五章第五章 数字色彩的配色工具数字色彩的配色工具第19页，共27页，编辑于2022年，星期六HSV色彩六色彩六棱棱锥锥纵纵向剖面分解向剖面分解图图单单色色第20页，共27页，编辑于2022年，星期六 在上图中，把分别在上图中，把分别10个等级的色彩进行编号并确定相个等级的色彩进行编号并确定相应的色调名称。除无彩色系的黑白灰色外，水平方向直角应的色调名称。除无彩色系的黑白灰色外，水平方向直角边上的颜色统称为边上的颜色统称为“纯色系色调纯色系色调”,它们只含有纯净的色彩，它们只含有纯净的色彩，编号是：编号是：1 1 纯色调、纯色调、2 2 中纯调、中纯调、3 3 低纯调、低纯调、4 4 浅色调。三角浅色调。三角形内部的颜色称为形内部的颜色称为“灰（浊）色系色调灰（浊）色系色调”，编号是：，编号是：5 5 明灰明灰调、调、6 6 中灰调、中灰调、7 7 暗灰调。三角形底边上的颜色称为暗灰调。三角形底边上的颜色称为“暗色暗色系色调系色调”，编号是：，编号是：8 8 微暗调、微暗调、9 9 中暗调、中暗调、1010深暗调。深暗调。第三节 数字色系五级配色表 一、单色五级配色表的色调分布第五章第五章 数字色彩的配色工具数字色彩的配色工具第21页，共27页，编辑于2022年，星期六 HSV色彩六色彩六棱棱锥锥“三三三制三制”色表：色表：一一个个单单色的色的“数数字色系五字色系五级级配色表配色表”的色的色调调分布分布图图第22页，共27页，编辑于2022年，星期六 如果把上图单色的数字色系五级配色表推广到如果把上图单色的数字色系五级配色表推广到其他的各色相，就可以得到多个单色数字色系五级其他的各色相，就可以得到多个单色数字色系五级配色表。为了使用方便，我们创造一个包含着配色表。为了使用方便，我们创造一个包含着1010个个色调分布、但又涵盖所有色相的简单易懂的色调分布、但又涵盖所有色相的简单易懂的“数字色数字色系五级配色表系五级配色表”。二、数字色系五级配色表的色彩表达第五章第五章 数字色彩的配色工具数字色彩的配色工具第23页，共27页，编辑于2022年，星期六 在以下的直角三角形里，我们把每个方形的色块划在以下的直角三角形里，我们把每个方形的色块划分成六个不同的颜色，依次按红黄绿青蓝分成六个不同的颜色，依次按红黄绿青蓝品红的顺序排列，它表示在这个纵截面的位置上，色品红的顺序排列，它表示在这个纵截面的位置上，色相是按照相是按照HSV色彩六棱锥顶面的色彩从色彩六棱锥顶面的色彩从0360依依次排列的。我们这里只是选取了次排列的。我们这里只是选取了HSV顶面六边形顶面六边形6个转个转折点的折点的6个标准色来示意它的全部色相。它相当于这个标准色来示意它的全部色相。它相当于这6个个标准色的标准色的6个纵截面的集合图。这就是标准的个纵截面的集合图。这就是标准的“数字色系数字色系五级配色表五级配色表”。第五章第五章 数字色彩的配色工具数字色彩的配色工具第24页，共27页，编辑于2022年，星期六标准的标准的“数字色系数字色系五级配色表五级配色表”第25页，共27页，编辑于2022年，星期六 有了有了“数字色系五级配色表数字色系五级配色表”，我们就可以用量，我们就可以用量化的方法在以上化的方法在以上10个色彩区域之间进行各种个色彩区域之间进行各种1对1，1对2，甚至甚至1对3的色彩搭配。它们可以丛生出很多的的色彩搭配。它们可以丛生出很多的配色方案。这种配色训练即方法简便、又花样繁多，配色方案。这种配色训练即方法简便、又花样繁多，是传统的手工调制颜料的是传统的手工调制颜料的“色彩构成色彩构成”训练所无法比训练所无法比拟的。拟的。第五章第五章 数字色彩的配色工具数字色彩的配色工具第26页，共27页，编辑于2022年，星期六谢 谢 ！第五章第五章 色彩的对比、调和与渐变色彩的对比、调和与渐变第27页，共27页，编辑于2022年，星期六