Open In App

p5.js Color Complete Reference

Last Updated : 11 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Create color and store it into variables of color datatype. The parameters of color are RGB or HSB value depending on the current colorMode() function.

Function

Description

alpha() It is used to extract the alpha value from a color or pixel array.
blue() It is used to extract the blue value from a color or pixel array.
brightness() It is used to extract the HSB brightness value from a color or pixel array.
color() It creates color and store it into variables.
green() It is used to extract the green value from a color or pixel array.
hue() It is used to extract the HSB and HSL hue value from a color or pixel array.
lerpColor() It is used to interpolate two colors to find a third color between them.
lightness() It is used to extract the HSL lightness value from a color or pixel array.
red() It is used to extract the red value from a color or pixel array.
saturation() It is used to extract the HSL and HSB saturation value from a color or pixel array.
background() It sets the color used for the background of the p5.js canvas.
clear() It is used to clear the pixels within a buffer.
fill() It is used to fill the color of the shapes.
noFill() It is used to disable the filling geometry.
noStroke() It removes the outline which is used to draw lines and borders around shapes.
stroke() It is used to draw the lines and border around the text and shapes.
erase() It subtracts all the drawings that would be done after the use of this function.
noErase() It is used to cancel the effects of the erase() function.

Previous Article
Next Article

Similar Reads

D3.js Color Schemes Diverging API Complete Reference
The D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Color Schemes Diverging: D3.js interpolateBrBG() FunctionD3.js interpolatePiYG() FunctionD3.js interpolatePRGn() FunctionD3.js interpolatePuOr(
1 min read
D3.js Color Schemes Sequential Single Hue API Complete Reference
The D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Color Schemes Sequential (Single Hue): D3.js interpolateBlues() FunctionD3.js interpolateGreens() FunctionD3.js interpolateGreys() FunctionD3.j
1 min read
D3.js Color Schemes Sequential Multi Hue API Complete Reference
The D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Color Schemes Sequential (Multi Hue): D3.js interpolateBuGn() FunctionD3.js interpolateBuPu() FunctionD3.js interpolateCividis() FunctionD3.js
1 min read
D3.js Color Schemes Categorical API Complete Reference
The D3 is an abbreviation of Data-Driven Documents, and D3.js is a resource JavaScript library for managing documents based on data. D3 is one of the most effective frameworks to work on data visualization. Color Schemes Categorical Description D3.js schemeCategory10() FunctionThe d3.schemeCategory10 method is used to return an array of ten categor
2 min read
How to change text color depending on background color using JavaScript?
The task is to set the foreground color based on the background color so that it will become visible. Here few of the important techniques are discussed. We are going to use JavaScript. Approach: First, select the random Background color(by selecting random RGB values) or a specific one.Use the YIQ formula to get the YIQ value.Depending on the YIQ
3 min read
How to change an element color based on value of the color picker value using onclick?
We can define color picker by input type="color". It provides a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format. Only colors without alpha channels are allowed. Though CSS colors have more formats, e.g. color names, func
2 min read
How to change an element color based on value of the color picker value on click?
The HTML tag <input type ="color"> provides a user interface element, that let the user specify the color with the help of the visual color picker interface or by entering the color value into the text field in #rrggbb hexadecimal format. Only simple colors (without alpha channel) are allowed though CSS colors has more formats, e.g. color nam
1 min read
How to convert 3-digit color code to 6-digit color code using JavaScript ?
In this article, we are converting a three-digit color HEX code into a six-digit color HEX code using JavaScript. To solve this problem, first, we copy the individual digits and paste them at the consecutive positions. For example - #34E will be converted into #3344EE and #E90 will be converted into #EE9900. Steps to convert 3-digit color code to 6
2 min read
How to choose background color through color picker?
In this project, we are going to change the background color with the help of the Color Picker. Glimpse of the Project: Approach: Create an HTML file in which we are going to add the text and a color picker which helps to change the background color of our web-page.Create a CSS style to give some animation effects to the web-page elements.Create a
3 min read
How to Drop fill color to change the image color using HTML and CSS ?
In this article, we are going to create a Drop fill color effect using HTML & CSS in which the image get colored when we hover over it. It appears when you hover over the image a drop of color falls over the image which changes the color of the image from gray to colored. Approach: The following approach will be implemented to Drop fill color t
4 min read