漫谈色彩 by 只为设计.pptx

R:255 G:92 B:0RGB色盘RGBRGB是最常见的色彩模式但本ppt用的是HSL模式第1页/共48页H:32 S:255 L:128HSL色盘HSLHSL与RGB模式可以很方便地进行切换第2页/共48页点击如图下拉箭头，切换到HSL模式，在HSL下修改数值，再切换到RGB模式，值会相应自动修改。后文将以HSL模式为基础。我们只需要第3页/共48页H(Hue)色调赤橙黄绿青蓝紫，这是通过色调控制的S(Saturation)饱和度某种颜色的艳丽程度，由饱和度来控制。L(Lightness)亮度某种颜色，由浅到深，通过控制亮度来得到HSL色彩模式介绍第4页/共48页接下来开始正文色调饱和度亮度第5页/共48页平行垂直斜交色彩的三大关系第6页/共48页主要用于不同元素的并列关系或同一元素的渐变在HSL色彩模式下只调节色调平行色彩第7页/共48页平行关系色彩在HSL色盘上的位置关系第8页/共48页示例1第9页/共48页示例2第10页/共48页特例慎用灰色:要表达并列关系的元素时，灰色应与多种色调搭配，且灰色不宜过多。否则很容易形成强调关系或整体不协调。第11页/共48页表达的是同一/不同元素基于某种色调的层次变化关系垂直色彩1在HSL色彩模式下只调节亮度第12页/共48页垂直关系1色彩在HSL色盘上的位置关系第13页/共48页示例1单色渐变边框阴影综合H:11S:234L:119H:11S:234L:151H:11S:234L:39同一元素第14页/共48页示例2不同元素第15页/共48页释疑层次变化表现为：强调元素用深色非强调元素用浅色或灰色层次变化表现为:元素的并列关系是由于色彩分布错落有致，其中最明显的色彩一般置于中央，淡化了色彩的层次第16页/共48页释疑色彩由浅到深分布，突出了变化趋势，层次就明显了第17页/共48页在HSL色彩模式下只调节饱和度表达的是同一/不同元素基于某种色调的层次变化关系，与垂直色彩1意义相同垂直色彩2第18页/共48页联系垂直色彩2垂直色彩1第19页/共48页联系（HSL色彩立体模型，可不看）255H:11H0255255LSL:119S:234垂直色彩2垂直色彩1平行色彩第20页/共48页区别（需牢记的）H，s不变L=0时，黑色L=255时，白色想要得到一个色调由浅到深的颜色，调整亮度H，L不变S=0时，最灰S=255时，最艳丽想要得到一个色调艳丽或偏灰的颜色调整饱和度第21页/共48页示例第22页/共48页是平行色彩与垂直色彩的结合，可实现更丰富的配色。斜交色彩第23页/共48页斜交方式1：先平行，后垂直1（调亮度）HSL:32,255,128HSL:42,255,128HSL:42,255,192先调节色调H:3242后调节亮度L：128192第24页/共48页斜交方式1：先垂直1，后平行HSL:42,255,192后调节色调H:3242先调节亮度L：128192HSL:32,255,192HSL:32,255,128与前页等价第25页/共48页斜交方式2：先平行，后垂直2（调饱和度）HSL:32,255,128HSL:42,255,128HSL:42,192,128先调节色调H:3242后调节饱和度S：255192第26页/共48页斜交方式2：先垂直2，后平行HSL:42,192,128后调节色调H:3242先调节饱和度S：255192HSL:32,192,128HSL:32,255,128与前页等价第27页/共48页斜交方式3：平行、垂直1、垂直2先调节色调H：3256后调节亮度L：12895再调节饱和度S：25583HSL:32,255,128HSL:56,255,128HSL:56,83,95HSL:56,255,95任意两种颜色都可以通过斜交方式3得到第28页/共48页斜交方式4 同一色调 前面讲的是不同色调颜色的斜交调整方式，这里讲一下同一色调的斜交。A(19,150,119)19,234,119调节饱和度S：234150B(19,234,96)调节亮度L：11996C(19,150,96)如A，仍然感觉有点亮；如B，感觉有点艳丽。这时我们就需要使用斜交色彩得到C第29页/共48页斜交方式4 同一色调同样的道理如D，仍然感觉有点亮；如E，感觉有点艳丽这时我们就需要使用斜交色彩得到F感觉是否不同？E(19,150,119)F(19,150,213)调节饱和度S：234150D(19,234,213)调节亮度L：11921319,234,119第30页/共48页斜交方式4 同一色调由此我们得到了，与垂直色彩不同的颜色方案，颜色更具变化性，让我们有了更多的色彩选择19,234,11919,150,9619,150,21338,234,11938,150,9638,150,21352,234,11952,150,9652,150,213170,0,119170,0,96170,0,213第31页/共48页更多示例第32页/共48页示例 垂直1色彩（调亮度）做渐变效果首先，确定基色11，233，110渐变211，233，110渐变1和线框色11，233，150阴影11，233，48根据基色，衍生出垂直色彩，分别用于渐变填充、线框色和阴影，也可以根据需求，衍生出更多垂直色彩。第33页/共48页示例 垂直1色彩（调亮度）做渐变效果绘制形状用之前得到的垂直色彩赋色第34页/共48页示例 垂直1色彩（调亮度）做渐变效果元素各个部分赋色说明*射线渐变填充渐变211，233，110渐变111，233，150阴影11，233，48线框色11，233，150第35页/共48页示例 平行色彩做多种色调*这里罗列出具有代表性的色调，实际中是用不了这么多*请注意看HSL值渐变211，233，110渐变1和线框色11，233，150阴影11，233，48渐变224，233，110渐变1和线框色24，233，150阴影24，233，48渐变236，233，110渐变1和线框色36，233，150阴影36，233，48渐变250，233，110渐变1和线框色50，233，150阴影50，233，48第36页/共48页示例 平行色彩做多种色调*这里罗列出具有代表性的色调，实际中是用不了这么多*请注意看HSL值渐变263，233，110渐变1和线框色63，233，150阴影63，233，48渐变280，233，110渐变1和线框色80，233，150阴影80，233，48渐变2124，233，110渐变1和线框色124，233，150阴影124，233，48渐变2140，233，110渐变1和线框色140，233，150阴影140，233，48第37页/共48页示例 平行色彩做多种色调*这里罗列出具有代表性的色调，实际中是用不了这么多*请注意看HSL值渐变2150，233，110渐变1和线框色150，233，150阴影150，233，48渐变2170，233，110渐变1和线框色170，233，150阴影170，233，48渐变2190，233，110渐变1和线框色190，233，150阴影190，233，48渐变2200，233，110渐变1和线框色200，233，150阴影200，233，48第38页/共48页示例 平行色彩做多种色调*这里罗列出具有代表性的色调，实际中是用不了这么多*请注意看HSL值渐变2216，233，110渐变1和线框色216，233，150阴影216，233，48渐变2236，233，110渐变1和线框色236，233，150阴影236，233，48渐变20，233，110渐变1和线框色0，233，150阴影0，233，48渐变2170，0，110渐变1和线框色170，0，150阴影170，0，48第39页/共48页示例 平行色彩做多种色调罗列出的16种平行色彩，足够平常所用。这里的颜色仅供参考。实际上是有255种色调可供选择。在此输入一级标题在此输入一级标题在此输入一级标题在此输入一级标题第40页/共48页示例 垂直色彩2+平行色彩做多种色调如果觉得颜色有点艳丽，可相应调整饱和度，这里调整的是渐变2与线框色的饱和度，渐变1和阴影不做调整在此输入一级标题在此输入一级标题在此输入一级标题在此输入一级标题渐变20，169，110渐变10，233，150阴影0，233，48线框色0，169，150第41页/共48页示例2 平行色彩做渐变前面我们讲的是一个元素基于垂直色彩的渐变，这里讲讲平行色彩的渐变。平行色彩的渐变表达的也是一种颜色的平等关系，平衡感较强渐变20，233，110渐变133，233，110第42页/共48页示例3 斜交色彩做渐变如果要打破这种平衡感，呈现层次性的变化，斜交色彩就有了用武之地。渐变30，233，110渐变1（即白色）33，233，255渐变233，233，134第43页/共48页示例3 斜交色彩做渐变任何两种颜色，都可以斜交方式3得到。所以斜交色彩配色更加丰富，也更加复杂，但也运用的较为广泛。掌握了HSL调整方法，多加尝试和练习，会让我们配色更加自如第44页/共48页最后请牢记平行色彩调色调垂直色彩2调饱和度垂直色彩1调亮度斜交色彩平行+垂直色彩第45页/共48页255,255,255255,192,255192,129,255255,129,255129,66,255192,66,255255,66,25566,0,255129,0,255192,0,255255,0,25538,0,19276,0,192114,0,192152,0,192192,0,19222,0,12944,0,12966,0,12987,0,129108,0,129129,0,129192,192,255129,129,25566,66,2550,0,2550,0,1920,0,129255,255,192192,255,129255,255,129129,255,66192,255,66255,255,6666,255,0129,255,0192,255,0255,255,0255,192,192255,129,129255,66,66255,0,0192,0,0129,0,0255,129,192255,66,129255,0,66192,0,38129,0,22255,66,192255,0,129192,0,76129,0,44255,0,192192,0,114129,0,66192,0,152129,0,87129,0,108255,192,129255,129,66255,66,0192,38,0129,22,0255,192,66255,129,0192,76,0129,44,0255,192,0192,114,0129,66,0192,152,0129,87,0192,255,192129,255,12966,255,660.255,0192,255,255129,255,25566,255,2550,255,2550,192,1920,129,129129,192,25566,192,2550,192,2550,152,1920,108,12966,129,2550,129,2550,114,1920,87,1290,66,2550,76,1920,66,1290,38,1920,44,1290,22,129129,255,19266,255,1920,255,1920,192,1520,129,10866,255,1290,255,1290,192,1140,129,870,255,660,192,760,129,660,192,380,129,4466,0,5666,0,066,0,1066,0,1866,0,2766,0,3666,0,4510,0,6618,0,6627,0,6636,0,6645,0,6656,0,660,0,6666,0,660,10,660,66,660,56,660,45,660,36,660,27,660,18,660,66,560,66,450,66,360,66,2766,10,066,18,066,27,066,36,038,192,076,192,0114,192,0152,192,0192,192,0129,108,022,129,044,129,066,129,087,129,0108,129,0129,129,00,192,00,129,00,129,220,66,100,66,1866,45,066,56,010,66,018,66,027,66,036,66,045,66,056,66,00,66,066,66,0255,255,255192,192,192129,129,12966,66,660,0,0224,224,224161,161,16196,96,9633,33,33RGB附 录（可不看）第46页/共48页255,255,255213,255,224191,255,192213,255,192184,255,161198,255,161213,255,161181,255,128191,255,128202,255,128213,255,128178,255,96187,255,96195,255,96203,255,96213,255,96177,255,65184,255,65191,255,65198,255,65205,255,96213,255,65170,255,224170,255,192170,255,161170,255,128170,255,96170,255,6542,255,22464,255,19242,255,19271,255,16157,255,19242,255,16174,255,12864,255,12853,255,12842,255,1280,255,2240,255,1920,255,1610,255,1280,255,960,255,65255,129,192241,255,161244,255,128247,255,96248,255,65227,255,161234,255,128238,255,96241,255,65223,255,128230,255,96234,255,65222,255,96227,255,65220,255,6521,192,19214,255,16111,255,1288,255,967,255,6528,255,16121,255,12817,255,9614,255,6532,255,12825,255,9621,255,6533,255,9628,255,6585,255,22485,255,19285,255,16185.255,128127,255,224127,255,192127,255,161127,255,128127,255,96127,255,65149,255,192142,255,161138,255,128137,255,96135,255,65156,255,161149,255,128145,255,96142,255,65159,255,128153,255,96149,255,65162,255,96156,255,65163,255,65106,255,192113,255,161117,255,128118,255,96120,255,6599,255,161106,255,128110,255,96113,255,6596,255,128102,255,96106,255,6593,255,9699,255,65219,255,330,255,33249,255,33244,255,33238,255,33232,255,33226,255,33176,255,33181,255,33187,255,33193,255,33199,255,33206,255,33170,255,33213,255,33164,255,33127,255,33134,255,33141,255,33147,255,33153,255,33159,255,33121,255,33114,255,33108,255,33102,255,336,255,3311,255,3317,255,3323,255,3377,255,9668,255,9660,255,9652,255,9642,255,9635,255,6578,255,6571,255,6564,255,6557,255,6550,255,6542,255,6585,255,9685,255,6592,255,6591,255,3396,255,3329,255,3336,255,3379,255,3374,255,3368,255,3362,255,3356,255,3349,255,3385,255,3342,255,330,0,2550,0,1920,0,1290,0,660,0,00,0,2240,0,1610,0,960,0,33HSL第47页/共48页感谢您的观看！第48页/共48页