6

20 Basic Color Related Terms You Need to Know As a UX/UI Designer

 3 years ago
source link: https://uxplanet.org/20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

20 Basic Color Related Terms You Need to Know As a UX/UI Designer

The most common terms are explained in plain English.

If you’re going to use color effectively in your designs, you’ll need to know how to describe it precisely.

But sometimes, the words describing the color qualities can be pretty confusing. So I made this list of essential terms that UX/UI designers use frequently.

You don’t necessarily have to remember all of these technical terms. Just getting familiar with these different concepts is all you need.

  • Achromatic — means without color. Achromatic colors can be anything from greys to a neutral color. It can also be black or white.
  • Chroma — (or chromaticity) the degree of purity or intensity of a color. A color with high chroma appears more vivid or pure. A high chroma has no added black, white, or gray.
  • Hue — another name for color. For example, a banana’s hue can be yellow. You can use the words “color” and “hue” can be used interchangeably.
  • Saturation — is the intensity or purity of the color.
  • Luminance — is the amount of brightness or light in color.
1*qeTWupqBZSeZsTjynjkz5Q.jpeg?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
Hue, saturation, and luminance. Source: Canva.com
  • Primary colors — refer to the colors that cannot be created by mixing other colors — red, yellow, and blue.
  • Secondary colors — when equal parts of two primary colors are combined, secondary colors are created. They are purple (red mixed with blue), orange (red mixed with yellow), and green (yellow mixed with blue).
  • Color wheel —is an illustrative model of colors in a circle. It shows the relationships between the primary, secondary, and tertiary colors. A primary color with a secondary color next to it on the color wheel creates tertiary colors.
1*XoZlBGUgkWOSqBgw75rzbg.png?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
A representation of a color wheel showing primary, secondary, and tertiary colors. Source: Wikipedia.org
  • Analogous colors— refers to any colors that lie next to each other on the color wheel.
  • Complement (or complementary) — refers to colors that lie opposite each other on the color wheel. For example, yellow and purple. These two colors are contrasting, and each of them pops and is highly noticeable to the eye against the other.
  • Monochromatic —refers tovariations of one color.
  • Triad colors — refer to three colors that form a triangle in a color wheel.
1*wCqnZm-x-eKC5Rs4eMCjFg.png?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
  • Shade, shading — color changes made by adding black to decrease the proportion of the original hue. In design, very dark shades are sometimes used instead of black and can serve as neutrals. Combining shades with tints or lighter neutrals is best to avoid too dark and heavy a look.
  • Tint — a light value of the color. A tint is created by adding white color to the original hue, lightening it. Any pure hue with white added to it is technically a tint, even if the color is still quite bright. Tints are often used to create feminine or lighter designs.
  • Tone — is created when gray is added to a hue, making the color look softer or duller than before. More gray can lend a particular vintage feel to websites.
1*E08yjk-KPTNncdBg_jaqYw.jpeg?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
Shade, tint, and tone. Source: Canva.com
  • Pastel hues — they are usually tints of hues. They have high value and low to intermediate saturation. Adding white not only raises the value, but it also changes the psychology as well. Pastel hues are usually considered delicate, feminine, and clean. They also work well in vintage designs and are popular on websites targeted at babies and toddlers' parents.
1*ZKDhySwONR38-QwVJ2ezTQ.jpeg?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
Examples of pastel colors. Source: Quora.com
  • Warm colors — are associated with heat or fire, such as red, orange, and yellow.
  • Cool colors — are associated with the water's coolness, dusk, and vegetation: usually violets, blues, and greens.
1*iFgyjL1iwhaeu4CKSk_0xQ.jpeg?q=20
20-basic-color-related-terms-you-need-to-know-as-a-ux-ui-designer-9db2be729df4
Warm and cool colors. Source: Canva.com
  • Value — is the degree of lightness or darkness of a color. Lighter colors have higher values. For example, orange has a higher value than dark purple. Black has the lowest value of any hue, and white the most elevated. When applying color values to your designs, favor colors with different values. High contrast values generally result in more aesthetically pleasing designs.
  • Harmony — refers to a combination of colors that lets the eye travel smoothly between them with no sharp contrasts catching the eye.

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK