下载掌阅APP，畅读海量书库
立即打开
H5页面设计与平面广告或海报设计有着异曲同工之处，在页面配色方法上可以相互借鉴。下面对页面配色的惯用技巧进行介绍。
对于新手用户来说，可以借用以下几条安全配色小公式来进行快速配色。
以无彩色（黑、白、灰）为主基调，利用任何一种单色进行搭配，可丰富画面的层次，画面主体会更加突出，如图2-34所示。
图2-34
邻近色是指在色相环中任选一色彩，与其间隔60°～90°的都属于邻近色。例如红与橙、黄与绿、绿与蓝、蓝与紫等，如图2-35所示。邻近色在明度和纯度上可以构成较大的反差效果，又具有色彩冷暖对比和明暗对比，因此这种配色使画面呈现丰富、跳跃的感觉。
图2-35
对比色是指在色相环中夹角为120°左右的两种色彩。例如，红与黄、黄与蓝、蓝与红等，如图2-36所示。使用对比色进行搭配，能够产生强烈的视觉冲击力和对比效果，常用于凸显需要着重说明的主题信息，这也是H5页面常用的配色方式。
图2-36
互补色指的是在色相环中夹角为180°的两种色彩。例如，红与绿、蓝与橙、黄与紫等，如图2-37所示。互补色能体现出强烈的色彩对比和矛盾冲突。在实际应用时，最好选择其中一种色彩为页面主色调，其互补色可作为辅助色或点缀色使用。否则画面将产生强烈的分裂感，从而破坏画面整体美感。
图2-37
企业Logo代表一个企业的形象，其造型配色都是设计师经过反复琢磨研究出来的。如果使用以上配色方案不太满意，那么不妨借鉴一下本企业Logo的颜色，或许能提供一些设计思路。图2-38所示是京东快递推出的《解忧快递站》宣传类H5作品，该作品利用了京东Logo的大红色进行配色，红色搭配蓝色，形成强烈的对比，页面很醒目，进一步加深了观众对京东物流品牌的印象。
图2-38
除了以上介绍的配色方法外，用户还可以根据H5主题内容选择相应的颜色进行搭配。例如美食类主题可用橙色、黄色进行搭配；教育类主题可用蓝色为主基调，用绿色或橙色进行辅助配色；娱乐类主题一般使用高纯度、高明度的色彩进行搭配；医疗药物类主题可使用绿色或蓝色进行搭配。
众所周知，红花需要绿叶配，没有绿叶，就无法衬托出红花的美。由此可见，美是通过对比产生，色彩也不例外。画面中的色彩缺少对比，色彩的展现就容易失去平衡，从而无法满足观众的视觉平衡需求。所以掌握了一定的配色方法后，还需要了解页面中色彩平衡的相关法则，以便做出更完美的设计方案。
画面中通过有意识的色彩点缀，可以带来非常鲜明的效果。例如，在大范围的冷色调中适当用暖色调突出主体物，以此来平衡画面的视觉感，这样的作品会更出彩。
深浅色平衡就是色彩之间明度的平衡。如果画面都是深色，那么画面会显得很沉闷；相反，画面都为浅色，就会使人感觉很轻浮，没有重点。所以深浅得当，才会给观众带来舒服的节奏感和空间感。
◎互补色是两个相距180°的颜色，这两种颜色搭配容易出现不安定感和躁动感。为了避免出现这类问题，用户可使用以下三种方法来协调视觉上的平衡。
◎在互补色之间添加中间色，以起到衔接和融合作用。
◎降低其中一个互补色的饱和度，烘托另一个互补色。
◎减少互补色的面积对比。将其中一种互补色面积增大，另一种互补色减少，仅为画面的点缀或装饰。