You can use semantic colors and industry-specific colors to visualize the status or state of business data: Show
Nearly all input controls support semantic colors, while industry-specific colors are only supported by a few UI elements. For more information about the color values, see Belize Colors and Quartz Light Colors. Object status with semantic colorsObject status with industry-specific colorsUsage Use semantic colors if:
Do not use semantic colors if:
Use industry-specific colors if:
Do not use industry-specific colors if:
Overview Semantic ColorsSAP Fiori has five semantic colors that are associated with the following predefined value states:
Industry-Specific ColorsSAP Fiori has eight generic indication colors that are intended only for industry-specific use cases. You can associate these colors with a specific meaning in a given industry context (for example, to reflect industry standards). Each application must clearly communicate the meaning of each color. In addition to using a color, you must also provide a text, such as an object status. All colors require a corresponding descriptive text for accessibility purposes. The indication color palette is supported exclusively by tables and the object status. Object status with five industry-specific colorsObject status with three industry-specific colorsWhen To Use Which Semantic Color Only use a semantic color if you need to convey the meaning defined for that color. This section looks at each semantic color in turn, and offers guidance on when to use each one. Regular (neutral)Use this color as the regular, neutral state of all UI elements. Use the regular (neutral) color if:
Good / PositiveThis color stands for a good, positive situation, or for the successful completion of a task. Use the good/positive semantic color if:
To indicate a successfully completed process, a short notification is enough. In this case, use a message toast and not the good/positive semantic color. Radio button, step input, and input in positive stateWarning / CriticalThis color indicates a critical situation or warning. Use the warning/critical semantic color if:
Bad / ErrorUse this color for errors, or to indicate a bad or negative status or consequence. Use the bad/error semantic color if:
InformationUse this color for an information state. Use the information semantic color if:
Don’t use the information color if you want to highlight an information text. The blue text color is explicitly reserved for links. Use bold or italic formatting instead. Radio button, step input and input in information stateUsing Industry-Specific Colors There is no predefined meaning for the individual colors in the generic palette. If you want to use one or several colors from the industry-specific color palette in your application, proceed as follows:
Color OverlapBy default, some colors are the same in the semantic palette and the industry-specific color palette (such as red, orange, green, and blue). This is intended. However, the two color palettes can be themed independently, which means that end users might not see the same colors in both. No Palette MixSome UI elements support both the semantic color palette and the industry-specific color palette. However, you can only use one color palette at a time. It is not possible to mix different colors from both palettes. Color HierarchyIf an UI element would have multiple semantic or industry-specific color statuses at the same time, the control may need to determine an “overall color” at first. Styles The semantic colors and industry-specific colors are themeable. Resources Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design. Color Accent là gì?Mẹo nhanh chọn đúng màu Để chọn đúng màu, trước hết bạn nên chọn đúng 2 màu: – Màu trung tính (neutral color): bao gồm màu xám, đen, trắng hoặc nhóm màu be/nâu – Màu nhấn (accent color): những màu mà bạn thích, từ aquamarine tới màu xanh zucchini.
Complementary color là gì?Complementary – Phối màu Tương phản
Phối Tương phản là phương pháp sử dụng những màu đối diện nhau trong Color Wheel. Phương pháp này trái ngược với hai phương pháp kể trên vì nó nhấn mạnh vào độ tương phản. Ví dụ như việc sử dụng nút bấm màu cam trên nền xanh dương chẳng hạn.
Màu Accent là màu gì?Blue, Accent 1: Là màu xanh dương, nằm ở phần trên cùng. Green: Là màu xanh lá cây, nằm ở phần dưới cùng. Blue, Accent 1, Lighter 60%: Là màu xanh dương, nằm ở phần giữa.
Subtractive vs additive color là gì?Additive color hoạt động trên hệ màu RGB, nếu bạn cộng nhiều nguồn sáng khác thêm vào thì Additive color càng sáng. Subtractive Color - màu trừ. Phối màu hấp thụ này phản xạ lại mắt người, để tạo Subtractive Color cần 3 yếu tố: Nguồn sáng (ánh sáng trắng), vật mẫu và nguồn thu (mắt người).
|