add a style guide section, add existing colors

_sass/_colors.scss

@@ -1,9 +1,38 @@
+// brand colors
 $black:		#2f2f2f;
 $white:		#ffffff;
-
 $blue:		#1c75bc;
+
+// site colors
 $red:		#ec2227;
 $green:		#1dd68a;
-
 $gray:		#f0f0f0;
-$dark-blue:	#0b3b5a;
+$dark-blue:	#0b3b5a;
+
+// for the style guide:
+
+@function contrast-color($color, $dark, $light) {
+  @if (lightness($color) > 50) {
+    @return $dark; // Lighter backgorund, return dark color
+  } @else {
+    @return $light; // Darker background, return light color
+  }
+}
+
+$color:
+  ('black', $black),
+  ('white', $white),
+
+  ('blue', $blue),
+  ('red', $red),
+  ('green', $green),
+
+  ('gray', $gray),
+  ('dark-blue', $dark-blue);
+
+@each $name, $bgcolor in $color {
+  .color__tile--#{$name}-bg {
+    background-color: $bgcolor;
+    color: contrast-color($bgcolor, #000, #fff);
+  }
+}