Skip to content

Instantly share code, notes, and snippets.

@GregPK
Created August 9, 2013 10:10
Show Gist options
  • Save GregPK/6192598 to your computer and use it in GitHub Desktop.
Save GregPK/6192598 to your computer and use it in GitHub Desktop.
Generates #{n} classes in the form of "tag{#n}" where the class has a distinct background color and a dynamically calculated text color complimenting the background for readability. This can be used to generate a random class for a tag. Three color set included (generated at http://tools.medialab.sciences-po.fr/iwanthue/)
$tag_colors_intense: #0563BB #C96408 #C70078 #10998F #649218 #C85CEF #CC8A90 #244D6F #9EA9CB #4D286B #EA9B5E #F95BC8 #9B0046 #783DB5 #72B2F7
$tag_colors_green: #49B51B #6E8163 #B0FBB0 #5D821A #2AFD5A #2FA87E #90AB66 #23BC58 #92EB61 #7EEC8A #8ABE2B #8CB68D #6BDF23 #1AC67F #8CEBB7
$tag_colors_blue: #4CE68D #63825C #7AE42C #5C9020 #D2EE95 #54B47A #AADB4B #AED7A3 #4BB33A #398D42 #65E55B #9DBB6D #60813D #A2D66A #88E593
$tag_colors: $tag_colors_intense
@mixin tag($n)
$color: nth($tag_colors, $n)
background: $color
@if lightness($color) > 60
color: #111
@else
color: #eee
@for $i from 1 through length($tag_colors)
.tag#{$i}
@include tag($i)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment