Skip to content

Instantly share code, notes, and snippets.

@rileyjshaw
Created October 16, 2013 08:48
Show Gist options
  • Save rileyjshaw/7004687 to your computer and use it in GitHub Desktop.
Save rileyjshaw/7004687 to your computer and use it in GitHub Desktop.
A Pen by Riley Shaw.

Color jump!

Jump from x to y in z steps. I created this to automate color picking during a MasterCard hackathon. Cleaned it up later, I hope it's useful!

Usage: include function "bound" and mixin "color-steps"

+color-steps($steps, $color1, $color2)

A Pen by Riley Shaw on CodePen.

License.

- for i in 1..3 do
div.out
- for i in 1..8 do
div
@import "compass"
@function rgb-bind($num)
@return min(max($num, 0), 255)
=color-steps($steps, $color1, $color2: #fff)
$or: red($color1)
$og: green($color1)
$ob: blue($color1)
$dr: $or - red($color2)
$dg: $og - green($color2)
$db: $ob - blue($color2)
@for $i from 0 to $steps
div:nth-child(#{$i + 1})
$r: rgb-bind($or - $dr*$i/($steps - 1))
$g: rgb-bind($og - $dg*$i/($steps - 1))
$b: rgb-bind($ob - $db*$i/($steps - 1))
background-color: rgb($r, $g, $b)
body
margin: 0
div.out
float: left
width: 33.3333333333333%
box-sizing: border-box
padding: 3.3333333333333%
&:nth-child(1)
+color-steps(8, #88aadd, #7d18b0)
&:nth-child(2)
+color-steps(8, #ff0000, #ff9000)
&:nth-child(3)
+color-steps(8, #88ddaa, #eefaf2)
div
width: 100%
height: 54px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment