本文主要介绍网页颜色的一些搭配技巧， 只提供建议。
网页颜色搭配表及颜色搭配技巧
博主博客
颜色搭配常识
-
网页中色彩的表达使用三种颜色，及
红(R)、绿(G)、蓝(B)，及通常所说的 RGB 色彩，它包含了人类所感知的所有颜色，网页中表达颜色如下（红色为例）RGB格式：红色是(255,0,0) 或十六进制 hex 格式为(FF0000)。 -
将色彩按"红->黄->绿->蓝->红"依次过度渐变可得到 12 色环：红，橙红，橙，橙黄，黄，黄绿，绿，蓝绿，蓝，蓝紫，紫，紫红。
-
颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。通常内容文字用非彩色(黑色)，边框，背景，图片用彩色。所以即使页面丰富，看内容依然不会眼花，通常背景与内容对比要大。
按单一色彩为主色彩分类
网页设计一般以单一色彩为主，下面每类都以该色彩为主，配以其它或类似色彩的，并按照从轻快到浓烈的顺序排列。
- 红色 - 是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。
- 橙色 - 也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
- 黄色 - 具有快乐，希望，智慧和轻快的个性，它的明度最高。
- 绿色 - 介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。
- 蓝色 - 是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:) 白色—具有洁白，明快，纯真，清洁的感受。
按印象的搭配分类
色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。当然在实际设计过程中，设计师还要考虑到乘除法，比如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。因此本书除了要列举出按色相的搭配，也要将印象作为重点的搭配分类列举出来，以供读者参考。
柔和、明亮、温柔
亮度高的色彩搭配在一起就会得到柔和、明亮、温和的感觉。为了避免刺眼，设计师一般会用低亮度的前景色调和，同时色彩在色环之间的距离也有助于避免沉闷。
柔和、洁净、爽朗
对于柔和、清洁、爽朗的印象，色环中蓝到绿相邻的颜色应该是最适合的。并且亮度偏高。可以看到，几乎每个组合都有白色参与。当然在实际设计时，可以用蓝绿相反色相的高亮度有彩色代替白色。
可爱、快乐、有趣
可爱、快乐、有趣印象中的色彩搭配特点是，色相分布均匀，冷暖搭配，饱和度高，色彩分辨度高。
活泼、快乐、有趣
活泼、快乐、有趣相对前一种印象，色彩选择更加广泛，?最重要的变化是将纯白色用低饱和有彩色或者灰色取代。
运动型、轻快
运动的色彩要强化激烈、刺激的感受，同时还要体现健康、快乐、阳光。因此饱和度较高、亮度偏低的色彩在这类印象中经常登场。
轻快、华丽、动感
华丽的印象要求页面充斥有彩色，并且饱和度偏高，而亮度适当减弱则能强化这种印象。
狂野、充沛、动感
狂野的印象空间中少不了低亮度的色彩，甚至可以用适当的黑色搭配。其他有彩色的饱和度高，对比强烈。
华丽、花哨、女性化
女性化的页面中紫色和品红是主角、粉红、绿色也是常用色相。一般它们之间要进行高饱和的搭配。
回味、女性化、优雅
优雅的感觉很奇特，色彩的饱和度一般要降下来。一般以蓝、红之间的相邻，调节亮度和饱和度进行搭配。
高尚、自然、安稳
高尚一般要用低亮度的黄绿色，色彩亮度降下去，注意色彩的平衡，页面就会显得安稳。
冷静、自然
绿色是冷静、自然印象的主角，但是绿色作为页面的主要色彩，容易陷入过于消极的感觉传达，因此应该特别重视图案的设计。
传统、高雅、优雅
传统的内容一般要降低色彩的饱和度，特别是棕色很适合。前面介绍紫色也是高雅和优雅印象的常用色相。
传统、稳重、古典
传统、稳重、古典都是保守的印象，色彩的选择上应该尽量用低亮度的暖色，这种搭配符合成熟的审美。
忠厚、稳重、有品位
亮度、饱和度偏低的色彩会给人忠厚、稳重的感觉。这样的搭配为了避免色彩过于保守，使页面僵化、消极，应当注重冷暖结合和明暗对比。
简单、洁净、进步
简单、洁净的色彩在色相上可以用蓝、绿表现，并大面积留白。而进步的印象可以多用蓝色，搭配低饱和甚至灰色。
简单、时尚、高雅
灰色是最为平衡的色彩，并且是塑料金属质感的主要色彩之一，因而要表达高雅、时尚，可以适当使用，甚至大面积使用。但是要注重图案和质感的构造。
简单、进步、时尚
表现进步的色彩主要以蓝色为主，搭配灰色。而色彩的明度统一、色相相邻，在色彩上会显得简洁。
调色板
| #000000 | #000066 | #0000CC | #0000FF | #003300 | #003333 |
| #003366 | #003399 | #006600 | #006633 | #006699 | #0066CC |
| #009933 | #009966 | #009999 | #0099CC | #0099FF | #00CC00 |
| #330033 | #333300 | #333333 | #333366 | #333399 | #336600 |
| #336633 | #336666 | #336699 | #3366CC | #339933 | #339966 |
| #339999 | #3399CC | #33CC33 | #33CC99 | #660000 | #660033 |
| #660066 | #660099 | #663300 | #663333 | #663366 | #663399 |
| #666600 | #666633 | #666666 | #666699 | #6666CC | #6666FF |
| #669933 | #669966 | #669999 | #6699CC | #6699FF | #66CC00 |
| #66CC66 | #66CC99 | #66CCCC | #66CCFF | #990033 | #990066 |
| #993333 | #993366 | #993399 | #9933CC | #9933FF | #996600 |
| #996633 | #996666 | #996699 | #9966CC | #999900 | #999933 |
| #999966 | #999999 | #9999CC | #9999FF | #99CC00 | #99CC33 |
| #99CC66 | #99CC99 | #99CCCC | #99CCFF | #ABCDEF | #CC0033 |
| #CC0066 | #CC3333 | #CC3366 | #CC3399 | #CC6600 | #CC6633 |
| #CC6666 | #CC6699 | #CC9900 | #CC9933 | #CC9966 | #CC9999 |
| #CC99CC | #CCCC00 | #CCCC33 | #CCCC44 | #CCCC66 | #CCCC99 |
| #CCCCCC | #CCCCFF | #CCFF00 | #CCFF66 | #CCFF99 | #CCFFCC |
| #CCFFFF | #F00000 | #FF0033 | #FF3399 | #FF33CC | #FF6600 |
| #FF6666 | #FF9900 | #FF9933 | #FF9966 | #FF9999 | #FF99CC |
| #FFCC00 | #FFCC33 | #FFCC99 | #FFCCCC | #FFCCFF | #FFFF00 |
| #FFFF33 | #FFFF66 | #FFFF99 | #FFFFCC | #FFFFFF |
护眼色
| 绿豆沙 | #C7EDCC | 银河白 | #FFFFFF | 杏仁黄 | #FAF9DE |
| 秋叶褐 | #FFF2E2 | 胭脂红 | #FDE6E0 | 海天蓝 | #DCE2F1 |
| 葛巾紫 | #E9EBFE | 极光灰 | #EAEAEF | 青草绿 | #E3EDCD |
| 电脑管家 | #CCE8CF | WPS护眼色 | #6E7B6C |
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
