## Submodule 16.3: Colors

• Color functions
• Color rules
• Alpha value - Transparency

### Color functions

In order to apply color to p5.js elements we use the  fill ()  function.

We can write colors in any of RGB, RGBA, Hex and supported named color strings.

In order to define the color of the border of p5.js elements we use the  stroke()  function.

We can increase or decrease the border weight by using the  strokeWeight()  function.

If we don't want our elements to be filled, we use the noFill()function, whereas if we don't want them to have border we use the  noStroke()

##### Example

Here is an example where all of the above functions are used:

function setup() {
// create canvas
createCanvas(800,500);
}
function draw () {
// set background color
background('#B1CBBB');
//use the fill function to color the triangle
fill('#EEA29A');
// use the noStroke function to remove border
noStroke();
triangle(width/2,height/2,500,400,300,400);
// use the noFill function to remove the fill of our element
noFill();
// use the stroke to change the color of the border
stroke('#D64161');
// use the strokeWeight to change the border weight
strokeWeight(5);
triangle(width/2,height/2,500,100,300,100);
}