Colors ​

Colors in the Sketchfab API are described as an RGB array with 0-1 normalized values. For example, [0.17, 0.35, 1] is a blue color. Normally you'd work with hex colors or an array in the 0-255 range.

Here we set the color of the AlbedoPBR channel to a lime color:

material.channels.AlbedoPBR.color = [0.2, 1, 0.3];
api.setMaterial(material);

Converting colors ​

You can convert between these formats with the following functions. The goal is to create a color value that Sketchfab understands: [0, 0, 1] for blue or [1, 0, 0] for red for instance.

Convert hex to rgb ​

for example: #2a3b4c to [42, 59, 76]

function hexToRgb(hex) {
  const r = parseInt(hex.substring(1, 3), 16);
  const g = parseInt(hex.substring(3, 5), 16);
  const b = parseInt(hex.substring(5, 7), 16);
  return [r, g, b];
}

Convert rgb to hex ​

For example: [42, 59, 76] to #2a3b4c

function rgbToHex(rgb) {
  const r = rgb[0];
  const g = rgb[1];
  const b = rgb[2];
  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

Normalizing rgb values ​

For example: [42, 59, 76] to [0.16, 0.23, 0.29]

function normalizeRgb(rgb) {
  return rgb.map((v) => v / 255);
}

Gamma correcting colors ​

When you normalize an rgb color and apply it to your scene, you'll see that somehow the color is off. This is because Sketchfab uses gamma correction. You can fix this with the following function:

// gamma correct rgb values
// for example: [42, 59, 76] to [0.16, 0.23, 0.29]
function gammaCorrectRgb(rgb) {
  return rgb.map((v) => Math.pow(v / 255, 2.2));
}

In this example you can see the difference between the uncorrected and gamma corrected colors: