The SUSE Design System uses cookies to help us learn more about how we can improve the design system.
Learn more about our cookie policy

Gradient colors

Whether designing new components and UI elements, or simply re-branding an application, follow these simple rules to consistently use and combine the color palettes for text, backgrounds, and links.


warning
Usage of gradients
Gradients should only be used for marketing purposes.

Color combinations

The following color combinations are derived from the EOS color palette.

Gradients made from color value 500.

500 (opacity 100%)
500 (opacity 100%)
#DC3545
#F75C03
#F75C03
#FFC107
#DC3545
#FFC107
#0D2C40
#00B2E2
#0D2C40
#00C081
#00C081
#00B2E2
#841781
#00B2E2
#841781
#DC3545

Gradients made from color value 100.

100 (opacity 100%)
100 (opacity 100%)
#F5C2C7
#FDCEB3
#FDCEB3
#FDCEB3
#F5C2C7
#FFECB5
#B6C0C6
#B3E8F6
#B6C0C6
#E0F7F0
#E0F7F0
#B3E8F6
#DAB9D9
#B3E8F6
#DAB9D9
#F5C2C7

Gradients made from color values 500 and 100.

500 (opacity 100%)
100 (opacity 0%)
#0D2C40
#B6C0C6
#00C081
#E0F7F0
#00B2E2
#B3E8F6
#841781
#DAB9D9
#DC3545
#F5C2C7
#F75C03
#FDCEB3
#FFC107
#FFECB5
#969494
#E0DFDF