# Hue with specific colors

**URL:** <https://discourse.processing.org/t/hue-with-specific-colors/6297>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [December 4, 2018, 8:33pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297 "2018-12-04T20:33:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Missmew72](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@Missmew72](https://discourse.processing.org/u/Missmew72)\
**Post date:** [December 4, 2018, 8:33pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/1 "2018-12-04T20:33:26Z")

</div>

Hi, so I’m working on a school project and basically I want the option for hue in the background. I am able to get a horizontal hue with all the colours, but I was hoping to do a vertical hue with a specific set of colours. Is that possible and if so how do I do that?

---

<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:** [December 4, 2018, 8:34pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/2 "2018-12-04T20:34:58Z")

</div>

Hi,

I don’t quite understand what you want to do. Maybe you can post a simple picture made with paint or photoshop?

Also post the code you already have, people will be more willing to answer.

---

<div class="post-metadata">

**Author:** ![Missmew72](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@Missmew72](https://discourse.processing.org/u/Missmew72)\
**Post date:** [December 4, 2018, 8:39pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/3 "2018-12-04T20:39:50Z")

</div>

Basically my main concern is limiting the colors to shades of light blue/green, rather than all of the available options. The code I’m following comes directly from the processing website,

```auto
int barWidth = 20;
int lastBar = -1;

void setup() 
{
  size(640, 360);
  colorMode(HSB, height, height, height);  
  noStroke();
  background(0);
}

void draw() 
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    fill(mouseY, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

```

---

<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:** [December 4, 2018, 8:44pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/4 "2018-12-04T20:44:54Z")

</div>

Please edit your last post and format your code.

You can use the map function to set (and limit) the hue (so the color). For example limiting the hue between the values 100 and 200 give the following result:

```auto
int barWidth = 20;
int lastBar = -1;

void setup()
{
  size(640, 360);
  colorMode(HSB, height, height, height);
  noStroke();
  background(0);
}

void draw()
{
  int whichBar = mouseX / barWidth;
  if (whichBar != lastBar) {
    int barX = whichBar * barWidth;
    float hue = map(mouseY, 0, height, 100, 200); // Added line
    fill(hue, height, height);
    rect(barX, 0, barWidth, height);
    lastBar = whichBar;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Missmew72](https://avatars.discourse-cdn.com/v4/letter/m/41988e/32.png) [@Missmew72](https://discourse.processing.org/u/Missmew72)\
**Post date:** [December 4, 2018, 9:06pm UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/5 "2018-12-04T21:06:32Z")

</div>

Awesome, got the exact result I wanted! Thanks!!!

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 7, 2018, 12:50am UTC](https://discourse.processing.org/t/hue-with-specific-colors/6297/6 "2018-12-07T00:50:30Z")

</div>

You might also be interested in lerpColor, which can be used to produce different hue gradients by modifying the input colors.

> **[lerpColor() / Reference](https://processing.org/reference/lerpColor_.html)**
>
> Calculates a color between two colors at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very ne…

A recent lerpColor sketch:

> [@Setting limit of random colours](https://discourse.processing.org/t/setting-limit-of-random-colours/6051/6):
>
> Another option is to choose a random point on a color spectrum using lerpColor() and passing it two colors and a random value between 0-1. [https://processing.org/reference/lerpColor\_.html](https://processing.org/reference/lerpColor_.html) color from = color(204, 102, 0); color to = color(0, 102, 153); void setup() { frameRate(1); } void draw() { // random background in color range color randc = lerpColor(from, to, random(1)); background (randc); // draw color bar for(int i=0; i\<10; i++){ fill(lerpColor(from, to, i/10.0)); r…