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 best accessibility possible. 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-color classes, or with your own CSS code.

Text colors

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

Border colors

Changing the border color is really easy, you just have to specify the color with the prefix .bd-.
Use the different border classes to create a custom border on the borders page.

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 .text-dark-X or .text-light-X X as the number from 1 to 4 to lighten, and 1 to 5 to darken your color.

Light blue with dark grey 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#BCDFFB
blue light-3#95CDF9
blue light-2#6EBBF7
blue light-1#48A8F5
blue#2196F3
blue dark-1#0C82DF
blue dark-2#0A6BB8
blue dark-3#085592
blue dark-4#063E6B
blue dark-5#042844
red light-4#F8BABA
red light-3#F49595
red light-2#F17070
red light-1#ED4B4B
red#E92626
red dark-1#D11515
red dark-2#AC1111
red dark-3#870E0E
red dark-4#620A0A
red dark-5#3D0606
green light-4#BBF8BB
green light-3#96F496
green light-2#71F171
green light-1#4CED4C
green#27E927
green dark-1#15D215
green dark-2#12AD12
green dark-3#0E880E
green dark-4#0A630A
green dark-5#063E06
cyan light-4#BBF0F7
cyan light-3#96E9F3
cyan light-2#71E1EF
cyan light-1#4DD9ED
cyan#28D1E7
cyan dark-1#17BACF
cyan dark-2#1399AA
cyan dark-3#0F7886
cyan dark-4#0B5761
cyan dark-5#07363C
magenta light-4#F8B5F8
magenta light-3#F48FF4
magenta light-2#F06AF0
magenta light-1#ED45ED
magenta#E920E9
magenta dark-1#CC14CC
magenta dark-2#A710A7
magenta dark-3#820D82
magenta dark-4#5D095D
magenta dark-5#380538
yellow light-4#F3F8D3
yellow light-3#F9F1AD
yellow light-2#F6EB87
yellow light-1#F3E461
yellow#F0DE3B
yellow dark-1#EDD815
yellow dark-2#CAB70F
yellow dark-3#A4950D
yellow dark-4#7E730A
yellow dark-5#585007
orange light-4#FFE4CB
orange light-3#FFCFA2
orange light-2#FFBA7A
orange light-1#FFA551
orange#FF9028
orange dark-1#FE7B00
orange dark-2#D56700
orange dark-3#AD5300
orange dark-4#844000
orange dark-5#5B2C00
viride light-4#CFE8E0
viride light-3#B4DBCE
viride light-2#98CEBD
viride light-1#7DC0AB
viride#61B399
viride dark-1#4C9F85
viride dark-2#3F836E
viride dark-3#326857
viride dark-4#254C40
viride dark-5#173129
amaranth light-4#F7B6C6
amaranth light-3#F392AA
amaranth light-2#EE6D8D
amaranth light-1#EA4971
amaranth#E62454
amaranth dark-1#CA1743
amaranth dark-2#A61337
amaranth dark-3#810F2B
amaranth dark-4#5C0B1F
amaranth dark-5#380613
mole light-4#EBE3D8
mole light-3#DDCFBD
mole light-2#CFBCA3
mole light-1#C1A888
mole#B3956D
mole dark-1#A38155
mole dark-2#886C47
mole dark-3#6D5739
mole dark-4#52412B
mole dark-5#372C1D
airforce light-4#CBD9E0
airforce light-3#B2C7D1
airforce light-2#98B4C2
airforce light-1#7FA2B2
airforce#658FA3
airforce dark-1#537A8C
airforce dark-2#446372
airforce dark-3#354D59
airforce dark-4#26373F
airforce dark-5#162126
meadow light-4#B5F7D6
meadow light-3#90F2C1
meadow light-2#6BEEAD
meadow light-1#47EA98
meadow#22E684
meadow dark-1#17C970
meadow dark-2#13A45B
meadow dark-3#0E7F47
meadow dark-4#0A5B32
meadow dark-5#06361E
grey light-4#F7F7F7
grey light-3#E2E2E2
grey light-2#CECECE
grey light-1#B9B9B9
grey#A5A5A5
grey dark-1#919191
grey dark-2#7C7C7C
grey dark-3#686868
grey dark-4#535353
grey dark-5#3F3F3F
primary#2196F3
secondary#22AC72
success#12AD12
warning#FCCC2E
error#DF2C29
transparenttransparent
white#FFFFFF
black#000000

Colors css variables

Every color of the Axentix palette generates a css variable.
This is allowing you to overload a color at any time.