All the HSL values of the rainbow available as SASS variables.
Ruby CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

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

Creative Commons License
Semantic Rainbow by Brandon J McKay is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Tweet me @brandonjmckay.