RGB 153. 0. 0 : #990000 Color Hex
Color is an important visual and functional element in the user interface. It is also one of the important factors in expressing brand identity and determining the style of the app. If you think of Google's blue, red or Kakao's yellow color, you can see it. In terms of user interface, color induces immediate and powerful interaction.
Color and design
RGB 180. 95. 6 : #b45f06 Color Hex
Color gives the user an intuitive understanding of the interaction element. It gives unique colors to controls such as buttons and uses them consistently on the entire screen of the app to focus attention and induce behavior.
The red color of the traffic light means 'stop' and the green color means 'progress'. In mobile phones, the user interface can be used more by applying the color consistently, such as using the 'call' and the 'end' and the 'reject' for the red button.
Red is used for 'rejection' and green is used for 'response'. If you want to end the call, touch the red button. This use of color applies equally to all smartphones.
When using color in UI design, it should be designed so that the user does not miss the interactive elements. Color must be used in a consistent way to avoid confusion in the interpretation of functions and meanings.
Consistently and continuously used colors suggest that they are the same attributes and functions. Color-misused designs confuse users and prevent them from focusing on content. These designs are inferior to those that do not use any color at all. Color is a sensation that occurs when light enters the eye, stimulates the optic nerve, and transmits it to the visual center of the brain. The three properties of color are color Hue, which refers to the type of color, brightness, brightness, value, and saturation, which refers to color purity and clarity. In addition to the 3 attributes, tone is a method of combining the concepts of brightness and saturation into one to express color brightness, intensity, or joke. Colors are unique characteristics of the colors themselves, such as red, yellow, and blue. It is a classification of rainbow colors that appears when sunlight is spectroscopicized with a prism. This color is classified by displaying it as a color ring. There are 10 color rings, 20 color rings, and 40 color redemption. In the range of 0 to 360 degrees, both 0 and 360 times are red. Red is 0 degrees, yellow is 60 degrees, green is 120 degrees, science is 180 degrees, blue is 240 degrees, and magenta is 300 degrees. This is Munsell's twenty-color redemption. In general, ten-color repayment is used a lot. The Korean names of each color shall be unified based on the above color ring. It is a property that shows the clearness of color, the degree of purity, color strength, and saturation. It is a measure of the distance from achromatic colors. In the range of 0 to 100, the highest saturation of 100 is gray. The more primary colors that do not mix white or black, the higher the saturation. The saturation shows the vividness of the color. The higher the saturation, the higher the visibility. High saturation colors should only be used for important controls on the screen. indicate the brightness of a color In the range of 0 to 100, 100 is the brightest color (white regardless of color tone and saturation), and 0 is the darkest color (black). In UI design, brightness can be used to represent a visual hierarchy. Among the three attributes of color, the concept of brightness and saturation is combined into one to express the brightness, darkness, strength, or darkness of color. The color tone represents the achromatic stage and the chromatic stage. The hue system includes the KS hue classification system defined as the Korean industrial standard and the hue tone of the IRI Color Design Research Institute developed with the support of the Ministry of Commerce, Industry and Energy. Below is the IRI tint step. It consists of 5 shades of achromatic colors and 11 shades of achromatic colors. (Detailed colors and shades are in color list textbooks and color-related books, so be sure to read them if you are a designer.) The IRI Color Design Institute's 11 shades of color are named Vivid, Bright Bright, Strong (Basic) Strong, Dark Deep, Clear Plain, Soft Light, Calm Dull, Light Very Pale, Blurry Light Grayish, and Dark Dark Dark Dark. - Colorist certification textbooks seem to use this system. It was based on IRI color classification blue. In the case of rape colors, each system in Korea consists of 11 colors and 12 colors. You may have seen many terms such as vivid color and deep color. The most commonly used color spaces include CMYK (cyan, magenta, yellow, black) used for printing, RGB (red, green, blue), HSL (color, saturation, brightness), and HSV (color, saturation, value) used in digital. The display uses RGB, so color is considered RGB, but RGB color space does not correspond to all colors perceived by the human eye. In addition, there may be minute or serious differences in color depending on the display type and device. CMYK-based Pantone color chips are used for printing, and HSB and LAB spaces are used for digital devices rather than RGB spaces. Web and apps use RGBA and Hexa code. HSL and HSB color spaces consist of three elements: hue, saturation, and brightness. HSL and HSV are very basic color models for defining colors in desktop graphics programs, just like colors perceived by humans. Since these two color spaces are closer to human perception, they become the standard for color palettes in graphic programs such as Photoshop and Sketch. The graphic program uses the color picker as the HSL space for the color selection method. When a designer selects a color, it converts it into RGB and HEX code. All colors on the screen are implemented as a mixture of red, green, and blue light. RGB is an additive system that expresses a vast range of colors by adding and subtracting three colors in different ratios. The value of each color is measured from 0 to 255. It is described in the order of rgb (red, green, blue). Blue is rgb (0,0,255) black is rgb (0,0) white is rgb (255,255,255). It is a method of specifying an RGB value using a hexadecimal color value in the form of #RRGGBB. RR (red), GG (green), and BB (blue) are hexadecimal values between 00 and FF. (equivalent to the decimal 0-255). For example, since red is set to the highest value FF and other values are set to the lowest value 00, #FF0000 is displayed in red. Hexadecimal values are not case-sensitive. "# ff0000 is equal to "FF000000". Hexadecimal color tags always start with a pound symbol (#) in HTML and CSS. Web and apps mainly use this color value. It is the same as the RGB color system, but Alpha (RG Alpha) is added. The alpha value expressed from 0 to 1 (100%) determines the transparency of the color. The color with an alpha value of 0% is completely transparent (invisible), and the color of the alpha value of 100% is completely opaque. PNG images use alpha channels to make white transparent. The way the user interprets the color may vary depending on the culture. However, the interpretation of the states represented by red, yellow, and green is consistent worldwide. This is in accordance with the Vienna Convention on UNESCO Road Signs and Signals. It is used as a safety color in Korea, and in 2009, Munmun Color Design Research Institute and Hongik University's Technical Standards Institute developed and distributed practical public design based on the characteristics of safety colors. According to this standard, red means danger, stop, green means progress, safety, and yellow means caution. In traffic-related information, the traffic light system consists of red, yellow, and green, and is used in the same meaning. Red means danger, prohibition, passion, fire, etc., and green means fairness, safety, and neutrality. This can be said to be signal information reflecting symbolism. The same applies and is used for road signs. For example, regulatory signs such as "no entry", "stop", and "no left turn" use red signs for information that drivers should be careful of, such as "falling stone", "speed bump" and "under road construction". These color standards are also used importantly in UI design. UI design also introduces these standards to inform users of the status of the following systems. It is the same as the red meaning of the traffic light. It must be red. It is not necessary to use primary colors with high saturation. This state informs the user of a system error. For example, if information is incorrectly entered in the text input field, a red inline error message is displayed under the field to inform the user of what the user did wrong. In order to make these errors visible to users, it is recommended to use the screen mainly in blue or achromatic colors. In addition to errors, it is also used for negative and irreversible actions such as 'delete' and 'stop'. Red is used for control of negative meanings such as error expression or deletion of input fields. Use yellow or orange. This condition prevents errors by warning that it can cause potential problems. The yellow color of the traffic light serves to reduce the possibility of errors of the user, just as it prevents accidents by informing the driver that the signal changes soon. Recently, mobile apps are not frequently used because they properly prevent errors through UX improvement. Green is the basic color. Recently, green with a little bit of green to blue is used a lot. Through this state, the user can confirm that the operation has been successfully performed. It can be used to indicate that Internet remittance has been properly completed. The most common example is the color used when the switch control of iOS is turned on. Colors in this state can be used without worrying about differences in cultural interpretation, and are applied and used in UI design. The state color does not need to be used in primary colors, and can be used flexibly according to brand identity and color usage strategies. Color, along with fonts and icons, is an important graphic element expressing brand identity by consistent use and conveys the following in the UI. Color is the most powerful tool to guide users through the interaction of controls such as buttons on the app/web (clickable and selectable so that commands are executed). It is used to represent interactions such as selection controls such as check boxes, buttons, links, and sliders. - Flat design is a big trend in UI design. Graphic expressions such as embosses, gradations, and realistic materials used to indicate that interaction is possible are recognized as visual noise that hinders users from focusing on content. Color has become the most important graphical means of interaction according to the flow of minimizing visual noise and prioritizing content. - with verb labels Color has the general symbolic meaning mentioned above, and the meaning of elements on the screen can be conveyed by color. As discussed in the interpretation of colors earlier, red means prohibition or error, yellow means caution or warning, and green means safety or positivity. When registering as a member, if the security of the password input by the user is high, it may be displayed in green, which means safety. In addition, in the navigation app, traffic conditions can be displayed by displaying road conditions in red for congestion and green for smoothness. The color may display the current state of the interaction of the UI control. It may indicate the current state of the control such as activation and deactivation of the button, the progress of input of the text field, and the state of the control according to the user's operation result, such as the toggle switch. Colors can express the important order of content and UI elements in a hierarchical structure. The hierarchical structure means visually expressing the order of importance of content. Hierarchy is more effective when expressed with color and typography. The hierarchical structure through color can be expressed in a light and dark stage or a saturation stage from black to white to make the order of hierarchy clearer. Color can be used to attract the user's Colors that show marked differences in saturation, color, and brightness are relatively noticeable and can be used to distinguish and emphasize specific information. For example, if there is a new notification in the app, a red badge next to the icon in the tab bar informs the user that there is a new notification. Emphasis can be used only when it is useful for the user in the context of use to achieve the purpose of inducing the user's behavior. In addition, the proportion of the screen should be minimized. Excessive emphasis causes visual noise and degrades usability. Instagram and Facebook express new notifications in red to emphasize them over other controls. Users can recognize this and tap it to check related information. The first thing to do before designing an app or website is to define a style or visual element. There are typography, icons, and colors. The process of creating a UI color system for apps and the web is more complicated than expected. In the user interface, color planning 'does not interfere with the user's concentration on the content."In principle, In other words, the focus should be on showing the content in an optimal state. In UI design, colors should be used very deliberately to help users immerse themselves in content. The principle is not to prevent users from focusing on content. Each color must be in harmony and must be clearly used and consistent (internal designers and developers should share why this color is used and what it is used for). Using different colors for the same function confuses the user. Optimized colors should be planned to the extent that designers can control.Color attribute
RGB 255. 165. 0 : #ffa500 Color Hex
Color Hue
Chroma
Wiki : Chroma Brightness value
Wiki : Brightness value Tone color
KS Standard Color Color space
RGB 56. 118. 29 : #38761d Color Hex
HSL color space
HSL color space RGB
Hexadecimal colors
RGBA
Color interpretation
RGB 11. 83. 148: #0b5394 Color Hex
Error
Warning
Success
Use of Color in Design
RGB 7. 55. 99: #073763 Color Hex
Interaction representation interaction
Meaning
Status
Visual hierarchy
Emphasis
Color Planning
RGB 53. 28. 117: #351c75 Color Hex
Appendix : https://www.color-hex.com/
RGB 91. 91. 91: #5b5b5b Color Hex
Popular Hex Color Codes
Unique Hex Color Codes
Post a Comment
0 Comments