网页配色

搜集了一些网页配色的相关内容,整理如下。

  

一、基础知识

 

  1.红,黄,蓝是三原色

   其它的色彩都可以用这三种色彩调和而成。
   网页html语言中的色彩表达即是用这三种颜色的数值表示
   例如:红色是color(255,0,0)十六进制的表示方法为(FF0000)
  2.非彩色搭配-黑白灰

  黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩,那么用灰色试试,效果绝对不会太差。

  3.彩色搭配

  彩色的搭配是学习的重点。

  ●色环

  我们将色彩按"红->黄->绿->蓝->红"依次过度渐变,就可以得到一个色彩环。

  色环的两端是暖色和寒色,当中是中型色。(如下图)

色环图

 

  ●色彩的心理感觉。

  不同的颜色会给浏览者不同的心理感受。

  红色---是一种激奋的色彩。刺激效果,能使人产生冲动,愤怒,热情,活力的感觉。
  绿色---介于冷暖两中色彩的中间,显得和睦,宁静,健康,安全的感觉。
  它和金黄,淡白搭配,可以产生优雅,舒适的气氛。
  橙色---也是一种激奋的色彩,具有轻快,欢欣,热烈,温馨,时尚的效果。
  黄色---具有快乐,希望,智慧和轻快的个性,它的明度最高。
  蓝色---是最具凉爽,清新,专业的色彩。
  它和白色混合,能体现柔顺,淡雅,浪漫的气氛(象天空的色彩:)
  白色---具有洁白,明快,纯真,清洁的感受。
  黑色---具有深沉,神秘,寂静,悲哀,压抑的感受。
  灰色---具有中庸,平凡,温和,谦让,中立和高雅的感觉。

  每种色彩在饱和度,透明度上略微变化就会产生不同的感觉。以绿色为例,黄绿色有青春,旺盛的视觉意境,而蓝绿色则显得幽宁,阴深。

  ●网页色彩搭配的技巧

  (1)用一种色彩。这里是指先选定一种色彩,然后调整透明度或者饱和度,(说得通俗些就是将色彩变淡或则加深),产生新的色彩,用于网页。这样的页面看起来色彩统一,有层次感。

  (2)用两种色彩。先选定一种色彩,然后选择它的对比色(在photoshop里按ctrl+shift+I)。

  (3)用一个色系。简单的说就是用一个感觉的色彩,例如淡蓝,淡黄,淡绿;或者土黄,土灰,土蓝。确定色彩的方法各人不同,我是在photoshop里按前景色方框,在跳出的拾色器窗中选择"自定义",然后在"色库"中选就可以了:)

  (4)用黑色和一种彩色。比如大红的字体配黑色的边框感觉很"跳"。

  (5)不要将所有颜色都用到,尽量控制在三种色彩以内。

  (6)背景和前文的对比尽量要大,(绝对不要用花纹繁复的图案作背景),以便突出主要文字内容。

 

 

 二、一些常用的色系

 

顏色名稱代碼

顏色

maroon #800000 
darkred#8B0000 
brown#A52A2A 
firebrick #B22222 
crimson#DC143C 
red#FF0000 

桃红~粉红

顏色名稱代碼

顏色

mediumvioletred#C71585 
palevioletred#D87093 
deeppink #FF1493 
fuchsia(magenta)#FF00FF 
hotpink#FF69B4 
pink#FFC0CB 
lightpink #FFB6C1 
mistyrose#FFE4E1 
lavenderblush#FFF0F5 


顏色名稱代碼

顏色

indigo#4B0082 
purple#800080 
darkmagenta#8B008B 
darkorchid#9932CC 
blueviolet#8A2BE2 
darkviolet#9400D3 
slateblue#6A5ACD 
mediumpurple#9370DB 
mediumslateblue#7B68EE 
mediumorchid#BA55D3 
violet #EE82EE 
plum#DDA0DD 
thistle#D8BFD8 
lavender#E6E6FA 

褐~橘~米白

顏色名稱代碼

顏色

saddlebrown#8B4513 
sienna#A0522D 
chocolate#D2691E 
indianred#CD5C5C 
rosybrown#BC8F8F 
lightcorol #F08080 
salmon#FA8072 
lightsalmon#FFA07A 
orangered#FF4500 
tomato#FF6347  
coral#FF7F50 
darkorange#FF8C00 
sandybrown#F4A460 
peru#CD853F 
tan#D2B48C 
burlywood#DEB887 
wheat#F5DEB3 
moccasin#FFE4B5 
navajowhite#FFDEAD 
peachpuff#FFDAB9 
bisque #FFE4C4 
antuquewhite#FAEBD7 
papayawhip#FFEFD5 
cornsilk#FFF8DC 
oldlace#FDF5E6 
linen#FAF0E6 
seashell#FFF5EE 
snow #FFFAFA 
floralwhite#FFFAF0 
ivory#FFFFF0  
mintcream#F5FFFA 

金~黃

顏色名稱代碼

顏色

darkgoldenrod#B8860B 
goldenrod#DAA520 
gold #FFD700 
yellow#FFFF00 
darkkhaki#BDB76B 
khaki#F0E68C 
palegoldenrod#EEE8AA 
beige#F5F5DC 
lemonchiffon#FFFACD 
lightgoldenrodyellow#FAFAD2 
lightyellow#FFFFE0 

黃~绿

顏色名稱代碼

顏色

darkslategray#2F4F4F 
darkolivegreen#556B2F 
olive #808000 
darkgreen#006400 
forestgreen#228B22 
seagreen#2E8B57 
green(teal)#008080 
lightseagreen#20B2AA 
madiumaquamarine#66CDAA 
mediumseagreen#3CB371 
darkseagreen#8FBC8F 
yellowgreen #9ACD32 
limegreen#32CD32 
lime#00FF00 
chartreuse#7FFF00 
lawngreen#7CFC00 
greenyellow#ADFF2F 
mediumspringgreen#00FA9A 
springgreen#00FF7F 
lightgreen#90EE90 
palegreen#98F898 
aquamarine#7FFFD4 
honeydew#F0FFF0 

顏色名稱代碼

顏色

midnightblue#191970 
navy#000080 
darkblue#00008B 
darkslateblue#483D8B 
mediumblue#0000CD 
royalblue#4169E1 
dodgerblue#1E90FF 
cornflowerblue #6495ED 
deepskyblue#00BFFF 
lightskyblue#87CEFA 
lightsteelblue#B0C4DE 
lightblue#ADD8E6 
steelblue#4682B4 
darkcyan#008B8B 
cadetblue#5F9EA0 
darkturquoise#00CED1 
mediumturquoise#48D1CC 
turquoise #40E0D0 
skyblue#87CECB 
powderblue#B0E0E6 
paleturquoise#AFEEEE 
lightcyan#E0FFFF 
azure#F0FFFF 
aliceblue#F0F8FF 
aqua(cyan)#00FFFF 

黑~灰~白

顏色名稱代碼

顏色

black#000000 
dimgray#696969 
gray #808080 
slategray#708090 
lightslategray#778899 
darkgray#A9A9A9 
silver#C0C0C0 
lightgray#D3D3D3 
gainsboro#DCDCDC 
whitesmoke #F5F5F5 
ghostwhite#F8F8FF 
white#FFFFFF

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值