注册 登录  
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

- 大饼先生 -

- Viab Cheng -






Web中色彩的运用 Part 1  

2006-06-16 16:10:45|  分类: 其他东西 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

大饼 译 2002.6

Part 1 第一部分
Color is used to convey meaning in almost everything in our daily lives. Some colors invoke certain feelings or expectations relative to the culture or society we grow up in. Other colors convey a universal meaning (yellow and red as warnings or cautions for instance). How you choose colors for your web site will have a significant effect on how your viewers perceive your message (and whether they come back for more...). This article should give you a better understanding of color conventions, their use, and selection.

Colors are essentially interpreted in one of three modes... RGB (Red Green Blue), HSV (Hue Saturation Value), and CMYK (Cyan Magenta Yellow Black). There are advantages to using each color convention, many of which become evident as you begin designing or editing graphics. For purposes of this article, we will focus on RGB colors because they are easily definable in HTML.
颜色有三种模式:RGB (红Red,绿Green,蓝Blue), HSV (色调Hue,饱和度Saturation,色值Value)和CMYK (青Cyan,洋红Magenta,黄Yellow,黑Black)。它们各有所长,当你编辑图形时,有时可以用到多种模式,在这篇文章里,我们重点介绍RGB模式,因为它在HTML中比较容易定义。

Web中色彩的运用 Part 1 - 大饼先生 - - 大饼先生 -

Color depth ranges from 24 bit color (over 16 million colors) to the more commonly used 8 bit color (256 colors). Arguably, if you want to have the greatest range of compatible colors for the most people, you'll probably want to stick with 8 bit color for now (note: more and more people are upgrading their computers so adhering to 8 bit color restrictions is becoming increasingly unnecessary). Most browser palettes are built around 256 colors or less. For instance, Netscape and Explorer use a standard 216 color palette while Macs use all 256. An easy way of color coordinating your site is through the use of a dither-proof color wheel such as the one shown here (courtesy of Ann-Rae Vasquez-Peterson and Paul Chow). To enter the proper color values in your HTML source code, you'll need a hexadecimal color chart. Each of these color wheel segments (pie slices) represents a major color group and the hues (variations) of that basic color.

Web中色彩的运用 Part 1 - 大饼先生 - - 大饼先生 -

By now, you may be wondering what "dithering" is and why it is important.As mentioned earlier, Netscape and Internet Explorer browsers use pallettes centered on 216 colors (with Macs using all 256). In an effort to display more colors than they are capable of, browsers offer the option of dithering images. Dithering involves placing similarly hued color "blocks" (pixels) side by side to fool the eye into thinking there is a "third color" being displayed. The following example shows the difference between a dithered and non-dithered image. Notice the pixelation in the second image as it attempts to immitate the photo quality of the original (depending on your browser, you may notice some dithering in the original as well). Being aware of dithering and the color limitations of web browsers will shed some light on how those great images on your site are going to look on someone elses browser. Limiting your design color choices to those on the wheel will go far in ensuring that a graphic looks the same on every browser (not just the high end systems).
现在,你可能很奇怪什么是“抖动”,它为什么这么重要。为了更方便的说明这个问题,Netscape和Internet Explorer浏览器使用216色的圆形图案(Macs使用全部的256色)。显示它们能力之外的更多颜色是个突破,浏览器提供了抖动图像的选项,抖动包括将同样色调的颜色“块”(像素)并排地放置在一起来欺骗眼睛,浏览者会认为在那里显示了“第三种颜色”。上图的例子显示了又抖动的图像和没有抖动的图像的差别,注意第二张图片中的像素试图缓和原始像片的质量(这一点依赖于你的浏览器,你可以注意观察原始图像中的一些抖动)。明白了颜色的抖动和Web中浏览器图像颜色的局限性将会使你的站点中的这些图像吸引更多的目光。通过选择颜色轮盘中的颜色来限制你设计的图像的颜色可以确保同一个图形在每个浏览器(不仅仅是高端系统)中看上去都是一样的。

Now that you understand dithering, are familiar with the color wheel, and have a visual example of where all the colors fit in the scheme of things, you'll want to coordinate your choices to give your site a certain "feel". You can group the color combinations into six general categories as follows:

Warm Colors - ranging from red-violet to yellow on the color wheel.

Cool Colors - ranging from violet to green-yellow on the color wheel.

Analogous Colors - any 3 consecutive color segments on the wheel.

Complementary Colors - colors that are directly opposite on the color wheel.

Monochromatic Colors - All the hues (variations) of one color segment on the wheel.

Triadic Colors - any 3 colors on the wheel that are 120 degrees in separation (if the wheel were a clock face, an example would be a color at the 12 o'clock position, one at the 4 o'clock, and one at the 8 o'clock position)

In the second part of this tutorial, we'll take a look at the six color groups and the corresponding segments on the color wheel.










阅读(857)| 评论(1)
推荐 转载



<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->


网易公司版权所有 ©1997-2017