# Hex color fill()

**URL:** <https://discourse.processing.org/t/hex-color-fill/39940>\
**Category:** Coding Questions\
**Created:** [November 30, 2022, 9:30am UTC](https://discourse.processing.org/t/hex-color-fill/39940 "2022-11-30T09:30:32Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![add](https://avatars.discourse-cdn.com/v4/letter/a/0ea827/32.png) [@add](https://discourse.processing.org/u/add)\
**Post date:** [November 30, 2022, 9:30am UTC](https://discourse.processing.org/t/hex-color-fill/39940/1 "2022-11-30T09:30:33Z")

</div>

Hi! I want the circle to be filled with hex colors depending on the quadrant where the mouse is located, but I don’t know what variables to put in the function drawCircle(), the program only works with RGB. so, what should I enter in the brackets from drawCircle() and fill()?

```auto
void setup() {
size(1200, 600);
 background(200);
}
  
void draw(){
   if(mouseX > width/2)
      if(mouseY >height/2) drawCircle(#DB6C6C);
                      else drawCircle(#84D4DE);
   else if(mouseY> height/2) drawCircle(#2E3DBF);
                    else drawCircle(#FDFF95);
}                     
 void drawCircle(int r,int g, int b){
 stroke (0);
  circle (mouseX,mouseY,60);
  fill(r,g,b);
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 30, 2022, 11:03am UTC](https://discourse.processing.org/t/hex-color-fill/39940/2 "2022-11-30T11:03:36Z")

</div>

Hi @add,

if you really need to do it with that kind of color notation values, you can do it like that …  
(Also, the fill needs to be set before using it)

Cheers  
— mnse

```auto
void setup() {
  size(1200, 600);
  background(200);
}

void draw() {
  if (mouseX > width/2)
    if (mouseY >height/2) drawCircle(#DB6C6C);
    else drawCircle(#84D4DE);
  else if (mouseY> height/2) drawCircle(#2E3DBF);
  else drawCircle(#FDFF95);
}                     

void drawCircle(color col) {
  stroke (0);
  fill(col); // set before circle call
  circle (mouseX, mouseY, 60);
}

```

Further info about fill …

> **[Reference](https://processing.org/reference/fill_.html)**
>
> Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color …

---

<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 30, 2022, 11:54am UTC](https://discourse.processing.org/t/hex-color-fill/39940/3 "2022-11-30T11:54:22Z")

</div>

Hello @add ,

Your function is expecting 3 variables for color:

> [@add](#):
>
> void drawCircle(int r,int g, int b)

This will work:

```auto
drawCircle(0xDB, 0x6C, 0x6C); 

```

You can simplify and just pass one variable for color.

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/9/a9b74a98904341af5656315db0d9a25977c7dedc.png)

There are lots of resources (references, examples, tutorials) here:  
[https://processing.org/](https://processing.org/)

I encourage you to explore this resources!  
You will learn a lot along the way.

References:

> **[color / Reference](https://processing.org/reference/color_datatype.html)**
>
> Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.…

That is just one… there are a a lot more resources for color.

`:)`