# Getting a gradient RGB line using lerp

**URL:** https://discourse.processing.org/t/getting-a-gradient-rgb-line-using-lerp/33424
**Category:** Beginners
**Created:** [November 9, 2021, 8:13pm UTC](https://discourse.processing.org/t/getting-a-gradient-rgb-line-using-lerp/33424 "2021-11-09T20:13:30Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![endymion](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@endymion](https://discourse.processing.org/u/endymion)
#### Post date: [November 9, 2021, 8:13pm UTC](https://discourse.processing.org/t/getting-a-gradient-rgb-line-using-lerp/33424/1 "2021-11-09T20:13:30Z")

</div>

So I found some code that used lerp to create a gradient between black and white and I modified it to create a gradient between red and blue, but I’d like it to span the whole RGB spectrum:

```auto
void gradient_line( color s, color e, float x, float y, float xx, float yy ) {
  for ( int i = 0; i < 100; i ++ ) {
    stroke( lerpColor( s, e, i/100.0) );
    line( ((100-i)*x + i*xx)/100.0, ((100-i)*y + i*yy)/100.0, 
      ((100-i-1)*x + (i+1)*xx)/100.0, ((100-i-1)*y + (i+1)*yy)/100.0 );
  }
}

float px, py;

void setup() {
  size(600, 600);
  px = 300;
  py = 300;
}

void draw() {
  background(128);
  gradient_line( color(255, 0, 0), color(0, 0, 255), mouseX, mouseY, px, py );
}

```

Is there a simple way to do this?

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [November 9, 2021, 8:51pm UTC](https://discourse.processing.org/t/getting-a-gradient-rgb-line-using-lerp/33424/2 "2021-11-09T20:51:11Z")

</div>

Hi,

For this, the best is to use the HSB color mode. With some minor modification to your code, you get the desired effect:

```auto
void gradient_line( float s, float e, float x, float y, float xx, float yy ) {
  for ( int i = 0; i < 100; i ++ ) {
    stroke( lerp( s, e, i/100.0), 100, 100 );
    line( ((100-i)*x + i*xx)/100.0, ((100-i)*y + i*yy)/100.0, 
      ((100-i-1)*x + (i+1)*xx)/100.0, ((100-i-1)*y + (i+1)*yy)/100.0 );
  }
}

float px, py;

void setup() {
  size(600, 600);
  colorMode(HSB, 360, 100, 100);
  px = 300;
  py = 300;
}

void draw() {
  background(128);
  gradient_line(0, 360, mouseX, mouseY, px, py );
}

```