任务2.1 色彩基础知识入门

模块2网页的色彩搭配任务2.1色彩基础知识网页设计项目教程（HTML5+CSS3+JavaScript）学习目标▸从色相、明度、饱和度，到原色、二次色与三次色知识目标理解色相、明度、饱和度的含义；掌握色彩的三种基本分类；了解色彩在网页设计中的作用。能力目标能准确描述色彩的三个基本属性；能区分原色、二次色与三次色。素养目标培养敏锐的色彩感知能力；养成观察生活、积累素材的习惯；提升审美与创新意识。02任务描述▸色彩是网页设计中的关键元素，也是构建视觉盛宴的基石色彩是网页设计中的关键元素，也是构建视觉盛宴的基石本任务将从色相、明度、饱和度等基础属性讲起，让大家对色彩有一个清晰而全面的认识，为后续的色彩搭配打下坚实的基础。色相

颜色种类明度

明暗程度饱和度

鲜艳程度032.1.1色彩属性解析▸色相、明度、饱和度构成色彩的基本属性色相与明度色相是区分不同色彩种类的关键特征。色相由光的波长决定，依次为红橙黄绿蓝靛紫。明度指明暗程度，纯白最高、纯黑最低。饱和度饱和度描述色彩的纯度，即鲜艳程度。纯色成分越多饱和度越高，反之越低。高饱和度冲击力强，低饱和度柔和稳重。04色彩的三个基本属性▸色相决定颜色种类，明度决定明暗，饱和度决定鲜艳程度色相由光的波长决定红橙黄绿蓝靛紫明度纯白最高，纯黑最低饱和度纯色成分越多，饱和度越高05色彩的三种分类▸原色、二次色与三次色构成12色相环原色无法由其他颜色混合得到红原色之一黄原色之一蓝原色之一二次色两种原色混合而成橙红+黄绿黄+蓝紫红+蓝三次色原色与二次色混合而成红橙黄橙黄绿蓝绿蓝紫红紫06十二色相环▸色彩理论中最常用的一张参考图十二色相环由内向外：饱和度逐渐升高怎样读色相环同一半径方向上的颜色属于同一色相相互对望的两个颜色是对比色彼此相邻的颜色是邻近色越靠外颜色越饱和，越靠内越接近灰色配色时可先定色相，再调明度与饱和度它是判断对比色、邻近色的基本工具07原色与二次色的网页应用▸色彩不只是好看，还承担着传递情感与引导操作的作用红·原色热情、活力、爱情突出重要信息或按钮激发用户的行动力黄·原色阳光、快乐、希望常用于背景或点缀营造轻松愉悦的氛围蓝·原色宁静、智慧、信任适合商务、科技、教育传递冷静可靠的形象橙·二次色活力、创造力、丰收引导操作、强调促销营造积极向上的氛围绿·二次色自然、生长、环保用于自然健康类主题给人舒适放松的感觉紫·二次色神秘、高贵、浪漫用于艺术、时尚领域塑造独特的视觉氛围08三次色的网页应用▸由原色与二次色混合，进一步丰富色彩的层次与多样性红橙比红色明亮温暖，吸引注意力传递活力与热情黄橙比黄色饱满、比橙色柔和适合亲子、教育类网站黄绿代表生机、清新与希望用于自然风光、户外活动蓝绿比蓝色柔和、比绿色沉稳用于海洋、科技、环保主题蓝紫代表优雅、冷静与梦幻适合艺术、创意、高端科技红紫比红色柔和、比紫色温暖常用于时尚、女性、艺术主题09案例演示2-1：色彩的分类原色：红、黄、蓝

——无法由其他颜色混合得到

二次色：橙（红+黄）、绿（蓝+黄）、紫（红+蓝）

三次色：红橙、黄橙、黄绿、蓝绿、蓝紫、红紫

色彩特点：

红色热情、黄色明亮、蓝色宁静稳重

橙色活力、绿色自然、紫色神秘高贵分类要点原色是色彩体系的“基石”。二次色由两种原色混合而成。三次色由原色与二次色混合而成。10任务实施：理解色彩的属性与分类▸梳理三属性与三类色彩的关系01识别色相指色彩的基本相貌，由光的波长决定02判断明度指色彩的明暗程度，可创造层次感03判断饱和度指色彩的鲜艳或纯净程度04区分原色红、黄、蓝，无法由其他色混合得到05混合二次色橙、绿、紫，由两种原色混合而成提示：记住一条主线：原色→二次色→三次色，色相环由此依次展开。11任务实施要点：色彩分类速查▸原色、二次色与三次色的构成关系原色（3）：红·黄·蓝

二次色（3）：橙=红+黄

绿=黄+蓝

紫=红+蓝

三次色（6）：红橙·黄橙·黄绿

蓝绿·蓝紫·红紫

应用：选定主色后，可按上述关系推导协调配色。要点提示色彩三属性：色相、明度、饱和度。原色不可由其他颜色混合得到。二次色由两种原色混合而成。三次色由原色与二次色混合而成。12任务小结▸本任务完成从“色彩属性”到“色彩分类”的学习会辨析能说明色相、明度、饱和度的含义与作用。会归类能区分原