How to generate a stepped gradation between two specific colors into separate classes

Question

I need help figuring out how to create a stepped gradation between two specific colors into separate classes using SASS and the available color functions.

Starting with any given color, for example #f1a100 and an end color #2ec3fb, generate several classes that are a stepped gradation between the two.

enter image description here

I'm starting with this code, but obviously doesn't produce the desired result. How do I to step between two specific colors?

$startColor: #f1a100;
@for $i from 1 through 8 {
    &.m#{$i} {
        background: adjust-hue($startColor, 0 - ($i * 10));
    }
}

This code produces the following result:

enter image description here

I've read it but couldn't understand why you're not using the CSS gradient, hence my comment. — Itay, Sep 14 '13 at 06:42
@Itay I think he doesn't need gradients. He need several colors that are between two ones — el Dude, Sep 14 '13 at 09:10
@EL Yeah but he's using them for CSS classes therefore I don't understand why he isn't using normal CSS — Itay, Sep 14 '13 at 09:10
@Itay I think, he/she need solid colors from several parts of a gradient map — el Dude, Sep 14 '13 at 12:51

score 2 · Accepted Answer · edited May 23 '17 at 12:19

Found this formula, which is wrong (changed 200 to 255), and modified it to the following:

div {
    $startColor: #f1a100;
    $endColor: #2ec3fb;
    $divider: 255;
    $steps: 10;
    $scaler: $divider / $steps;
    @for $i from 1 through $steps {
        $scaledStep: $i * $scaler;
        $redStart: red($startColor);
        $greenStart: green($startColor);
        $blueStart: blue($startColor);
        $redEnd: red($endColor);
        $greenEnd: green($endColor);
        $blueEnd: blue($endColor);
        $R: ($redStart * (($divider - $scaledStep) / $divider)) + ($redEnd * ($scaledStep / $divider));
        $G: ($greenStart * (($divider - $scaledStep) / $divider)) + ($greenEnd * ($scaledStep / $divider));
        $B: ($blueStart * (($divider - $scaledStep) / $divider)) + ($blueEnd * ($scaledStep / $divider));

        &.m#{$i} {
            background: rgb($R, $G, $B);
        }
    }
}

This produces the correct stepped gradation between two specific colors in SASS:

enter image description here

the above code will not compile if any of the RGB compotents in the start or end color are either 0 or 255. — Patrick Klug, Aug 28 '15 at 01:46

vals · Answer 2 · 2013-09-14T12:04:22.817

1

To interpolate between 2 values, the formula is slightly different. You would need something like that

$startColor: #f1a100;
$endColor: #2ec3fb;
$startHue: hue($startColor);
$endHue: hue($endColor);

@for $i from 1 through 8 {
    &.m#{$i} {
        background: adjust-hue($startColor, startHue + ((endHue - startHue) * ($i / 8)));
    }
}

Assuming that your saturation and light values are somewhat similar

edited Sep 14 '13 at 12:04

answered Sep 14 '13 at 06:34

vals

61,425
11
89
138

as a SASS newcomer I'm trying to use this but this doesn't seem to be valid sass: invalid operands for multiplication on line 8 at column 58 – Patrick Klug Aug 28 '15 at 01:25

How to generate a stepped gradation between two specific colors into separate classes

2 Answers2