
var c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(30, 20, 55, 55); // Draw rectangle


var c = color(255, 204, 0); // Define color 'c'
fill(c); // Use color variable 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
ellipse(25, 25, 80, 80); // Draw left circle

// Using only one value with color()
// generates a grayscale value.
c = color(65); // Update 'c' with grayscale value
fill(c); // Use updated 'c' as fill color
ellipse(75, 75, 80, 80); // Draw right circle


// Named SVG & CSS colors may be used,
var c = color('magenta');
fill(c); // Use 'c' as fill color
noStroke(); // Don't draw a stroke around shapes
rect(20, 20, 60, 60); // Draw rectangle


// as can hex color codes:
noStroke(); // Don't draw a stroke around shapes
var c = color('#0f0');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('#00ff00');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle


// RGB and RGBA color strings are also supported:
// these all set to the same color (solid blue)
var c;
noStroke(); // Don't draw a stroke around shapes
c = color('rgb(0,0,255)');
fill(c); // Use 'c' as fill color
rect(10, 10, 35, 35); // Draw rectangle

c = color('rgb(0%, 0%, 100%)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 35, 35); // Draw rectangle

c = color('rgba(0, 0, 255, 1)');
fill(c); // Use updated 'c' as fill color
rect(10, 55, 35, 35); // Draw rectangle

c = color('rgba(0%, 0%, 100%, 1)');
fill(c); // Use updated 'c' as fill color
rect(55, 55, 35, 35); // Draw rectangle


// HSL color is also supported and can be specified
// by value
var c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsl(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsla(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle


// HSB color is also supported and can be specified
// by value
var c;
noStroke(); // Don't draw a stroke around shapes
c = color('hsb(160, 100%, 50%)');
fill(c); // Use 'c' as fill color
rect(0, 10, 45, 80); // Draw rectangle

c = color('hsba(160, 100%, 50%, 0.5)');
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw rectangle


var c; // Declare color 'c'
noStroke(); // Don't draw a stroke around shapes

// If no colorMode is specified, then the
// default of RGB with scale of 0-255 is used.
c = color(50, 55, 100); // Create a color for 'c'
fill(c); // Use color variable 'c' as fill color
rect(0, 10, 45, 80); // Draw left rect

colorMode(HSB, 100); // Use HSB with scale of 0-100
c = color(50, 55, 100); // Update 'c' with new color
fill(c); // Use updated 'c' as fill color
rect(55, 10, 45, 80); // Draw right rect

Learn & Share – Jede (Organisations)-Entwicklung braucht Spannungen!