配色奥秘_第一篇
第一篇：秒变配色高手!怎么都不会错的6条网页设计配色原则
这篇文章让你轻松上手网页配色，跟随着“错不了”配色方针，把握基本的色彩配色规律。下面跟着来学习吧。
一、需要配色的是你的画布，而不是你的图片
设计固然重要，但目的是凸显内容，所以配色的原则之一：不应该比它呈现的内容更加“响亮”
二、选择简单的灰色作为你网站的基调
网站的配色可以很无数种，这里建议的是可以放心使用的基本配色方案。通常来说，白色、灰色、深灰色使用较多。看起来比较舒服的文字颜色范围#333333~#666666，背景色：白色或是建议采用#FFFFFF~#CCCCCC
三、只选择一种颜色突出显示
颜色用的越多，越是难以控制。在网页是灰色为背景的时候，你最好只选择一种鲜艳的颜色来作为你想要突出的事物(比如：标题、菜单、按钮)。高亮颜色(与你的基调颜色相关)可以是蓝色、红色、绿色等等。现在页面有了三个基本的颜色：背景色+文本色+高亮色。目前只是选择了一种高亮颜色，之后还可以选择一种以上的。但新手的话，就先选择一种以上的颜色。
四、如果有疑问，请使用蓝色
不知道该选择什么颜色作为高亮色的时候，不妨使用蓝色。比较安全的蓝色包括海军蓝到深蓝色(H235~H190)。
五、给你的高亮颜色增加变化
高亮颜色的稍微变化会让你的颜色变得简单，同色系的颜色变化。可应用在悬停效果、边界、渐变、光影效果。
六、尽量不要使用颜色选择器右上角的颜色
右上角的颜色色彩比较亮，应用不好会适得其反。所以尽量少用，遵循应用右上角格子一半的原则。
(1)饱和度和亮度
饱和度(S)：白色越少，越饱和。横轴：光标往右边拖动，白色减少，S值上升。
亮度(B)：黑色越少，颜色越亮。纵轴：光标往上边拖动，黑色减少，B值上升。
如果选定一个颜色，调整饱和度和亮度，那么你就创造了一种色调。
(2)单色配色方案
以一个基本的色调和扩展它的色相，饱和度和亮度。因此，通过采摘一大亮点的颜色和它创造的变化，你实际上创建了一个单色方案。
(3)下一步?how to do?
可以实践加以练习，在灰度基础的单色配色方案上，试着创建不同的高亮色，调整出不同的色调，注意饱和度和亮度的设置，直到可以使用为止。单色的基础上在扩展到两种(建议的搭配：橙色和蓝色、绿色和蓝色)。
收集色彩搭配的好的网页，颜色取样器，分析每个色相，看它的饱和度和亮度的值，作为自己的色卡存储，要用到的时候，提取来用。
以上的内容，内容基本且精华，练习过程不断加以总结。对于色彩的理解会更加深刻。输出知识比输入知识更容易让人记住。就像读书，只有把熟记的知识，通过做练习来加以巩固消化。
第二篇：淘宝美工学配色之六字真言【色彩搭配】
一、配色比例
日本设计师提出的配色黄金比例是：70：25：5，70%为大面积使用的主色，25%为辅助色，5%为点缀色。画面颜色建议不能超过3种，3种是指3种色相。
颜色用的越少，画面越简洁，作品会显得更成熟。
二、色彩的关系
色彩搭配就是不同色相之间相互呼应相互调配的过程。色彩之间的关系取决于在色彩上的位置，色相和色相之间距离的角度越近，对比越弱，离得越远对比越强。
记住十二色环，基本的六种基础色相：红、橙、黄、绿、蓝、紫。把握颜色拾色器上的色环，色相的变化规律。
三、色彩的搭配①——相邻色的搭配
(1)相邻色也就是相邻的两个颜色，根据色环，基本的邻近色：红+橙、橙+黄、黄+绿、绿+蓝、蓝+紫、紫+红。相邻色配色，画面比较柔和协调，统一，但视觉冲击力较弱。通常用于家居，棉织品，小清新淡雅的服装，中国风等，能给人以宁静、柔和、传统感觉的产品。
(2)相近色搭配还有一种单色系的配色方案，采用同一种色相，仅仅调整该色相的亮度和饱和度，得到另一种颜色。
四、色彩的搭配②——间隔色的搭配
(1)间隔色在12色环上位置相距120度，中间隔着一个颜色。基本间隔色搭配：红+黄、黄+蓝、蓝+红、橙+绿、绿+紫、紫+橙。间隔色的视觉冲击力会强于邻近色，使用广泛。既没有180度互补色那么具有刺激性，又比邻近色多了一些明快活泼、对比的感觉。(注：控制好配色比例是关键)
(2)重点说下红蓝搭配，应用广泛，是典型的冷暖色搭配。具有很强的对比性，视觉冲击力较大，通常有白色作为调和色(白色和黑色是外能的调和色)。例子：百事可乐logo，百度logo，公安局警车、超人、蜘蛛侠等。注意：红蓝搭配控制两种颜色的比例，不能过于均衡，要有主次等级。冷色趋于后退，暖色趋于前进，暖色就很容易进入眼帘。
五、色彩的搭配③——互补色的搭配
(1)互补色在12色环的位置相距180度，互补色：红+绿、橙+蓝、黄+紫。互补色的搭配可以表现出气势、力量与活力，有较强的视觉冲击力。
(2)特别注意几点：
①控制好画面的色彩比例(70：25：5)，因为2种颜色放在一起对抗非常强烈，调配好主色+辅助色+点缀色的色彩面积;
②还可以减低一方的明度和饱和度，这样可以产生一种明暗对比，缓冲其对抗性。
③或者可以在画面中加入黑、白色作为调和色，缓冲其对抗性。
六、总结
红橙黄绿蓝紫，色相相隔越远对比越强，离得越近搭配越柔和，最后注意画面的色彩搭配比例(70：25：5)
学了以上色彩搭配的基本知识后，颜色搭配都是有规律可循的。想要视觉冲击力大的，就选择互补色;视觉柔和统一用邻近色;相隔色应用广泛，既没有互补色那么具冲击力，又比相邻色多了一份明快、活泼之感。
这篇文章让你轻松上手网页配色，跟随着“错不了”配色方针，把握基本的色彩配色规律。下面跟着来学习吧。
一、需要配色的是你的画布，而不是你的图片
设计固然重要，但目的是凸显内容，所以配色的原则之一：不应该比它呈现的内容更加“响亮”
二、选择简单的灰色作为你网站的基调
网站的配色可以很无数种，这里建议的是可以放心使用的基本配色方案。通常来说，白色、灰色、深灰色使用较多。看起来比较舒服的文字颜色范围#333333~#666666，背景色：白色或是建议采用#FFFFFF~#CCCCCC
三、只选择一种颜色突出显示
颜色用的越多，越是难以控制。在网页是灰色为背景的时候，你最好只选择一种鲜艳的颜色来作为你想要突出的事物(比如：标题、菜单、按钮)。高亮颜色(与你的基调颜色相关)可以是蓝色、红色、绿色等等。现在页面有了三个基本的颜色：背景色+文本色+高亮色。目前只是选择了一种高亮颜色，之后还可以选择一种以上的。但新手的话，就先选择一种以上的颜色。
四、如果有疑问，请使用蓝色
不知道该选择什么颜色作为高亮色的时候，不妨使用蓝色。比较安全的蓝色包括海军蓝到深蓝色(H235~H190)。
五、给你的高亮颜色增加变化
高亮颜色的稍微变化会让你的颜色变得简单，同色系的颜色变化。可应用在悬停效果、边界、渐变、光影效果。
六、尽量不要使用颜色选择器右上角的颜色
右上角的颜色色彩比较亮，应用不好会适得其反。所以尽量少用，遵循应用右上角格子一半的原则。
(1)饱和度和亮度
饱和度(S)：白色越少，越饱和。横轴：光标往右边拖动，白色减少，S值上升。
亮度(B)：黑色越少，颜色越亮。纵轴：光标往上边拖动，黑色减少，B值上升。
如果选定一个颜色，调整饱和度和亮度，那么你就创造了一种色调。
(2)单色配色方案
以一个基本的色调和扩展它的色相，饱和度和亮度。因此，通过采摘一大亮点的颜色和它创造的变化，你实际上创建了一个单色方案。
(3)下一步?how to do?
可以实践加以练习，在灰度基础的单色配色方案上，试着创建不同的高亮色，调整出不同的色调，注意饱和度和亮度的设置，直到可以使用为止。单色的基础上在扩展到两种(建议的搭配：橙色和蓝色、绿色和蓝色)。
收集色彩搭配的好的网页，颜色取样器，分析每个色相，看它的饱和度和亮度的值，作为自己的色卡存储，要用到的时候，提取来用。
以上的内容，内容基本且精华，练习过程不断加以总结。对于色彩的理解会更加深刻。输出知识比输入知识更容易让人记住。就像读书，只有把熟记的知识，通过做练习来加以巩固消化。
第二篇：淘宝美工学配色之六字真言【色彩搭配】
一、配色比例
日本设计师提出的配色黄金比例是：70：25：5，70%为大面积使用的主色，25%为辅助色，5%为点缀色。画面颜色建议不能超过3种，3种是指3种色相。
 |
