0
# Color System
1

2
Comprehensive color handling with multiple color spaces (RGB, HSB, HSL), color manipulation, and advanced features like blending modes and color interpolation.
3

4
## Capabilities
5

6
### Color Creation
7

8
Functions for creating and working with colors in various formats.
9

10
```javascript { .api }
11
/**
12
 * Create a p5.Color object from color values or string
13
 * @param {...(number|string|p5.Color)} args - Color values (r,g,b), (r,g,b,a), gray, hex string, or CSS color name
14
 * @returns {p5.Color} Color object
15
 */
16
function color(...args);
17

18
/**
19
 * Set the color interpretation mode
20
 * @param {string} mode - RGB, HSB, or HSL
21
 * @param {number} [max1] - Maximum value for first component (default 255 for RGB, 360 for HSB/HSL)
22
 * @param {number} [max2] - Maximum value for second component (default 255 for RGB, 100 for HSB/HSL)
23
 * @param {number} [max3] - Maximum value for third component (default 255 for RGB, 100 for HSB/HSL) 
24
 * @param {number} [maxA] - Maximum value for alpha component (default 255 for RGB, 1 for HSB/HSL)
25
 */
26
function colorMode(mode, max1, max2, max3, maxA);
27
```
28

29
### Color Component Extraction
30

31
Functions for extracting individual color components from color objects.
32

33
```javascript { .api }
34
/**
35
 * Extract the red component from a color
36
 * @param {p5.Color|number[]|string} color - Color to extract from
37
 * @returns {number} Red component value
38
 */
39
function red(color);
40

41
/**
42
 * Extract the green component from a color
43
 * @param {p5.Color|number[]|string} color - Color to extract from
44
 * @returns {number} Green component value
45
 */
46
function green(color);
47

48
/**
49
 * Extract the blue component from a color
50
 * @param {p5.Color|number[]|string} color - Color to extract from
51
 * @returns {number} Blue component value
52
 */
53
function blue(color);
54

55
/**
56
 * Extract the alpha (transparency) component from a color
57
 * @param {p5.Color|number[]|string} color - Color to extract from
58
 * @returns {number} Alpha component value
59
 */
60
function alpha(color);
61

62
/**
63
 * Extract the hue component from a color (HSB/HSL mode)
64
 * @param {p5.Color|number[]|string} color - Color to extract from
65
 * @returns {number} Hue component value
66
 */
67
function hue(color);
68

69
/**
70
 * Extract the saturation component from a color (HSB/HSL mode)
71
 * @param {p5.Color|number[]|string} color - Color to extract from
72
 * @returns {number} Saturation component value
73
 */
74
function saturation(color);
75

76
/**
77
 * Extract the brightness component from a color (HSB mode)
78
 * @param {p5.Color|number[]|string} color - Color to extract from
79
 * @returns {number} Brightness component value
80
 */
81
function brightness(color);
82

83
/**
84
 * Extract the lightness component from a color (HSL mode)
85
 * @param {p5.Color|number[]|string} color - Color to extract from
86
 * @returns {number} Lightness component value
87
 */
88
function lightness(color);
89
```
90

91
### Color Interpolation
92

93
Functions for blending and transitioning between colors.
94

95
```javascript { .api }
96
/**
97
 * Interpolate between two colors
98
 * @param {p5.Color} c1 - First color
99
 * @param {p5.Color} c2 - Second color
100
 * @param {number} amt - Interpolation amount (0-1)
101
 * @returns {p5.Color} Interpolated color
102
 */
103
function lerpColor(c1, c2, amt);
104

105
/**
106
 * Interpolate through a palette of colors
107
 * @param {p5.Color[]} colors - Array of colors to interpolate through
108
 * @param {number} amt - Position in palette (0-1)
109
 * @returns {p5.Color} Interpolated color from palette
110
 */
111
function paletteLerp(colors, amt);
112
```
113

114
### Background and Clear
115

116
Functions for setting the canvas background and clearing content.
117

118
```javascript { .api }
119
/**
120
 * Set the background color of the canvas
121
 * @param {...(number|string|p5.Color)} args - Color value(s)
122
 */
123
function background(...args);
124

125
/**
126
 * Clear the entire canvas to transparent
127
 */
128
function clear();
129
```
130

131
### Fill and Stroke Colors
132

133
Functions already covered in drawing-shapes.md but included here for completeness.
134

135
```javascript { .api }
136
/**
137
 * Set the fill color for shapes
138
 * @param {...(number|string|p5.Color)} args - Color value(s)
139
 */
140
function fill(...args);
141

142
/**
143
 * Disable fill for shapes (transparent fill)
144
 */
145
function noFill();
146

147
/**
148
 * Set the stroke color for shape outlines
149
 * @param {...(number|string|p5.Color)} args - Color value(s)
150
 */
151
function stroke(...args);
152

153
/**
154
 * Disable stroke for shapes (no outline)
155
 */
156
function noStroke();
157
```
158

159
### Blending Modes
160

161
Functions for controlling how new pixels blend with existing canvas content.
162

163
```javascript { .api }
164
/**
165
 * Set the pixel blending mode for drawing operations
166
 * @param {string} mode - Blending mode constant
167
 * Available modes: BLEND (default), ADD, DARKEST, LIGHTEST, DIFFERENCE, 
168
 * MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT,
169
 * DODGE, BURN, SUBTRACT
170
 */
171
function blendMode(mode);
172
```
173

174
### Image Tinting
175

176
Functions for applying color tints to images.
177

178
```javascript { .api }
179
/**
180
 * Apply a color tint to subsequently drawn images
181
 * @param {...(number|string|p5.Color)} args - Tint color value(s)
182
 */
183
function tint(...args);
184

185
/**
186
 * Remove any previously applied tint
187
 */
188
function noTint();
189
```
190

191
## Types
192

193
```javascript { .api }
194
/**
195
 * Color object that stores color information
196
 */
197
class p5.Color {
198
  /**
199
   * String representation of the color
200
   * @returns {string} CSS color string
201
   */
202
  toString();
203
}
204
```
205

206
## Constants
207

208
```javascript { .api }
209
// Color mode constants
210
const RGB = 'rgb';
211
const HSB = 'hsb'; 
212
const HSL = 'hsl';
213

214
// Blend mode constants
215
const BLEND = 'source-over';
216
const ADD = 'lighter';
217
const DARKEST = 'darken';
218
const LIGHTEST = 'lighten';
219
const DIFFERENCE = 'difference';
220
const MULTIPLY = 'multiply';
221
const EXCLUSION = 'exclusion';
222
const SCREEN = 'screen';
223
const REPLACE = 'copy';
224
const OVERLAY = 'overlay';
225
const HARD_LIGHT = 'hard-light';
226
const SOFT_LIGHT = 'soft-light';
227
const DODGE = 'color-dodge';
228
const BURN = 'color-burn';
229
const SUBTRACT = 'subtract';
230
```
231

232
## Usage Examples
233

234
**Basic Color Usage:**
235
```javascript
236
function setup() {
237
  createCanvas(400, 300);
238
  
239
  // Different ways to specify colors
240
  background(220); // Grayscale
241
  fill(255, 0, 0); // RGB
242
  circle(100, 100, 80);
243
  
244
  fill('blue'); // CSS color name
245
  circle(200, 100, 80);
246
  
247
  fill('#FF00FF'); // Hex color
248
  circle(300, 100, 80);
249
  
250
  fill(color(0, 255, 0, 128)); // p5.Color with alpha
251
  circle(150, 180, 80);
252
}
253
```
254

255
**Working with HSB Color Mode:**
256
```javascript
257
function setup() {
258
  createCanvas(400, 300);
259
  colorMode(HSB, 360, 100, 100); // Hue: 0-360, Sat: 0-100, Bright: 0-100
260
}
261

262
function draw() {
263
  background(0, 0, 20); // Dark background
264
  
265
  // Create a rainbow of circles
266
  for (let i = 0; i < 12; i++) {
267
    let hue = map(i, 0, 11, 0, 360);
268
    fill(hue, 80, 90); // High saturation and brightness
269
    let x = 50 + i * 30;
270
    circle(x, 150, 40);
271
  }
272
}
273
```
274

