游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

总结设计师应掌握的色彩理论(2)

发布时间:2014-03-10 16:30:25 Tags:,,,,

作者:Cameron Chapman

如果你想在设计中有效使用色彩,你就需要知道一些色彩概念和色彩理论术语。充分掌握色度、色值和饱和度等概念,是你创造杰出的配色方案的关键。在我们色彩理论文章的第一篇中,我们阐述了不同颜色所蕴含的意义。在此我们将继续讨论影响特定色彩的基本元素,例如向一种纯色增加灰度、白色或黑色,并举例阐述它对设计的影响。(请点击此处阅读本文第三篇

色相

色相是色彩术语中最基本的元素,几乎是某一对象颜色的符号。当我们说“蓝色”、“绿色”或“红色”时,我们说的就是色相。你在自己的设计中所运用的色相会对网站访客传递重要的信息。这里可以阅读第一篇中所述的各种色相的含义。

例子

happytwitmas(from smashingmagazine)

happytwitmas(from smashingmagazine)

(这个Happy Twitmas网站的背景主色相以及一些排版字体采用了鲜红色。)

chapolito(from smashingmagazine)

chapolito(from smashingmagazine)

(使用大量纯色相可以增加一种有趣而好玩的视觉风格,例如这个网站的页眉和其他地方的处理方式。)

estilorama(from smashingmagazine)

estilorama(from smashingmagazine)

(纯红色是网站设计中极为流行的色相。)

mix(from smashingmagazine)

mix(from smashingmagazine)

(该网站页眉和logo混合使用了一系列纯色相。)

steveottenad(from smashingmagazine)

steveottenad(from smashingmagazine)

(绿色较少以纯色相运用于设计中,所以在其他颜色中较为突出。)

浓度

浓度与色彩的纯度有关。拥有高色度的色相不会含有黑、白、灰度。增加白、黑或灰度会减少其色度。它类似于饱和度但又不完全相同。浓度可以视为一种相对于白色的色彩亮度。

在设计中,要避免使用含有极为相似浓度的色相。而要选择那些色度相同,或者浓度彼此有所差异的色相。

例子

moviestills(from smashingmagazine)

moviestills(from smashingmagazine)

(蓝绿拥有较高的浓度,所以能够突显于黑白两色。)

canalconnection(from smashingmagazine)

canalconnection(from smashingmagazine)

(这是另一个拥有高浓度蓝的网站,但它还包含一点较低浓度的蓝色。)

philippdoms(from smashingmagazine)

philippdoms(from smashingmagazine)

(结合相同色相的高低饱和度,可以创造精致而优雅的设计。)

fruehjahr(from smashingmagazine)

fruehjahr(from smashingmagazine)

(拥有较高浓度的色彩最适用于调节,如上图所示)

panelfly(from smashingmagazine)

panelfly(from smashingmagazine)

(不同的浓度可以创造极具视觉愉悦感的梯度)

饱和度

饱和度是指一种色相在特定光照条件下的呈现效果。例如强vs弱色相,或者浅vs纯色相的饱和度。

在设计中,拥有相似饱和度的颜色可以创造更具吸引力的设计。正如浓度一样,拥有相似但并不完全一样饱和度的色彩可能会影响访问对网站设计的看法。

例子

sifrvault(from smashingmagazine)

sifrvault(from smashingmagazine)

(这里所使用的许多不同色相的饱和度都很相似,增加了整体设计的统一感。)

rainbeaumars(from smashingmagazine)

rainbeaumars(from smashingmagazine)

(结合拥有相似弱饱和度的色彩可以创造柔和的设计,该网站用水彩效果强化了这一点。)

disfrutasanjuan(from smashingmagazine)

disfrutasanjuan(from smashingmagazine)

(拥有低饱和度的色相并不一定更浅,如上图所示)

craftsale(from smashingmagazine)

craftsale(from smashingmagazine)

(使用高饱和度色相,搭配低饱和度背景可以令前者更为醒目。)

sunrisesoya(from smashingmagazine)

sunrisesoya(from smashingmagazine)

(低饱和度色彩可以令附近的高饱和度色彩更为突出。)

色值

色值还可以称为“浅淡”。它是指一种颜色的深浅。浅色拥有更高的值。例如,橙色的色值就比海军蓝或深紫更高。黑色在所有色相中色值最低,白色最高。

在你的设计中运用色值时,要重视那些拥有不同色值的颜色,尤其是拥有较高色度的颜色。高色值对比度的颜色通常可以创造更具美感的设计。

例子

creativespark(from smashingmagazine)

creativespark(from smashingmagazine)

(这里所用的黄色与低色值的黑和灰形成了鲜明对比)

oysterdesign(from smashingmagazine)

oysterdesign(from smashingmagazine)

(这个网站结合了拥有两种不同色值的蓝色相。因为不同的色值具有足够的对比性,其整体视觉风格就十分具有吸引力。)

copimaj(from smashingmagazine)

copimaj(from smashingmagazine)

(结合了拥有相似值的色彩,创造了一种富有生机和活力的背景,其本身的设计也加强了这种特点)

whoseview(from smashingmagazine)

whoseview(from smashingmagazine)

(这里的红色值低于浅蓝色,而浅蓝色本身的色值又低于白色。)

colourpixel(from smashingmagazine)

colourpixel(from smashingmagazine)

(即使是在相似的色相之间,人的肉眼也可以辨别不同的色值)

色调

向一种色相添加灰度时就创造了一种色调。色调通常更为沉闷或者比纯色相看起来更柔和。

色调有时候在设计中更易于使用。拥有更多灰度的色调可以给网站创造一种复古风格。根据色调的不同,它们还可以为设计增加一种精致或优雅的视觉风格。

例子

lakesideheritage(from smashingmagazine)

lakesideheritage(from smashingmagazine)

(色调可以给网站带来一种视觉上的精致感,同时增加一些复古风情。)

brightkite(from smashingmagazine)

brightkite(from smashingmagazine)

(这个网站结合了一系列色调和渐变蓝。)

mmuller(from smashingmagazine)

mmuller(from smashingmagazine)

(色调可以通过在其周围增加灰色来加强。)

redvelvetart(from smashingmagazine)

redvelvetart(from smashingmagazine)

(这个导航和背景设计所使用的色调赋予网站一种复古、手工绘制感。)

mergeweb(from smashingmagazine)

mergeweb(from smashingmagazine)

(这是纯色相如何在背景色调中脱颖而出的绝佳例子。)

metalab(from smashingmagazine)

metalab(from smashingmagazine)

(有些颜色会让我们认为灰色实际上是其他颜色的色调。在上图中,其背景是蓝色调,但增加了大量灰度。)

色度

在一种色相中添加黑色就创造了色度,令颜色更深。这一词通常被误用于描述色泽或色调,但色度仅适用于增加了黑色的色调。

在,很深的色度有时候可用来代替黑色,并可以作为一种中立色。结合色泽则可避免过暗或过重的视觉效果。

例子

jonathanmoore(from smashingmagazine)

jonathanmoore(from smashingmagazine)

(Jonathan Moore的网站背景采用了一系列色度不同的紫色,其他部分则使用了一系列色泽。)

vuumedia(from smashingmagazine)

vuumedia(from smashingmagazine)

(使用不同色度效果甚好,只要它们之间保持足够的对比就行。)

alilot(from smashingmagazine)

alilot(from smashingmagazine)

(这个网站有效结合使用了色度和色泽,尤其是页眉部分。)

skipvine(from smashingmagazine)

skipvine(from smashingmagazine)

(其背景设计具有纹理梯度的色度。)

stuffandnonsense(from smashingmagazine)

stuffandnonsense(from smashingmagazine)

(给合纹理使用色度增加了这个网站的趣味性。)

色泽

在一种色相中添加白色就形成了色泽。非常浅的色泽有时候称为粉蜡,但纯色相添加白色就是色泽。

色泽通常用于创造富有女性感或清淡的设计。粉蜡色泽尤其适用于创造更为女性化的设计。它们还能够用于复古感设计,并且非常适用于瞄准婴幼儿家长的网站。

例子

caiocardoso(from smashingmagazine)

caiocardoso(from smashingmagazine)

(Caio Cardoso网站背景及其他元素中拥有一系列绿色泽。)

fernandosilanes1(from smashingmagazine)

fernandosilanes1(from smashingmagazine)

(Fernando Silanes网站的蓝色泽创造了一种柔和而精致的感觉。)

duboutdesyeux(from smashingmagazine)

duboutdesyeux(from smashingmagazine)

(蓝色泽广泛运用于天空和自然图案。)

smallwhitebear(from smashingmagazine)

smallwhitebear(from smashingmagazine)

(色泽在基于水彩效果的设计中运用也很广泛。)

iamgarth(from smashingmagazine)

iamgarth(from smashingmagazine)

(这些色泽结合使用创造了一种精致的梯度。)

总结

你未必需要记住这所有的术语,但你要熟悉这些概念,尤其是在你想掌握本系列第三篇文章的时候(教你如何创造自己的配色方案)。以下是本文的概述内容:

*色相就是颜色(蓝、绿、红等)

*浓度是一种颜色的纯度(高浓度的颜色不会掺杂黑、白或灰色)

*饱和度与颜色的强弱的关(高饱和度的颜色较强)

*色值与颜色的深浅有关(浅色拥有较高值)

*色调是在一种颜色中添加灰度,令其比原色更沉闷。

*色度是指在颜色中添加黑色,令其比原色更暗。

*色泽指在颜色中添加白色,令其比原色更浅。(本文为游戏邦/gamerboom.com编译,拒绝任何不保留版权的转载,如需转载请联系:游戏邦

Color Theory For Designers, Part 2: Understanding Concepts And Terminology

By Cameron Chapman

If you’re going to use color effectively in your designs, you’ll need to know some color concepts and color theory terminology. A thorough working knowledge of concepts like chroma, value and saturation is key to creating your own awesome color schemes. In Part 1: The Meaning of Color of our color theory series, we covered the meanings of different colors. Here, we’ll go over the basics of what affects a given color, such as adding gray, white or black to the pure hue, and its effect on a design, with examples of course.

Hue

Hue is the most basic of color terms and basically denotes an object’s color. When we say “blue,” “green” or “red,” we’re talking about hue. The hues you use in your designs convey important messages to your website’s visitors. Read part 1 of this article for the meanings conveyed by various hues.

Examples

The primary hue of the background and some of the typography on the Happy Twitmas website is bright red.

Using a lot of pure hues together can add a fun and playful look to a design, as done in the header and elsewhere on this website.

Pure red is a very popular hue in Web design.

Mix uses a number of pure hues in its header and logo.

Green in its purer forms is seen less often and so stands out more than some other colors.

Chroma

Chroma refers to the purity of a color. A hue with high chroma has no black, white or gray in it. Adding white, black or gray reduces its chroma. It’s similar to saturation but not quite the same.

Chroma can be thought of as the brightness of a color in comparison to white.

In design, avoid using hues that have a very similar chroma. Opt instead for hues with chromas that are the same or a few steps away from each other.

Examples

Cyan has a high chroma and so really stands out against black and white.

Another website with a high chroma blue, though it includes some tints and shades with somewhat lower chromas.

Combining high and low saturation in the same hue can make for a sophisticated and elegant design.

Colors with very high chroma are best used in moderation, as done here.

Differences in chroma can make for a visually pleasing gradient.

Saturation

Saturation refers to how a hue appears under particular lighting conditions. Think of saturation in terms of weak vs. strong or pale vs. pure hues.

In design, colors with similar saturation levels make for more cohesive-looking designs. As with chroma, colors with similar but not identical saturations can have a jarring effect on visitors.

Examples

The saturation levels of many of the different hues used here are similar, adding a sense of unity to the overall design.

Combining colors with similar muted saturation levels creates a soft design, which is emphasized by the watercolor effects.

Hues with lower saturation levels aren’t necessarily lighter, as shown here.

An excellent example of how using a hue with a high saturation against a background with low saturation can make the former really stand out.

Aother example of how low saturation colors make nearby high saturation colors really stand out.

Value

Value could also be called “lightness.” It refers to how light or dark a color is. Ligher colors have higher values. For example, orange has a higher value than navy blue or dark purple. Black has the lowest value of any hue, and white the highest.

When applying color values to your designs, favor colors with different values, especially ones with high chroma. High contrast values generally result in more aesthetically pleasing designs.

Examples

The high value of the yellow used here really stands out against the lower-value black and gray.

This website combines blue hues with two different values. Because the different values have enough contrast, the overall look is visually appealing.

Combining colors with similar values makes for an energetic and lively background (which is enhanced by the design itself).

The red here has a lower value than the light blue, which itself has a lower value than the white.

The human eye can pick up differences in value even among such similar hues.

Tones

Tones are created when gray is added to a hue. Tones are generally duller or softer-looking than pure hues.

Tones are sometimes easier to use in designs. Tones with more gray can lend a certain vintage feel to websites. Depending on the hues, they can also add a sophisticated or elegant look.

Examples

Tones can give websites a sophisticated look while adding some vintage and antique flair.

This website combines blues in a variety of tones, shades and tints.

Tones can be intensified by adding gray around them, as done here.

The tones used in the navigation and background design here give this website a vintage, hand-made feel.

A great example of how a pure hue can really stand out against a background of tones.

Some colors that we might consider gray are actually tones of other colors. In this case, the background is a blue tone but with a lot of gray added.

Shades

A shade is created when black is added to a hue, making it darker. The word is often incorrectly used to describe tint or tone, but shade only applies to hues made darker by the addition of black.

In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints is best to avoid too dark and heavy a look.

Examples

Jonathan Moore’s website has a variety of different shades of purple in the background (and a couple of tints in other parts).

Using different shades together works well, as long as sufficient contrast between them is maintained.

An effective combination of shades and tints, particularly in the header.

Another background design that has shades (and a few tints) in a textured gradient.

Combining shades within textures adds interest to this website.

Tints

A tint is formed when white is added to a hue, lightening it. Very light tints are sometimes called pastels, but any pure hue with white added to it is a tint.

Tints are often used to create feminine or lighter designs. Pastel tints are especially used to make designs more feminine. They also work well in vintage designs and are popular on websites targeted at parents of babies and toddlers.

Examples

Caio Cardoso’s website has a variety of green tints in the background and in other elements.

The blue tint on Fernando Silanes’s website creates a soft and sophisticated look.

Blue tints are popular for sky and nature motifs.

Tints are also popular in watercolor-based designs.

Tints combined together make for a sophisticated gradient.

Conclusion

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:

Hue is color (blue, green, red, etc.).

Chroma is the purity of a color (a high chroma has no added black, white or gray).

Saturation refers to how strong or weak a color is (high saturation being strong).

Value refers to how light or dark a color is (light having a high value).

Tones are created by adding gray to a color, making it duller than the original.

Shades are created by adding black to a color, making it darker than the original.

Tints are created by adding white to a color, making it lighter than the original.(source:smashingmagazine


上一篇:

下一篇: