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
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