4部网页配色电子书库之第4部——网站配色方案赏析

矫情吗；* 2022-11-27 01:54 219阅读 0赞

**结论：**  
  这类颜色的组合随着明度的变暗，比较容易制造深邃、幽怨的故事气氛。传达的是稳重、成熟、高贵、消极的心理感受。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 1]  
**分析：**  
  该页面中间色较多，主要是在蓝色范畴内做明度的变化，所以色度差非常缓和，以致于页面的色彩呈现非常柔和，甚至稍有些发灰的感觉，好在该页面还有些较大色块的浅蓝色及白色，拉大了页面的色阶，使得这种灰的感觉减弱不少。

**结论：**  
  浅蓝色给人一种很宁静安静的心理感受。浅蓝色系有淡雅、清新、浪漫、高级的特质，常用于化妆品、女性、服装网站。它是最具凉爽，清新特征的色彩。和白色混合时，能体现柔顺，淡雅，浪漫的气氛。  
  主色调选择明亮的蓝色，配以白色的背景和灰亮的辅助色，可以使站点干净而整洁，给人庄重、充实的印象。

**结论：**  
  主页面的绿色通过不同明度的变化，能较递增缓和变化同时却也较明显的体现出页面的色彩层次感来。整个页面配色很少，但得到的效果却是强烈的、显眼的，达到充分展现产品主题的目的。

**结论：**  
  当鲜度、明度高的背景色与前景辅助色暗度低的黑色在明度形成较强烈的对比时，艳度降低，较能协调视觉。整个页面配色单纯，却也不简单，形成另一种设计风格。

**结论：**  
  该页面依旧以灰色为主导位置，与页面其他色彩元素较统一调和。

**结论：**  
  该页面合理搭配各种色彩，给人一种清新、自然的感觉，充满了艺术气息。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 6]  
**分析：**  
  主色调是由两种明度较接近的灰色构成。复色棕黄色在背景深灰的衬托下低调不张扬，能很好的与之融为一体。 点睛色是浅蓝色。该色选择了明度适中纯度不高的配色，既表达了主题又能与整个页面灰调子很好的调和一起。另一点睛色白色让所有的颜色的特性都得以很好的发挥并起到拉开色阶层次的作用。

**结论：**  
  深灰色具有谦虚、平凡、沉默、中庸、寂寞、忧郁、消极的心理感受。主色调主要集中在背景的运用和变化上，增强页面的空间感，视觉元素颇有时尚现代的气息，与前景的色彩明度纯度稍有变化又在视觉上达到风格统一。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 7]  
**分析：**  
  黑色是最暗的颜色，是纯度、色相、明度最低的非彩色。因此它较容易起到衬托和发挥起其他颜色的特性，是最有力的搭配色。该页面使用非色彩搭配，即黑色白色，衬映得该页面的设计元素也非常干净简练，页蓝色元素的加入减小了该页面有可能因此产生的单调感觉。

**结论：**  
  黑白纯色在明度上反差非常大，视觉冲击强烈，主次分明，全站的贯穿运用，构成特色鲜明的设计风格，散发迷人的高品位的贵族气息。黑白两种颜色的搭配使用通常可以表现出都市化的感觉，常用于现代派页面设计中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 8]  
**分析：**  
  在黑色这一背景的衬托下，红色遇到黑色搭配结合而得的特性简直发挥到了极致。因此该页面色彩配色具有极强的视觉冲击力。而橙色平衡了左右视觉，起到色彩相互呼应的作用。点睛色白色是让这几种颜色配合起来更透亮，缓和对人视觉不适的压迫力。

**结论：**  
  尽管页面的设计颜色在不同面积分配上也参差不齐的感觉，但是由于黑色主色调为背景，牢牢掌控了全局，页面设计及配色上也能达到统一的目的。

**结论：**  
  浅紫色与深紫色的相对搭配，在时尚高贵的同时又不失优雅。

**结论：**  
  整个页面给人以妩媚、优雅、妖气、清秀、梦幻，充满了女性魅力。

**相关文章推荐：**  
[程序员看过都说好的资源网站，你懂得！][Link 1]  
[CSDN如何发表自定义颜色的字体/号？（Markdown编辑器）][CSDN_Markdown]  
[4部网页配色电子书库之第1部——颜色代码查询表][4_1]  
[4部网页配色电子书库之第2部——颜色英文名称查询表][4_2]  
[4部网页配色电子书库之第3部——网页配色方案速查表][4_3]  
![在这里插入图片描述][20200812160600439.gif_pic_center]

感谢您的点赞与关注。![format_png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/9e1b6c70a2194981a9ae46225bf8ee8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/9cb606c1aadf4951a5f30d74cdb1fa3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/ea0ab61ab7af4faf8403fcf44c1a21fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/0e7f2a421aca44d0910ae7df97f9eb38.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/5d4cbdafc81f4f38bb85472a68dd4388.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/85d76a4c722b487ab56890457c9c821f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/219a8304b1584007b0bdfec94073907f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/29f54ff9e3d2418086294fceeb2477d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/5aa58dbec28c413da05a71b6180f66c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/97a723fc7cf8484aa12e2d7b5f534494.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU2MzU3Mw_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221124/654112092c0d4ed782ca2d74aed719fe.png
[Link 1]: https://blog.csdn.net/weixin_44563573/article/details/103200510
[CSDN_Markdown]: https://blog.csdn.net/weixin_44563573/article/details/102821654
[4_1]: https://blog.csdn.net/weixin_44563573/article/details/107930417
[4_2]: https://blog.csdn.net/weixin_44563573/article/details/107936949
[4_3]: https://blog.csdn.net/weixin_44563573/article/details/107948998
[20200812160600439.gif_pic_center]: /images/20221124/8c78c884257a4960b6168b326a72d445.png
[format_png]: /images/20221124/1a5fc4b1fd8f46a3bccd62ceff6ebf06.png