# Colours

## Magic Colours

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

### Applying colours

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>

## Magic Gradients

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:

## Notes

- When elements are set to a specific colour, they will also have a white text colour (by default)
- Text is otherwise black, and Magic currently does not have specific text colours.
- Colours influence many objects in deeper ways. For example, the navbar automatically changes hover colours, the footer changes the bottom bar colour, etc.
- As stated many times, some elements have special colour classes. For example, the navbar uses nav-blue to define its colour. Wherever this is the case, this will be documented per element. So if the colours, text or buttons of any element look strange after applying a normal colour class, check the element's documentation.