275
**Color Interpolation:**
276
```javascript
277
let startColor, endColor;
278

279
function setup() {
280
  createCanvas(400, 300);
281
  startColor = color(255, 0, 0); // Red
282
  endColor = color(0, 0, 255);   // Blue
283
}
284

285
function draw() {
286
  background(220);
287
  
288
  // Create a gradient using lerpColor
289
  for (let i = 0; i <= width; i += 5) {
290
    let amt = map(i, 0, width, 0, 1);
291
    let c = lerpColor(startColor, endColor, amt);
292
    stroke(c);
293
    strokeWeight(5);
294
    line(i, 50, i, 250);
295
  }
296
}
297
```
298

299
**Color Palette Interpolation:**
300
```javascript
301
let palette;
302

303
function setup() {
304
  createCanvas(400, 300);
305
  
306
  // Create a color palette
307
  palette = [
308
    color(255, 0, 0),    // Red
309
    color(255, 255, 0),  // Yellow
310
    color(0, 255, 0),    // Green
311
    color(0, 255, 255),  // Cyan
312
    color(0, 0, 255)     // Blue
313
  ];
314
}
315

316
function draw() {
317
  background(220);
318
  
319
  // Animate through the palette
320
  let t = (frameCount * 0.01) % 1;
321
  let c = paletteLerp(palette, t);
322
  
323
  fill(c);
324
  circle(width/2, height/2, 200);
325
  
326
  // Show the palette
327
  for (let i = 0; i < palette.length; i++) {
328
    fill(palette[i]);
329
    rect(i * 80, 20, 80, 30);
330
  }
331
}
332
```
333

334
**Color Component Extraction:**
335
```javascript
336
function setup() {
337
  createCanvas(400, 300);
338
  
339
  let myColor = color(200, 100, 50);
340
  
341
  // Extract components
342
  let r = red(myColor);
343
  let g = green(myColor);
344
  let b = blue(myColor);
345
  
346
  console.log(`RGB: ${r}, ${g}, ${b}`);
347
  
348
  // Create new colors from components
349
  fill(r, 0, 0); // Pure red component
350
  rect(50, 50, 80, 80);
351
  
352
  fill(0, g, 0); // Pure green component
353
  rect(150, 50, 80, 80);
354
  
355
  fill(0, 0, b); // Pure blue component
356
  rect(250, 50, 80, 80);
357
  
358
  fill(myColor); // Original color
359
  rect(150, 150, 80, 80);
360
}
361
```
362

363
**Blend Modes:**
364
```javascript
365
function draw() {
366
  background(50);
367
  
368
  // Draw overlapping circles with different blend modes
369
  fill(255, 0, 0, 150);
370
  circle(150, 150, 120);
371
  
372
  blendMode(ADD); // Additive blending
373
  fill(0, 255, 0, 150);
374
  circle(180, 150, 120);
375
  
376
  blendMode(MULTIPLY); // Multiply blending
377
  fill(0, 0, 255, 150);
378
  circle(165, 180, 120);
379
  
380
  blendMode(BLEND); // Reset to normal blending
381
}
382
```
383

384
**Dynamic Color Analysis:**
385
```javascript
386
function draw() {
387
  background(220);
388
  
389
  // Create a color based on mouse position
390
  let r = map(mouseX, 0, width, 0, 255);
391
  let g = map(mouseY, 0, height, 0, 255);
392
  let b = 128;
393
  
394
  let currentColor = color(r, g, b);
395
  
396
  // Draw the color
397
  fill(currentColor);
398
  circle(width/2, height/2, 200);
399
  
400
  // Display color information
401
  fill(0);
402
  textSize(16);
403
  text(`Red: ${red(currentColor).toFixed(0)}`, 20, 30);
404
  text(`Green: ${green(currentColor).toFixed(0)}`, 20, 50);
405
  text(`Blue: ${blue(currentColor).toFixed(0)}`, 20, 70);
406
  
407
  // Show HSB values
408
  colorMode(HSB);
409
  text(`Hue: ${hue(currentColor).toFixed(0)}`, 20, 100);
410
  text(`Saturation: ${saturation(currentColor).toFixed(0)}`, 20, 120);
411
  text(`Brightness: ${brightness(currentColor).toFixed(0)}`, 20, 140);
412
  colorMode(RGB); // Reset to RGB mode
413
}
414
```