Auto-generating Sass map and function to create a series of modular colour classes, for quick extension to a site's theme.

modular-colours.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// map format:
// $base: (
//  $color: $value [background-color, text-color]
// )

$cells: (
	'orange': (
		'base': (rgb(241, 101, 33), #eee),
		'dark': (rgb(152, 61, 33), #eee),
		'light': (rgb(240, 172, 139), #444),
		'x-light': (rgb(241, 210, 196), #444) 
	),
	'blue': (
		'base': (rgb(64, 76, 88), #eee),
		'dark': (rgb(35, 41, 48), #eee),
		'light': (rgb(169, 184, 210), #444),
		'x-light': (rgb(230, 232, 236), #444)
	),
	'purple': (
		'base': (rgb(108, 62, 119), #eee),
		'dark': (rgb(50, 29, 55), #eee),
		'light': (rgb(196, 177, 196), #444),
		'x-light': (rgb(226, 216, 230), #444)
	),
	'red': (
		'base': (rgb(228, 39, 38), #eee),
		'dark': (rgb(153, 39, 38), #eee),
		'light': (rgb(239, 169, 146), #444),
		'x-light': (rgb(247, 210, 186), #444)
	),
	'green': (
		'base': (rgb(88, 124, 67), #eee),
		'dark': (rgb(51, 71, 38), #eee),
		'light': (rgb(179, 191, 149), #444),
		'x-light': (rgb(211, 215, 201), #444)
	)
);
 
@each $base, $tint in $cells {
 @each $color, $value in $tint {
   .#{$base}.#{$color} {
     background-color: nth($value, 1);
     color: nth($value, 2);
   }
 }
}

output.css

.orange.base {
  background-color: #f16521;
  color: #eee;
}

.orange.dark {
  background-color: #983d21;
  color: #eee;
}

.orange.light {
  background-color: #f0ac8b;
  color: #444;
}

.orange.x-light {
  background-color: #f1d2c4;
  color: #444;
}

.blue.base {
  background-color: #404c58;
  color: #eee;
}

.blue.dark {
  background-color: #232930;
  color: #eee;
}

.blue.light {
  background-color: #a9b8d2;
  color: #444;
}

.blue.x-light {
  background-color: #e6e8ec;
  color: #444;
}

.purple.base {
  background-color: #6c3e77;
  color: #eee;
}

.purple.dark {
  background-color: #321d37;
  color: #eee;
}

.purple.light {
  background-color: #c4b1c4;
  color: #444;
}

.purple.x-light {
  background-color: #e2d8e6;
  color: #444;
}

.red.base {
  background-color: #e42726;
  color: #eee;
}

.red.dark {
  background-color: #992726;
  color: #eee;
}

.red.light {
  background-color: #efa992;
  color: #444;
}

.red.x-light {
  background-color: #f7d2ba;
  color: #444;
}

.green.base {
  background-color: #587c43;
  color: #eee;
}

.green.dark {
  background-color: #334726;
  color: #eee;
}

.green.light {
  background-color: #b3bf95;
  color: #444;
}

.green.x-light {
  background-color: #d3d7c9;
  color: #444;
}