Colors In Ionic

Learn how to add and edit colors in Ionic applications.

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:

Get hands-on with 1200+ tech skills courses.