Auto-generate contrasted color pairs with LESS

auto-colorize.less

@contrast-level: 85%;

.auto-colorize(@text-color) {
  color: @text-color;

  // pick the color with the most contrast to our text color
  // _should_ at least be readable with light colors
  background-color: contrast(
    @text-color,
    shade(@text-color, @contrast-level),
    tint(@text-color, @contrast-level)
  );
}

/* Examples */

.mc-monza {
  .auto-colorize(#CF000F);
}

.mc-chestrose {
  .auto-colorize(#D24D57);
}

.mc-marino {
  .auto-colorize(#446CB3);
}