Semantic-Rainbow is a gem that gives you easy-to-remember SASS variables for every main HSL value in the rainbow.
HSL has 360 degrees on the colour wheel; Semantic-Rainbow creates a SASS variable for every 10 degrees throughout it.
The color names have been kept as simple and straight-forward as possible.
To use any one of these solid colours, just use its' name as you would a SASS variable.
color: $violet; //$violet is the same as using hsl(270, 100%, 50%) background: $teal; //$teal is the same as using hsl(150, 100%, 50%)
For mixing these colours together and getting a red-like orange tone, or an orange-like red, use the format of
color: $orange-red; background: $violet-magenta;
How to Install
If you're using Rails then just add
gem "semantic-rainbow" to your gemfile, and then use the
Then in your SCSS file import the file:
/* app/assets/stylesheets/application.css.scss */ @import "semantic-rainbow"; @import "other-file-that-will-use-it";
Creative Commons License
Semantic Rainbow by Brandon J McKay is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.
Tweet me @brandonjmckay.