Magic does not have a large range of colours, but this is purely to improve the styling. By default, Magic has the following colours, that can be applied to any element:
default-lighten
default
default-darken-1
default-darken-2
red-lighten
red
red-darken-1
red-darken-2
green-lighten
green
green-darken-1
green-darken-2
yellow-lighten
yellow
yellow-darken-1
yellow-darken-2
blue-lighten
blue
blue-darken-1
blue-darken-2
dark
light
Colours can be universally applied to most components simply by adding one of the class names listed above. Some components have more advanced colour processing (e.g. the navbar) and require different markup. If this is the case, it will be explained on the respective documentation page.
For example, to add a colour to a box:
<div class="box XXX"> <!-- Replace XXX with any class name from above -->
...
</div>
Gradients have become notorious for serving as disgusting background colours and even text colours. Despite this, Magic has three built-in gradients. They don't look like this. Instead, they're neat and modern, designed for smooth integration into your websites. Not many frameworks use aesthetic gradients like Magic. Here are all three, with their class names:
gradient-red
gradient-blue
gradient-green
These are applied to elements in the same way as with regular colours. These also have universal support, but buttons have special styles for them, as well as footers and navbars.
For more detail, delve into the button documentation, but here are three beautiful gradient buttons: