颜色
在数码世界中，当我们要介绍一个颜色时，我们需要有一定的精确度。单纯说“嘿，你能把那圆形变成蓝绿色吗？”并不足够。在这，颜色可以被定义为在一个范围内的数字。让我们从最简单的范例开始：黑白色或灰渐色。0 为纯黑色，255 为纯白色。在两者之间任何数字 – 50、87、162、209 等等 – 都是介于黑与白之间的灰色。
只要在任何东西被画在画布上之前使用 stroke() 及 fill() 函数，我们能设置任何图形的颜色。我们也能使用 background() 函数来设定窗口的背景颜色。如下范例。
background(255); // 设置背景颜色为白色
stroke(0); // 设置外线颜色为黑色
fill(150); // 设置填充色为灰色
rect(50,50,75,100); // 绘制四方形
使用 noStroke() 及 noFill()函数将会分别去除外线色灰填充色。我们直觉上可能会以为“ stroke(0) ”表示没有外线，可是我们必须记得 0 在这并不代表“无”，然而是代表黑色。此外，我们必须记得不要同时去除noStroke() 及 noFill() 不然不会有任何图形出现在画布上！
以此同时，如果我们绘制两个图形，p5.js 将会使用最近（代码内从上至下）所定义的外线色及填充色值。
RGB 颜色值
您还记得手指绘画吗？选择混合三原色，我们能混合出任何颜色。同时混合所有颜色的结果是个浑浊的褐色。添加越多颜料，给颜色将会变得更暗。数码颜色也是使用三原色的混合来构造新的颜色的，但是它和颜料的混合原理不一样。首先，其原色为：红、绿、蓝（也为 RGB 颜色，Red、Green、Blue）。而当您在混合荧幕上的颜色时，您将混合的是光而不是颜料，因此它的混合原理并不一样。
- 红 + 绿 = 黄
- 红 + 蓝 = 紫
- 绿 + 蓝 = 青（蓝绿色）
- 红 + 绿 + 蓝 = 白
- 无色 = 黑
这假设所有色颜色都为最亮的亮度，但是您也能同时使用一系列的颜色值，因此一些红加上一些绿再加上一些蓝将等于灰，而一点红加上一点蓝将等于深紫色。虽然这可能需要一点时间来习惯，随着您编程及使用 RGB 颜色值来试验的经验越多，您会对它越熟悉，就如使用您的手指来混合颜色一样。当然您不能单纯说“混合一些红与一点蓝”，您必须提供确切的数值。就如灰渐值，个别颜色的值也是由介于 0（不使用任何该颜色）与 255（完全使用该颜色）之间，而他们的顺序为红（R）、绿（G）及蓝（B）。通过更多的试验您将会对 RGB 颜色更加熟悉，不过接下来我们将介绍一些使用常用颜色的代码。
颜色透明度
除了个别颜色的红、绿、蓝值之外，我们也能提供多一个可选性的值，此值被称为该颜色的 “alpha” 值。Alpha 代表透明度，当您要绘制多个重叠部分透视的图形时，透明度在这就特别有用。一个图像的 alpha 值有时也会被称为该图像的 “alpha channel”。
我们必须记得像素并不是真的透明的，这单纯是个使用混合颜色所达成的便利错觉。p5.js 在幕后将会使用该颜色的数值再加上一定百分率的另外一个颜色，创作出混合颜色的视觉错觉。（如果您有兴趣编程一个“粉色镜片”，您可以从这开始。）
Alpha 值也是介于 0 与 255 之间，0 代表完全透明而 255 代表完全不透明。
自定义颜色值范围
介于 0 与 255 之间的 RGB 颜色值并不是 p5.js 唯一定义颜色的方法，事实上，我们能使用多种方法来定义颜色。比如说，您可能比较偏向于使用 0 至 100（如百分比）来定义颜色。为此您可以使用colorMode().
colorMode(RGB,100);
以上函数表示：“OK，我们要使用红、绿、蓝值来定义颜色。而他们的值将介于 0 至 100 之间。
虽然一般上这么做不会提供任何便利，您可以为个别颜色值提供不同的数值范围：
colorMode(RGB,100,500,10,255);
这时此函数表示：“红色值将会是介于 0 至 100 之间，绿色值将会是介于 0 至 500 之间，蓝色值将会是介于 0 至 10 之间，而 alpha 至将会是介于 0 至 255 之间。
最后，虽然您通常在编程时只需要用到 RGB 色值，您也能使用 HSB（色调、饱和度及亮度）模式来定义颜色。简单来说，HSB 色值使用方法如下：
- 色调—色调值，默认上介于 0 至 360 之间。
- 饱和度—该颜色的饱和度，默认上介于 0 至 100 之间。
- 亮度—该颜色的亮度，默认上介于 0 至 100 之间。
使用函数 colorMode() 您就能设定您自选的数字范围。有些人会比较偏好使用介于 0 至 360 之间的数值来定义色调（就如色轮的 360 度一样）及 0 至 100 之间的数值来定义饱和度及亮度（介于 0% 至 100%）。