Semantic Rainbow

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.

Naming Conventions:

The color names have been kept as simple and straight-forward as possible.

• Red 0 degrees
• Orange 30 degrees
• Yellow 60 degrees
• Lime 90 degrees
• Green 120 degrees
• Teal 150 degrees
• Cyan 180 degrees
• Azure 210 degrees
• Blue 240 degrees
• Violet 270 degrees
• Magenta 300 degrees
• Pink 330 degrees

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 $red-orange or $orange-red respectively.

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 bundle command.

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.