what to learn this time

• Learn to use beautiful and functional colors.
• Learn the optical properties of color.
• Learn the semantic properties of color.

color

Color is the most powerful element in design.

Even if they are the same flower, the feelings conveyed by the blue and red flowers are different. It is an element that should be handled with care because it gives more intense stimulation than any other design element. It not only conveys mood or nuance, but also serves to convey information. Like traffic lights, green means positive, yellow means warning, and red means forbidden.

The color is like fire. Used appropriately, it can get you the results you want, but overused can ruin your design. Color must be used very carefully in product design, as it should help users quickly act on their priorities. Let’s find out what properties color has to help us handle fire well.

property

To understand how colors work, we need to find out what properties they have. Color has three properties. There are hue (hue), which distinguishes the type of unique color, saturation (saturation), which distinguishes the depth of the primary color, and brightness (brightness), which distinguishes light and dark. Use these three properties to create various visual effects.

The shape is first constructed using brightness, and the colors are classified according to the function of the element. I usually use black and white and one accent color. Sometimes two or more colors are used for important information with different functions.

Organize it in shape, highlight it with color, and use different colors depending on the purpose.

notation

What is RGB and what is HEX? How are colors expressed in a digital environment? The colors used when designing, the colors processed by the computer, and the colors displayed by the monitor all vary depending on their individual specifications. Color space refers to a standard for managing colors expressed in this digital environment. In digital products, colors mainly include RGB, HSL, and HSB, and HEX and RGB are mainly used when working.

