SAP Fiori Color Palette
FioriNewComplete SAP Fiori design system color palette. Browse semantic colors, chart colors, and status indicators with hex values, CSS variables, and usage guidelines.
sapHighlightColor
Primary highlight / brand color
sapActiveColor
Active state color
sapPositiveColor
Positive / success state
sapNegativeColor
Negative / error state
sapCriticalColor
Critical / warning state
sapInformativeColor
Informative / neutral info
sapNeutralColor
Neutral state
sapTextColor
Primary text color
sapContent_LabelColor
Label / secondary text
sapContent_PlaceholderColor
Placeholder text
sapContent_DisabledTextColor
Disabled text
sapBackgroundColor
Main page background
sapGroup_ContentBackground
Group / card background
sapTile_Background
Tile / card background
sapChart_OrderedColor_1
Chart color 1 (blue)
sapChart_OrderedColor_2
Chart color 2 (orange)
sapChart_OrderedColor_3
Chart color 3 (green)
sapChart_OrderedColor_4
Chart color 4 (pink)
sapChart_OrderedColor_5
Chart color 5 (purple)
sapChart_OrderedColor_6
Chart color 6 (teal)
sapChart_OrderedColor_7
Chart color 7 (indigo)
sapChart_OrderedColor_8
Chart color 8 (magenta)
sapChart_OrderedColor_9
Chart color 9 (slate)
sapChart_OrderedColor_10
Chart color 10 (coral)
sapChart_OrderedColor_11
Chart color 11 (dark blue)
CSS Variables (all 25 colors)
--sapHighlightColor: #0070F2; --sapActiveColor: #0064D9; --sapPositiveColor: #188918; --sapNegativeColor: #BB0000; --sapCriticalColor: #E9730C; --sapInformativeColor: #0070F2; --sapNeutralColor: #788FA6; --sapTextColor: #1D2D3E; --sapContent_LabelColor: #556B82; --sapContent_PlaceholderColor: #788FA6; --sapContent_DisabledTextColor: #89A0B4; --sapBackgroundColor: #FFFFFF; --sapGroup_ContentBackground: #F5F6F7; --sapTile_Background: #FFFFFF; --sapChart_OrderedColor_1: #5899DA; --sapChart_OrderedColor_2: #E8743B; --sapChart_OrderedColor_3: #19A979; --sapChart_OrderedColor_4: #ED4A7B; --sapChart_OrderedColor_5: #945ECF; --sapChart_OrderedColor_6: #13A4B4; --sapChart_OrderedColor_7: #525DF4; --sapChart_OrderedColor_8: #BF399E; --sapChart_OrderedColor_9: #6C8893; --sapChart_OrderedColor_10: #EE6868; --sapChart_OrderedColor_11: #2F6497;
Advertisement
About SAP Fiori Color Palette
SAP Fiori's design system defines specific semantic colors, chart colors, and status indicators that should be reused consistently across custom UI5 apps rather than reinvented per project. This palette lists the official Fiori colors with hex values and CSS variable names so a custom app's status indicators and charts stay visually consistent with standard Fiori apps.
How to use this tool
- Browse colors grouped by purpose: semantic (success/warning/error), chart series, and status indicators.
- Copy the hex value or CSS variable name for use in your UI5 app's custom CSS or theme designer configuration.
- Check the usage guideline next to each color before applying it to a new UI element.
- Use the chart color set when building custom charts to match SAP Fiori Analytics styling.
All processing happens locally in your browser. No data is sent to any server. Your SAP code and business data remain private at all times.
Frequently Asked Questions
What design system does SAP Fiori use?
SAP Fiori uses the SAP Horizon design language (introduced 2022) built on top of the UI5 theming engine. Colors are defined as CSS custom properties and can be applied via the @sap-theming/theming-base-content package or SAP Theme Designer.
Can I use SAP Fiori colors in custom HTML/CSS?
Yes, by loading the SAP UI5 theme CSS. The CSS custom properties (variables) like --sapHighlightColor, --sapPositiveColor, --sapNegativeColor etc. become available. Use them in your custom CSS to maintain visual consistency with Fiori apps.
What is the difference between semantic colors and chart colors?
Semantic colors convey meaning (red=negative, green=positive, blue=informative, yellow=critical). Chart colors (sapChart_OrderedColor_1 through _11) are designed for data visualizations and provide sufficient contrast between adjacent series.
Advertisement