​

const colors = [

  {

    name: "white",

    lightColor: "#FFFFFF",

    darkColor: "#39393a",

  },

  {

    name: "gray1",

    lightColor: "#f8f8f8",

    darkColor: "#424243",

  },

  {

    name: "gray2",

    lightColor: "#f5f5f5",

    darkColor: "#4d4d4d",

  },

  {

    name: "gray3",

    lightColor: "#f2f2f2",

    darkColor: "#808080",

  },

  {

    name: "gray4",

    lightColor: "#f0f0f0",

    darkColor: "#3d3d3e",

  },

  {

    name: "gray5",

    lightColor: "#eaeaea",

    darkColor: "#2d2d2e",

  },

  {

    name: "gray6",

    lightColor: "#dcdcdc",

    darkColor: "#505051",

  },

  {

    name: "gray7",

    lightColor: "#c1c1c1",

    darkColor: "#565657",

  },

  {

    name: "gray8",

    lightColor: "#a8a8a8",

    darkColor: "#6f6f74",

  },

  {

    name: "gray9",

    lightColor: "#606060",

    darkColor: "#78787c",

  },

  {

    name: "black",

    lightColor: "#000000",

    darkColor: "#ffffff",

  },

  {

    name: "fontReg",

    lightColor: "#000",

​

    darkColor: "#ffffff",

  },

  {

    name: "fontMed",

    lightColor: "#808080",

    darkColor: "#909090",

  },

  {

    name: "fontDis",

    lightColor: "#b3b3b3",

    darkColor: "#505051",

  },

];

​

function setup() {

  createCanvas(400, 200);

  noLoop();

}

​

const STEPS = 15;

const gray_steps = []

​

function draw() {

  background(240);

​

  textSize(8);

​

  for (let j = 0; j <= STEPS; j++) {

    stroke(200);

    let val = 10 - ( pow( 1 + 10, (j/STEPS) ) - 1 );

    console.log(val)

    xL = map(val, 0,10, MARGIN, width - MARGIN);

    line(xL, 0, xL, height);

    gray_steps.push(map(val, 0,10, 0,100))

  }

​

    console.log(gray_steps)

  colors.forEach((element) => {

    const c = color(element.lightColor);

​

    const b = brightness(c);

    const x = map(b, 0, 100, MARGIN, width - MARGIN);

​

    const s = saturation(c);

    const y = map(s, 0, 100, MARGIN, height - MARGIN);

​

    noFill();

    stroke("blue");

    circle(x, y, 6);

    noStroke();

    fill(0, 100);

    text(element.name, x, y + 10);

​

    const cD = color(element.darkColor);

​

    const bD = brightness(cD);

    const xD = map(bD, 100, 0, MARGIN, width - MARGIN);

​

    const sD = saturation(cD);

    const yD = map(sD, 0, 100, MARGIN, height - MARGIN) + height / 2;

    noFill();

    stroke("red");

    circle(xD, yD, 6);

    noStroke();

    fill(0, 100);

    text(element.name, xD, yD + 10);

  });

}

​