颜色用的越少，画面越简洁，作品会显得更成熟。
二、色彩的关系
色彩搭配就是不同色相之间相互呼应相互调配的过程。色彩之间的关系取决于在色彩上的位置，色相和色相之间距离的角度越近，对比越弱，离得越远对比越强。
记住十二色环，基本的六种基础色相：红、橙、黄、绿、蓝、紫。把握颜色拾色器上的色环，色相的变化规律。
三、色彩的搭配①——相邻色的搭配
(1)相邻色也就是相邻的两个颜色，根据色环，基本的邻近色：红+橙、橙+黄、黄+绿、绿+蓝、蓝+紫、紫+红。相邻色配色，画面比较柔和协调，统一，但视觉冲击力较弱。通常用于家居，棉织品，小清新淡雅的服装，中国风等，能给人以宁静、柔和、传统感觉的产品。
(2)相近色搭配还有一种单色系的配色方案，采用同一种色相，仅仅调整该色相的亮度和饱和度，得到另一种颜色。
四、色彩的搭配②——间隔色的搭配
(1)间隔色在12色环上位置相距120度，中间隔着一个颜色。基本间隔色搭配：红+黄、黄+蓝、蓝+红、橙+绿、绿+紫、紫+橙。间隔色的视觉冲击力会强于邻近色，使用广泛。既没有180度互补色那么具有刺激性，又比邻近色多了一些明快活泼、对比的感觉。(注：控制好配色比例是关键)
(2)重点说下红蓝搭配，应用广泛，是典型的冷暖色搭配。具有很强的对比性，视觉冲击力较大，通常有白色作为调和色(白色和黑色是外能的调和色)。例子：百事可乐logo，百度logo，公安局警车、超人、蜘蛛侠等。注意：红蓝搭配控制两种颜色的比例，不能过于均衡，要有主次等级。冷色趋于后退，暖色趋于前进，暖色就很容易进入眼帘。
五、色彩的搭配③——互补色的搭配
(1)互补色在12色环的位置相距180度，互补色：红+绿、橙+蓝、黄+紫。互补色的搭配可以表现出气势、力量与活力，有较强的视觉冲击力。
(2)特别注意几点：
①控制好画面的色彩比例(70：25：5)，因为2种颜色放在一起对抗非常强烈，调配好主色+辅助色+点缀色的色彩面积;
②还可以减低一方的明度和饱和度，这样可以产生一种明暗对比，缓冲其对抗性。
③或者可以在画面中加入黑、白色作为调和色，缓冲其对抗性。
六、总结
红橙黄绿蓝紫，色相相隔越远对比越强，离得越近搭配越柔和，最后注意画面的色彩搭配比例(70：25：5)
学了以上色彩搭配的基本知识后，颜色搭配都是有规律可循的。想要视觉冲击力大的，就选择互补色;视觉柔和统一用邻近色;相隔色应用广泛，既没有互补色那么具冲击力，又比相邻色多了一份明快、活泼之感。
还没人赞这篇日记
