ui设计师色彩运用_网页设计师的基本色彩理论

ui设计师色彩运用

Monochromatic color scheme

单色配色方案

In the past I’ve covered how to create colors on web pages, how to compensate for color blindness, different color spaces, gamma, and which CSS color system to use when. In this entry I’ll address color theory.

过去，我已经介绍了如何在网页上创建颜色 ，如何补偿色盲 ， 不同的色彩空间 ， 伽玛值以及何时使用哪种CSS色彩系统 。 在这篇文章中，我将介绍色彩理论。

This can only be the most basic introduction to color: over the last 1000 years writers with far greater skill than I have explored the topic in much more depth than I can express here. However, I would warn readers to be very careful about reading too deeply into the “meanings” of color:

这只能是最基本的色彩介绍：在过去的1000年中，技术水平远超我的作家对这个主题的探讨远比我在这里可以表达的要深得多。 但是，我警告读者，在阅读颜色的“含义”时要格外小心：

Colors tend to be strongly cultural, and thus regional. For example, you may have someone tell you that “purple is associated with royalty”, which is true, at least in the West: historically, a natural purple was extremely difficult to extract, being derived from a tiny gland in sea snails, and therefore reserved for the very wealthy and powerful. However in some Eastern cultures, purple is the color of mourning. Similarly, white is associated in the west with purity and peace, but in the East (particularly Japan) it is associated with death and funerals. When we make a website, it is international by its very nature. Don’t allow anyone to tell you what a color “means”.

颜色往往具有强烈的文化色彩，因而具有地域性。 例如，也许有人告诉您“紫色与版税相关联”，至少在西方国家是这样：从历史上看，天然紫色是极难提取的，它是从海蜗牛中的一个小腺体中提取出来的，并且因此保留给非常有钱和有势力的人。 但是在某些东方文化中，紫色是哀悼的颜色。 同样，白人在西方与纯洁与和平有关，但在东方(尤其是日本)与死亡和葬礼有关。 当我们建立一个网站时，它的本质就是国际性的。 禁止任何人告诉您什么颜色代表“颜色”。

Color choices may be as individual and unique as food pairings, but they usually follow a certain logic: just as most of us wouldn’t eat pickles and fried chicken with ice cream, we would look askance at anyone who claimed “I really like these two colors today, so I’m going to paint my house with them.” There are many considerations that should be made in regards to color: what other hues will be present, how it works environmentally, the product or theme to be communicated, etc.

颜色的选择可能像食物搭配一样独特和独特，但是它们通常遵循一定的逻辑：就像我们大多数人不会吃咸菜和炸鸡配冰淇淋一样，我们也会对那些声称“我真的很喜欢这些的人”表示怀疑。今天有两种颜色，所以我要用它们来粉刷我的房子。” 关于颜色，应考虑许多因素：将显示其他色调，其在环境中的工作方式，要传达的产品或主题等。

While there will always be an opportunity for “edgy” color choices, it is usually best to stick to established, proven, mathematical systems to determine harmonious color choices, the most popular of which is the color circle.

尽管总会有“前卫”颜色选择的机会，但通常最好坚持使用已建立的，经过验证的数学系统来确定和谐的颜色选择，其中最流行的是色环。

There are many variants of the color circle (or wheel), the very first of which was proposed by Sir Isaac Newton. The most common color circle consists of the three primary colors (red, yellow and blue) separated from each other by 120 degrees. (Other variations use red, green and blue as their primary colors). “Secondary” colors are generated by graduations between these primary colors: blue to red produces purple, red to yellow produces orange, and yellow to blue creates green. “Tertiary” colors are still-finer graduations between the secondary and primary colors. Colors lighten as they near the centre of the wheel, and darken as they reach the edge.

色环(或色轮)有很多变体，其中第一个是艾萨克·牛顿爵士提出的。 最常见的色环由彼此分开120度的三种原色(红色，黄色和蓝色)组成。 (其他变体使用红色，绿色和蓝色作为原色)。 “二次”颜色是由这些原色之间的刻度生成的：蓝色到红色产生紫色，红色到黄色产生橙色，黄色到蓝色产生绿色。 “第三色”是介于第二色和基色之间的更精细的刻度。 颜色在靠近轮中心时会变浅，而在到达边缘时会变暗。

