Colors In Ionic

Understanding colors in Ionic

Ionic components, such as buttons, modals, and toggle switches, use the following nine-color palette to apply styling:

• Primary
• Secondary
• Tertiary
• Success
• Warning
• Danger
• Dark
• Medium
• Light

Each of these colors consists of a base, contrast, shade, and tint property, with the base and contrast properties requiring an additional rgb property.

This additional rbg property provides the same color, just in an RGB format to overcome transparency issues when rendering hexadecimal colors for Ionic UI theming, as illustrated in the following example from the Ionic documentation: