Colors

Ionic comes with a set of colors to start with, but as a general rule colors are meant to be overridden. We prefer saying that Ionic provides a recommended naming convention for your colors, swatches, themes, etc.

Utility colors are added to help set a naming convention. You'll notice Ionic purposely does not use words like "red" or "blue", but instead have colors which represent an emotion or generic theme.

Let's be realistic, assigning colors is one of the easier tasks in CSS, and each app will have different requirements for colors. Ionic's goal is to provide a clean system to build on top of and maintain, and stays away from dictating how each app chooses to color its custom design.

To customize the colors you can simply override those coming from the ionic.css CSS file. Additionally, since Ionic is built using Sass, for more power and flexibility you could also modify and extend the color variables within the _variables.scss file.

* For more flexibility, you can Customize Ionic With Sass