# RGB Colour Squares

**URL:** <https://discourse.processing.org/t/rgb-colour-squares/15266>\
**Category:** Coding Questions\
**Created:** [November 5, 2019, 9:27pm UTC](https://discourse.processing.org/t/rgb-colour-squares/15266 "2019-11-05T21:27:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Civil](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@Civil](https://discourse.processing.org/u/Civil)\
**Post date:** [November 5, 2019, 9:27pm UTC](https://discourse.processing.org/t/rgb-colour-squares/15266/1 "2019-11-05T21:27:42Z")

</div>

So I thought a fun little thing to do would be to draw some squares using RGB and the simple double for loop. However, there are 3 different combinations that you can do:

Iterate Red and Green, leave Blue 255  
Iterate Red and Blue, leave Green 255  
Iterate Green and Blue, leave Red 255

What I also noticed is that these squares can be nicely lined up, and you end up with something along these lines:

 ![java_T6aO2NOT5p](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1123e9824eae4f559d41ccdb5d47e913c7d8afd8.jpeg)

However you will notice that since there are only 3 combinations (additionally proven from 3!2 = 3), this leaves a gap, which would be where yellow sits. You could implement something along these lines, but I feel it looks a little wrong:

[![](https://i.imgur.com/Lqz7yAq.png) ](https://i.imgur.com/Lqz7yAq.png)  
(Leaving link as I am limited to one image for this post)

I am just wondering if some people have some insight as to how to determine the proper coloured square to fit into that spot. I also have some suspicion that this is not actually possible, just by the nature of the RGB system, and should be more appropriately displayed as a circle, connecting the two yellow sections.

If people want my current code, I have no problem sharing it!

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 5, 2019, 9:56pm UTC](https://discourse.processing.org/t/rgb-colour-squares/15266/2 "2019-11-05T21:56:56Z")

</div>

If each corner has to represents a primary colour, the rectangle shape doesn’t seem to fit unless you break loose from the ‘corner idea’. It’s not without reason that they often use [triangles](https://duckduckgo.com/?q=colour+triangle&t=ffab&iax=images&ia=images) to represent colour systems such as RGB. You seem to be aware of this though, and as I understand it you’re trying to experiment with the possibilities.

It might be inspiring to study some other colour systems. There are a lot of interesting ones out there which never became as famous as RGB. Perhaps one of these is playing around with a rectangle shape as well to represent a colour spectrum.

ps. If you’re really fond of your ‘corner idea’, perhaps you could use the right bottom for dark colours/shade?

---

<div class="post-metadata">

**Author:** ![Civil](https://avatars.discourse-cdn.com/v4/letter/c/57b2e6/32.png) [@Civil](https://discourse.processing.org/u/Civil)\
**Post date:** [November 5, 2019, 10:59pm UTC](https://discourse.processing.org/t/rgb-colour-squares/15266/3 "2019-11-05T22:59:58Z")

</div>

Yes, I rather feared as much. Just trying some stuff out, never did too much colour theory. Was thinking where HSB might take me, but I think it won’t be that interesting. Looking into other colour schematics would be interesting!

Doubt I’ll do the dark bottom for dark colours/shades, but I will probably look into making this into some sort of ring or circle, or a triangle like you suggested.

Thank you for your input!

---

<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:** [November 7, 2019, 11:32am UTC](https://discourse.processing.org/t/rgb-colour-squares/15266/4 "2019-11-07T11:32:01Z")

</div>

HSB is fun to work with! I can easily wrap color around using the HSV color wheel.

> **[Color wheel](https://en.wikipedia.org/wiki/Color_wheel)**
>
> A color wheel or color circle is an abstract illustrative organization of color hues around a circle, which shows the relationships between primary colors, secondary colors, tertiary colors etc.
> Some sources use the terms color wheel and color circle interchangeably; however, one term or the other may be more prevalent in certain fields or certain versions as mentioned above. For instance, some reserve the term color wheel for mechanical rotating devices, such as color tops, filter wheels or t...

[![](https://img.youtube.com/vi/Sta1bgyRK5k/maxresdefault.jpg "Sine Waves Dancing") ](https://www.youtube.com/watch?v=Sta1bgyRK5k)

🙂

---

<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:** [November 8, 2019, 5:48am UTC](https://discourse.processing.org/t/rgb-colour-squares/15266/5 "2019-11-08T05:48:04Z")

</div>

> [@Civil](#):
>
> thinking where HSB might take me

Since HSB is circular, you can map it against an arbitrary number of corners and it will always wrap. You get a polygonal color wheel – with 4 sides, or 3 or 5 etc.