# Full color spectrum

**URL:** <https://discourse.processing.org/t/full-color-spectrum/23171>\
**Category:** Coding Questions\
**Created:** [August 10, 2020, 7:29pm UTC](https://discourse.processing.org/t/full-color-spectrum/23171 "2020-08-10T19:29:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [August 10, 2020, 7:29pm UTC](https://discourse.processing.org/t/full-color-spectrum/23171/1 "2020-08-10T19:29:46Z")

</div>

So I’m experimenting with color pickers for my projects and so far I managed to make RGB sliders and an [HSB color picker](https://www.openprocessing.org/sketch/943725) (pretty happy with this one). Im pleased with both of these but another thing I want to do is a color picker with only one 2D slider. So I tried making somehing like this (I know this doesn’t have brown and gray but I have kind of a plan for those) : [https://www.colortools.net/color\_spectrum.html](https://www.colortools.net/color_spectrum.html). With this code:

```auto
void setup() {
  surface.setSize(460, 140);
  surface.setLocation(displayWidth - 465, displayHeight - 145);
  surface.setAlwaysOnTop(true);
  fullScreen();
  colorMode(HSB,360,100,100);
}

void draw() {
  background(255,0,100);

  //main frame
  noFill();
  stroke(0);
  rect(0, 0, width - 1, height - 1);

  //exit button
  noFill();
  rect(400, 20, 40, 20);
  fill(0,100,100);
  if (mouseX > 400 && mouseY > 20 && mouseX < 440 && mouseY < 40) {
    rect(400, 20, 40, 20);
    stroke(0,0,100);
  } else stroke(0,0,0);
  line(415, 25, 425, 35);
  line(415, 35, 425, 25);

//this is the code that draws the spectrum
  for (int h = 20; h < 380; h++) {
    for (int s = 20; s < 120; s++) {
      for (int b = 20; b < 120; b++) {
        color c = color(h - 20,s - 20,b - 20);
        set(h,s,c);
      }
    }
  }
  
}

void mouseReleased() {
  if (mouseX > 400 && mouseY > 20 && mouseX < 440 && mouseY < 40) exit();
}

```

This looks pretty good but it doesn’t have black. And I couldn’t quite figure that out. Will appreciate any help!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 10, 2020, 8:48pm UTC](https://discourse.processing.org/t/full-color-spectrum/23171/2 "2020-08-10T20:48:58Z")

</div>

Try this:

```auto
color c = color(h, b, s);

```

`:)`

I made some changes testing but will also work in your code if you swap b and s:

```auto
  //this is the code that draws the spectrum
  for (int h = 0; h < 360; h++) {
    for (int s = 0; s < 100; s++) {
      for (int b = 0; b < 100; b++) {
        color c = color(h, b, s);
        set(h, s, c);
      }
    }
  }

```

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bcfb21da06e660632b02c006062742288683b91b.png)

And then you can do this with 2 spectrum loops:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/988c2cc00f0d60d8459dbfcf78f44b0a123c6beb.jpeg)

I have come across the same colour banding in other examples:  
[https://graphicdesign.stackexchange.com/questions/13494/color-spectrum-image-how-to-create](https://graphicdesign.stackexchange.com/questions/13494/color-spectrum-image-how-to-create)  
[https://wiki.neogeodev.org/index.php?title=File:Hsv\_full.png](https://wiki.neogeodev.org/index.php?title=File:Hsv_full.png)

I explored this way back… I may look into my notes if I have time.

`:)`

---

<div class="post-metadata">

**Author:** ![qewer3322](https://avatars.discourse-cdn.com/v4/letter/q/e19adc/32.png) [@qewer3322](https://discourse.processing.org/u/qewer3322)\
**Post date:** [August 11, 2020, 7:01am UTC](https://discourse.processing.org/t/full-color-spectrum/23171/3 "2020-08-11T07:01:52Z")

</div>

Not gonna lie, for loops are pretty interesting. Never thought that would work. Thanks so much!