Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
p5js sketch file with a nice color palette.
function setup() {
createCanvas(800, 800, WEBGL);
}
function draw() {
background("#fefefe");
let scaleFactor = 1;
// black - red - orange
let colors1 = [
"03071e",
"370617",
"6a040f",
"9d0208",
"d00000",
"dc2f02",
"e85d04",
"f48c06",
"faa307",
"ffba08"
];
// white - dark gray
let colorsGray = [
"f8f9fa",
"e9ecef",
"dee2e6",
"ced4da",
"adb5bd",
"6c757d",
"495057",
"343a40",
"212529"
];
// bluish/green - orange
let c = [
"16697a",
"489fb5",
"82c0cc",
"ede7e3",
"ffa62b"
];
// yellow, orange, magenta, violet blue
let c3 = [
"ffbe0b",
"fb5607",
"ff006e",
"8338ec",
"3a86ff"
];
// magenta - violet - light blue
let c4 = [
"f72585",
"b5179e",
"7209b7",
"560bad",
"480ca8",
"3a0ca3",
"3f37c9",
"4361ee",
"4895ef",
"4cc9f0"
];
// red - orange - green - blue
let c5 = [
"f94144",
"f3722c",
"f8961e",
"f9844a",
"f9c74f",
"90be6d",
"43aa8b",
"4d908e",
"577590",
"277da1"
];
// red, yellow, green, blue and violet
let c6 = [
"ff595e",
"ffca3a",
"8ac926",
"1982c4",
"6a4c93"
];
// bluish grayscale from dark to light
let c7 = [
"0d1b2a",
"1b263b",
"415a77",
"778da9",
"e0e1dd"
];
strokeWeight(2);
scale(scaleFactor);
palets = [
colors1,
colorsGray,
c,
c3,
c4,
c5,
c6,
c7
];
// draw palette
for(k = 0; k < palets.length; k++) {
for(j = 0; j < palets[k].length; j++) {
let cp = palets[k].map(function(i) { return '#' + i; });
fill(cp[j]);
stroke(cp[j]);
square((j+1)*30 - 200, 2*k*20 - 200, 20);
}
}
}
@cesarmiquel
Copy link
Author

cesarmiquel commented Apr 4, 2021

This is a screenshot of the generated code:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment