COLORS

There are 23 pre-defined colors inside the root of JTB_MD. 8 of them are main colors, the others are lightened or darkened versions of it.

Main colors

The colors and extended versions in JTB_MD are like following:

JTB Navy
jtb_navy_dark
(#000000)
jtb_navy
(#08111C)
jtb_navy_light
(#11243C)
JTB Blue
jtb_blue_dark
(#385A7C)
jtb_blue
(#819CC1)
jtb_blue_light
(#CCD6E8)
JTB Gray
jtb_gray_dark
(#4D5C69)
jtb_gray
(#B6C1C9)
jtb_gray_light
(#DDDDDD)
JTB Green
jtb_green_dark
(#027E58)
jtb_green
(#03BB85)
jtb_green_light
(#CCFFD9)
JTB Red
jtb_red_dark
(#F68888)
jtb_red
(#F24F50)
jtb_red_light
(#FBD0D0)
JTB Yellow
jtb_yellow_dark
(#E69900)
jtb_yellow
(#FFBB33)
jtb_yellow_light
(#FFEFCC)
JTB Orange
jtb_orange_dark
(#FF3C00)
jtb_orange
(#FF7043)
jtb_orange_light
(#FFD8CC)
JTB White
jtb_white
(#FFFFFF)
jtb_white_dark
(#F5F5FF)

Text coloring

You can apply the colors to other elements via following classes (We are going to show with texts for exampling.)

.jtbNavy

.jtbBlue

.jtbGray

.jtbWhite

.jtbGreen

.jtbRed

.jtbYellow

.jtbOrange

			Copy
			<p class='jtbNavy'>.jtbNavy</p>
<p class='jtbBlue'>.jtbBlue</p>
<p class='jtbGray'>.jtbGray</p>
<p class='jtbWhite jtbNavy_bg'>.jtbWhite</p>
<p class='jtbGreen'>.jtbGreen</p>
<p class='jtbRed'>.jtbRed</p>
<p class='jtbYellow'>.jtbYellow</p>
<p class='jtbOrange'>.jtbOrange</p>
		

Background coloring

You can apply the colors to other elements as background coloring via following classes (We are going to show with texts for exampling.)

.jtbNavy_bg

.jtbBlue_bg

.jtbGray_bg

.jtbWhite_bg

.jtbGreen_bg

.jtbRed_bg

.jtbYellow_bg

.jtbOrange_bg

			Copy
			<p class='jtbNavy_bg jtbWhite'>.jtbNavy_bg</p>
<p class='jtbBlue_bg'>.jtbBlue_bg</p>
<p class='jtbGray_bg'>.jtbGray_bg</p>
<p class='jtbWhite_bg'>.jtbWhite_bg</p>
<p class='jtbGreen_bg'>.jtbGreen_bg</p>
<p class='jtbRed_bg'>.jtbRed_bg</p>
<p class='jtbYellow_bg'>.jtbYellow_bg</p>
<p class='jtbOrange_bg'>.jtbOrange_bg</p>