diff --git a/less/bootstrap.less b/less/bootstrap.less
index d115e956711de1527de7c0c57a27709aca4497ab..69d649a339490d3d854212e17378940bf6bfdf0c 100644
--- a/less/bootstrap.less
+++ b/less/bootstrap.less
@@ -25,6 +25,7 @@
 @import "code.less";
 @import "forms.less";
 @import "tables.less";
+@import "color.less";
 
 // Components: common
 @import "sprites.less";
diff --git a/less/colors.less b/less/colors.less
new file mode 100644
index 0000000000000000000000000000000000000000..1dd2a5c78a3e0aa887f1bf714301dcbfae8a372d
--- /dev/null
+++ b/less/colors.less
@@ -0,0 +1,240 @@
+// Color.less
+// basic background colors or font colors
+// --------------------------------------------------------
+
+//Mixin for the matching contrast Color
+
+.checkContrast (@a) when (lightness(@a) >= 50%) {
+  color: black;
+}
+.checkContrast (@a) when (lightness(@a) < 50%) {
+  color: white;
+}
+
+
+
+div.blue {
+	background-color:@blue;
+
+	&.hovered:hover{
+		 background-color: darken(@blue, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@blue, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@blue);
+	}
+}
+div.blueDark {
+	background-color:@blueDark;
+
+	&.hovered:hover{
+		 background-color: darken(@blueDark, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@blueDark, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@blueDark);
+	}
+}
+div.green {
+	background-color:@green;
+
+	&.hovered:hover{
+		 background-color: darken(@green, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@green, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@green);
+	}
+}
+div.red {
+	background-color:@red;
+
+	&.hovered:hover{
+		 background-color: darken(@red, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@red, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@red);
+	}
+}
+div.yellow {
+	background-color:@yellow;
+
+	&.hovered:hover{
+		 background-color: darken(@yellow, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@yellow, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@yellow);
+	}
+}
+div.orange {
+	background-color:@orange;
+
+	&.hovered:hover{
+		 background-color: darken(@orange, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@orange, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@orange);
+	}
+}
+div.pink {
+	background-color:@pink;
+
+	&.hovered:hover{
+		 background-color: darken(@pink, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@pink, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@pink);
+	}
+}
+div.purple {
+	background-color:@purple;
+
+	&.hovered:hover{
+		 background-color: darken(@purple, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@purple, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@purple);
+	}
+}
+div.black {
+	background-color:@black;
+
+	&.hovered:hover{
+		 background-color: darken(@black, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@black, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@black);
+	}
+}
+div.grayDarker {
+	background-color:@grayDarker;
+
+	&.hovered:hover{
+		 background-color: darken(@grayDarker, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@grayDarker, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@grayDarker);
+	}
+}
+div.grayDark {
+	background-color:@grayDark;
+
+	&.hovered:hover{
+		 background-color: darken(@grayDark, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@grayDark, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@grayDark);
+	}
+}
+div.gray {
+	background-color:@gray;
+
+	&.hovered:hover{
+		 background-color: darken(@gray, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@gray, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@gray);
+	}
+}
+div.grayLight {
+	background-color:@grayLight;
+
+	&.hovered:hover{
+		 background-color: darken(@grayLight, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@grayLight, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@grayLight);
+	}
+}
+div.grayLighter {
+	background-color:@grayLighter;
+
+	&.hovered:hover{
+		 background-color: darken(@grayLighter, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@grayLighter, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@grayLighter);
+	}
+}
+div.white {
+	background-color:@white;
+
+	&.hovered:hover{
+		 background-color: darken(@white, 5%);
+	}
+
+	&.bordered{
+		border: 1px solid darken(@white, 10%);
+	}
+	
+	&.contrast, .contrast{
+		.checkContrast(@white);
+	}
+}
\ No newline at end of file