Home Documentation
Getting started General
Components
Forms
Utilities
Check changelog.
0.5.3

Colors

Background and text colors.

Background colors

Axentix colors are made to automatically match with the best text-color between black and white to help you getting your site the more accessible we can. So when you choose a background color, the text will automatically be black or white, but you can change it an any time with our text-colors classes, or with your own CSS code.

Some text
Some text

Text colors

Changing the text color is as easy as the background color, you just have to precise the color with the prefix .txt-.

Some text
Some text

Dark and Light

Every color in our palette can be lighten and darken. You can light a color up to 4 times using classes .light-1 to .light-4. To make a color darker, use the .dark-1 to .dark-5 to make your color darken.
You can light and dark a text too, you just have to precise .txt-dark-X or .txt-light-X X as the number from 1 to 4 to light, and 1 to 5 to dark your color.

Some text
Some text

Color palette

We created a color palette to let you choose between some predefiened colors to change your text and your background colors. To use them, simply use their name into the classes as explained before.

blue light-4
blue light-3
blue light-2
blue light-1
blue
blue dark-1
blue dark-2
blue dark-3
blue dark-4
blue dark-5
red light-4
red light-3
red light-2
red light-1
red
red dark-1
red dark-2
red dark-3
red dark-4
red dark-5
green light-4
green light-3
green light-2
green light-1
green
green dark-1
green dark-2
green dark-3
green dark-4
green dark-5
cyan light-4
cyan light-3
cyan light-2
cyan light-1
cyan
cyan dark-1
cyan dark-2
cyan dark-3
cyan dark-4
cyan dark-5
magenta light-4
magenta light-3
magenta light-2
magenta light-1
magenta
magenta dark-1
magenta dark-2
magenta dark-3
magenta dark-4
magenta dark-5
yellow light-4
yellow light-3
yellow light-2
yellow light-1
yellow
yellow dark-1
yellow dark-2
yellow dark-3
yellow dark-4
yellow dark-5
orange light-4
orange light-3
orange light-2
orange light-1
orange
orange dark-1
orange dark-2
orange dark-3
orange dark-4
orange dark-5
viride light-4
viride light-3
viride light-2
viride light-1
viride
viride dark-1
viride dark-2
viride dark-3
viride dark-4
viride dark-5
amaranth light-4
amaranth light-3
amaranth light-2
amaranth light-1
amaranth
amaranth dark-1
amaranth dark-2
amaranth dark-3
amaranth dark-4
amaranth dark-5
mole light-4
mole light-3
mole light-2
mole light-1
mole
mole dark-1
mole dark-2
mole dark-3
mole dark-4
mole dark-5
airforce light-4
airforce light-3
airforce light-2
airforce light-1
airforce
airforce dark-1
airforce dark-2
airforce dark-3
airforce dark-4
airforce dark-5
meadow light-4
meadow light-3
meadow light-2
meadow light-1
meadow
meadow dark-1
meadow dark-2
meadow dark-3
meadow dark-4
meadow dark-5
grey light-4
grey light-3
grey light-2
grey light-1
grey
grey dark-1
grey dark-2
grey dark-3
grey dark-4
grey dark-5
primary
secondary
success
warning
error
transparent
white
black