With our color circle created, it is easy to create great color combinations by a simple application of geometry:

创建我们的色环后，通过简单地应用几何图形即可轻松创建出色的颜色组合：

A monochromatic color scheme, shown at the very top of this article, is created from colors in the same hue, from light to dark, in a line from the center of the circle. They work very well together as harmonious choices, but do not have a great deal of contrast.

单色的配色方案是在本文的顶部显示的，它是由相同的颜色(从浅到深)在从圆心开始的一行中创建的。 它们作为和谐的选择可以很好地协同工作，但是却没有太多的对比。

Neutral color scheme

中性配色方案

“Neutral” and “analogous” colors are chosen from an arc, usually 90 – 180°, within the color circle. Again, they tend to work well together, but like monochromatic choices they do not exhibit high contrast.

“中性”和“类比”颜色选自色环内通常呈90-180°的弧形。 同样，它们往往会很好地协同工作，但是像单色选择一样，它们不会表现出高对比度。

Complementary color scheme

互补配色方案

“Complementary” colors are a misnomer: immediately opposite each other on the wheel, and the same distance from the centre, they rarely work well together. However, they are usually highly contrasting, and therefore useful for gaining attention.

“互补”颜色是一个错误的称呼：在车轮上彼此直接相对，并且距中心的距离相同，因此它们很少能很好地协同工作。 但是，它们通常是高度反差的，因此有助于引起注意。

Split color scheme

分色方案

“Splits” are triangular variations on the schemes above: most commonly, complementary. They tend to be popular as they are easy to use, and difficult to misuse.

“拆分”是上述方案的三角形变体：最常见的是互补的。 它们易于使用且难以滥用，因此很受欢迎。

Triadic color scheme

三重配色方案

“Triadic” or “triangle” color schemes are any three colors separated by 120 degrees and equidistant from the centre of the wheel. A “square” or “tetradic” color scheme is the same idea, but with four colors separated by 90 degrees from each other.  There is also a “rectangular” or “four tone” color scheme, which works exactly as the name suggests, along with five and six tone schemes.

“ Triadic”或“ triangle”配色方案是由轮毂中心隔开120度并等距的任何三种颜色。 “正方形”或“四边形”配色方案是相同的想法，但是四种颜色彼此分隔90度。 还有一个“矩形”或“四色调”配色方案，正如其名称所暗示的那样，以及五种和六种配色方案。

As a general rule, the more colors you select, the more difficult it is to find a balance between them. It would be my advice to stick to and thoroughly learn the basic color schemes (with a possible selection of closely related, “backup” colors drawn from your chosen colors), especially at the beginning of your design career.

通常，选择的颜色越多，找到它们之间的平衡就越困难。 我的建议是坚持并彻底学习基本的配色方案(可以从您选择的颜色中选择紧密相关的“备用”颜色)，尤其是在设计职业初期。

Whatever color system you use, the same general rules apply: choose one color as a dominant or leading color, a second for support, and a third, if needed, for accent, and use them consistently in those roles. colors chosen from the “active” or “warm” range will appear to “advance” – exhibit more visual weight and emphasis – when placed against “cool”, “passive” colors.  Of course, all of this assumes that we are presenting our color choices to people with “normal” sensitivity to color.

无论使用哪种颜色系统，都应遵循相同的通用规则：选择一种颜色作为主色或主导色，选择第二种作为支持色，第三种(如果需要)强调色，并在这些角色中一致地使用它们。 从“主动”或“暖色”范围中选择的颜色，当与“冷”，“被动”颜色相对时，会显得“前进”，表现出更大的视觉重量和重点。 当然，所有这些都假设我们向对颜色具有“正常”敏感性的人们展示了我们的颜色选择。

Next in the series, I’ll look at tools to help you make color choices, and share a few sources of inspiration.

在本系列的下一篇文章中，我将介绍帮助您进行颜色选择的工具 ，并分享一些灵感来源 。

翻译自: https://thenewcode.com/402/Basic-Color-Theory-For-Web-Designers

ui设计师色彩运用