美文网首页平面设计色彩设计
网页设计的颜色理论

网页设计的颜色理论

作者: pmalan | 来源:发表于2016-06-02 14:30 被阅读595次

    一:每种颜色代表的情感

    #颜色分为暖色(红色/橙色/黄色),冷色(蓝色/紫色),中性色(黑色/白色/灰色)。暖色更刺激,冷色能够使人镇定#

    #红色:最刺激的颜色,用来获取注意力和提高警惕。作为能量色,被用来象征权力和年轻活力,对于想打造休闲感的站点不适用#

    #橙色:带有红色的能量属性,但是要稍微镇定一些。通常用于展示兴奋和娱乐性#

    #黄色:温暖有活力,明亮的黄色极其富有刺激性,中性黄色更加热情,深黄有种复古和永恒的气息#

    #绿色:居于暖色和深色之间,绿色混合了能量和舒适。典型象征积极上升趋势,在西方国家代表金钱和环境#

    #浅蓝:友好、安全、诱人,Facebook和twitter都使用了这个颜色#

    #深蓝:镇定,但是比浅蓝更可靠、忧郁。专业性强的公司比较实用#

    #紫色:皇家的颜色,紫色能引出奢华的感觉,甚至颓废。浅紫散发出浪漫,深紫展现出神秘元素#

    #黑色:所以颜色中最强的颜色,所以字体和文本使用这个颜色。能够撑起周围的颜色,单独使用可以创造力量和精致感#

    #白色:作为主色调,白色释放出干净、纯洁无暇。作为次要色,能够让人更加注意刺激元素,因此完美适用于支撑色#

    #灰色:灰色代表中立,在大师手中最能展现功力#

    二:对比和补充:颜色组合的艺术


    颜色转盘

    #对比色:在颜色转盘上相隔至少两格(见下图)。用来吸引注意力或者将某颜色分离,适用于“召唤行动”#

    对比色

    #互补色:能够创造愉悦的美感,颜色转盘对面的颜色就是互补色(见下图),同一种颜色的不同深浅也可以作为互补色。当两个互补色并列开来,他们会将对方代表的情感推向极端。红色放在绿色旁边,会显得更加“刺激、激进、有力量”,绿色也会显得更加舒适。#

    互补色

    三:配色方案:混合颜色的最佳方法

    #单一色:只使用一种颜色,或者同一颜色的不同层次。单一配色能够产生视觉愉悦并增强呼应感,但是很难将单个元素分隔开来。由于极简主义非常强调内容,单一配色方案经常用于极简主义设计#

    #相似色:相似色比单一配色更具有多样性,更加容易区分元素。采用相似色配色的网站给人镇定和和谐感,相似色在大自然中很常见。采用相似配色方案的网站通常会选取一种主色调,主色调的情感连写最为强烈。次级色用来区分特定元素,如果还有第三种颜色那仅仅用来表示强调#

    相似色 http://doabackflip.com/

    #互补色:互补色使用相对的颜色创造动态感和感官刺激页面。这种配色方案的优势是各个元素能够明显区分,创造层次感。使用互补色时尽量不要降低饱和度,否则会降低效果。#

    http://ondo.tv/

    #三色系:三色系是最安全的配色方案,转盘上三个角的颜色能够确保视觉平衡,采用三色系的网站在配色上虽略显创意不足但是却十分安全。大多设计师认为三色系是最好的配色方案,但是还要看项目的具体情况,对于用户范围很广的网站这是非常好的选择,略带愉悦感的同时不显乏味。然而,由于缺少对立,在单个元素的吸引力上效果会降低。并且安全的同时意为着缺少激进 — 这种时尚和音乐网站需要风格。医疗网站适用于这种配色方案。#

    三色系 http://www.docready.org/

    #分撒互补色系:分散互补色系带有互补色的特征如吸引力,同时创造了颜色的多样性。如今的网页有很多采用这种配色方案,最普遍的是使用黑白作为支撑色,第三个颜色用来突出单个元素(通常红色或绿色)。如果需要更加风格化的效果,可以将三个色颜色加深#

    分撒互补色系

    #矩形互补色:由两对互补色组成,想要用好是有一定难度的。选择颜色的时候要尽量平衡暖色和冷色。#

    矩形互补色

    四:一些颜色工具

    #Stylify ME:输入网址就能解析出网站使用的所有颜色,并给出具体的色值,参考其他网站配色的神器#

    #Adobe Color CC:老牌的配色辅助工具(前身是 Kuler)#

    #flatuicolorpicker:扁平 UI 颜色拾取器,快速方便的颜色选取工具#

    #Pletton:新手实战利器,确定单个颜色的不同方案#

    #Material Palette:物料设计配色方案推荐,选择两种颜色自动输入配色值,Material Design 配色神器#

    #Coolors:生成复杂的配色方案,比其他工具要复杂一点#

    #Color Combos:网页设计配色论坛,可以阅读博客,浏览案例并获取其他资源#

    注:以上部分网站需要科学上网

    相关文章

      网友评论

      本文标题:网页设计的颜色理论

      本文链接:https://www.haomeiwen.com/subject/cbahdttx.html