• RGBA (Red, Green, Blue, Alpha): This is a basic method of expressing various colors by combining red, green, and blue, which are the three primary colors of light, and Alpha, which represents transparency.
• HSV/HSB (Hue, Saturation, Value or Brightness: This is an intuitive way to handle color properties.
• HEX: A code that converts RGB to hexadecimal. It has the advantage of copying and pasting at once compared to other elements, and is a universally used color value because it is easy to input in various environments.

All major programs use HSB to select colors and use Hex for display. When looking at the case of HSB, where you can simply reduce B rather than RGBA, which darkens by mixing red, green, and blue when you want to darken a color, HSB is much more convenient when designing because it can handle color properties more intuitively.

However, during development, typing for each property and typing commas is cumbersome, so I tend to use HEX a lot because it is the least typeable and easy to distinguish.

Property

light and dark colors

If it is difficult to distinguish information with one main color, use light and dark colors. At this time, a color lighter than the main color and a color darker than the main color are defined, according to the color change rules in nature. Brightness – Saturation – Hue Transform colors in sequence.

• Dark colors: Move from base to RGB hues, increase saturation and decrease brightness.
• Light colors: Move from base to CMY tones, reduce saturation and increase brightness.

color change in nature

In nature, when the light becomes stronger, the saturation of the object weakens. (Imagine a flashlight held right in front of an apple.) Color is seen when light is reflected on a material. Too little reflection makes it look dark. When the color of an object becomes brighter saturation Decrease, increase brightnessand when it gets dark Increase saturation, decrease brightnessis.

brightness of the color itself

You can observe that yellow is bright and difficult to use on a white background and blue is dark and difficult to use on a black background, but it is difficult to imagine the difference in brightness between other colors. How do you know the brightness of the hue itself that you see on the screen?

I adjusted Hue among HSB using Illustrator and specified 12 colors. I copied it verbatim and converted it to black and white. Yellow and blue are predictable, but the other colors don't look very regular. Why are the colors at 180 degrees and 300 degrees brighter?

When comparing the graphs for each number, it gets darker as it goes towards Red Green Blue and becomes brighter as it goes towards Cyan, Magenta, and Yellow. Since the screen uses the three primary colors of light based on RGB and CMY, the more colors are mixed, the closer it is to white, so the CMY with the most primary colors mixed becomes brighter.

Therefore, it is natural for light colors to be expressed as light tones and dark colors to be expressed as dark tones. This affects how your computer display renders color.

The display creates colors by emitting RGB, red, green and blue light. When three colors overlap, it becomes white. CMY is expressed by combining RGB. CMY is brighter for the same conditions because the light mixes more.

rank

emphasis and base

In digital product UIs, color is strictly and limitedly used because improper use of color can interfere with content navigation. To manage standards, we define a hierarchy of colors. Colors Used in Services Services basically use primary color, secondary color, and black and white. Depending on the nature of the service, more diverse color combinations may be decided. The main color used by the service mainly follows the brand's graphic rules.

• Main color: The color most often used where color is needed.
• Secondary color: Color used when the main color is used and needs to be distinguished from other elements.
• Black and white: Mainly used for backgrounds and text, with the lightest and darkest colors

The service uses a lot of black and white and minimal color to emphasize the content.

hierarchy

If the type of color to be used in the product has been decided, it is time to use it, right? When using color on a page, follow the importance of the information. The basic skeleton is composed of black and white, and important elements such as functions or must-know information are emphasized using primary and secondary colors.

At this time, unlike other information, if cognition or action is an important factor in a special situation, a color appropriate to the meaning is used. It highlights the important end-action elements and the information that must be verified to do so.

It highlights the most important final action elements and the information that must be verified for this.

color combination

prepare

When colors are blurred, the eyes have to focus to see subtle differences, so it is best to provide as strong contrast as possible. If you are in a situation where you need to distinguish between colors ambiguously, you may need to think about whether it is really an element worth distinguishing using color. If you decide to express a color differently, you must provide sufficient contrast so that the color is clearly distinguishable from other colors. Adjust the color while considering the background color and its relative relationship with other elements. Color contrast follows the levels divided by WCAG, and AA level is mainly used as the standard.

• A (minimum) – 3:1
• AA (Medium) - 4.5:1
• AAA (max – 7:1
• Color Contrast Checker

Combination

Even if you've decided on the colors you'll be using a lot, there are times when you need a different color. At this time, based on the color wheel, you should choose a color that goes well with the main color. All elements are mainly expressed in a single color, similar to the main color, but similar colors are used when distinction is needed, and complementary colors are used for information that the user needs to perceive more clearly than any other element.

• Monochromatic: The main color is used for important information, and gray areas also use the same tone as the main color.
• Analogous: Similar concept, but analogous colors are used when distinction is needed.
• Complementary Color: Used when it is necessary to emphasize more strongly than other elements.

ratio

Once you've decided on what color to use, it's time to decide on the proportions.

Color is a strong stimulus. It should be used to a minimum so as not to strain the user's eyes. You can learn from the rules of color proportions in interiors how to place colors in a specific space. In the interior, 60% is used as a color that is less irritating, and 30% is used as a color tone that determines the overall atmosphere. If necessary, use the accent color of 10%.

By default, 10% black text on white background of 60% is used a lot. Since everything cannot be expressed with black and white alone, an accent color of about 30% is used. The degree of the ratio may vary depending on the nature of the service.

In this case, I tend to use primary colors for text and icons. In the case of products where content is the main character, the image itself is viewed in color and color is not used for the remaining elements at all. In dark mode, white and black are reversed.

If the structure or expression of the service itself is important, colors are allocated to the icon or background using the main color. 

Instagram doesn't even use saturation to highlight content. Arrange the image so that it becomes the main character.

This is a style commonly seen recently, in which content is made in black and white and color is distributed only to the most important information and actions. At this time, since there is a lot of content written in black and white, the black ratio is slightly higher.

Services where the UI itself is the main character tend to use more color. Color is sometimes used boldly as a background to clearly divide areas. In dark mode, black and white are reversed like this.

background

Because color is relative, its properties change depending on what colors are around it. When designing the dark mode, the background color is inverted, so instead of using the same color, use the appropriate color for each theme.

• Dark Background + Light Area + Dark Inner Elements
• Light Background + Dark Area + Light Inner Elements

palette

Create a palette based on the different characteristics of colors that you have learned so far. First pick the main color, then black and white tones. And the main color and black and white tones are divided into stages according to their physical characteristics.

When breaking down the steps, you can use several palette creation tools available on the web. In practice, tools are often used to create palettes for speed.

However, in this time, we will learn how to make our own palette for a deeper understanding of the principles of color.

The fastest way to make a palette

First, create 10 black square squares. Make the darkest squares 90% transparency and the lightest squares 5% transparency. Change the blend mode of the main color rectangle to Overlay and combine them above the list of squares below to create a basic palette.

We do not use 100% transparency because perfect black is not used. As the color of the palette gets closer to white, it becomes darker, so a lighter color is needed over time, so I use 5% transparency.

Transforming the hues of the default palette

The prototype created above divides a single color into light and dark brightness levels. If the hue is transformed according to the brightness of the color, it can give a richer feeling. You can create a palette with a richer impression by overlapping layers of the desired color such as cool tones and warm tones in the blend mode Overlay on the color step created above.

Adding Secondary Color Steps

Choose a secondary color that is similar in tone to the main color but has a lower level of attention. As important as the primary color, but also select complementary colors to be used when there is clearly different information. And it divides the steps of secondary color and complementary color.

A color that conveys information in a particular situation makes it as noteworthy as a primary color. Since it will be used for information that must be seen in a specific situation, it should be perceived as equivalent to the main color.

Adjust the main color so that it looks attractive when the whole is put together. We must do our best to make the main colors attractive in order to be imprinted in the user's brain as a good feeling in a short period of time.

Dividing Color into Meaning

The concept of tokens can be applied to handle palettes more efficiently. Since the colors used for bright screen and dark screen are different, they are used with the same meaning, but they are standardized so that the color can be easily changed according to the screen mode.

For example, if the button color is slightly dark green on a white background, it will be slightly light green on a black background. If the optical properties are different, but the meaning is the same as 'button', and the level of intended attention from the overall perspective is the same, then the tokens remain the same.