How to detect a colour with Puppeteer?

Question

I have been trying to detect the presence of the colour yellow on a web page using Puppeteer. Any insight on how this may be possible would be greatly appreciated!

Answer 1

With getComputedStyle

You can get the colours of a page by applying getComputedStyle on all elements of a page:

let colr = new Set();
document.body.querySelectorAll('*').forEach(n => {
  colr.add(window.getComputedStyle(n).color);
  colr.add(window.getComputedStyle(n).backgroundColor);
});
colr = [...colr];

Or with Puppeteer for this page:

// from-dom.js
const puppeteer = require('puppeteer-core');

module.exports = async () => {
  // I'm running Puppeteer against Chrome in Docker. Change where necessary please.
  const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
  const page = await browser.newPage();
  await page.goto('https://stackoverflow.com/q/64839035/1244884');
  const colors = await page.evaluate(() => {
    let colr = new Set();
    document.body.querySelectorAll('*').forEach(n => {
      colr.add(window.getComputedStyle(n).color);
      colr.add(window.getComputedStyle(n).backgroundColor);
    });
    colr = [...colr];
    return colr;
  });
  await browser.close();
  console.log(colors);
};

node -p -e 'require("./from-dom.js")()'

Which returns:

[
  'rgb(36, 39, 41)',       'rgba(0, 0, 0, 0)',
  'rgb(250, 250, 251)',    'rgb(0, 119, 204)',
  'rgb(132, 141, 149)',    'rgb(60, 65, 70)',
  'rgb(255, 255, 255)',    'rgb(83, 90, 96)',
  'rgb(12, 13, 14)',       'rgb(106, 115, 124)',
  'rgb(214, 217, 220)',    'rgb(187, 192, 196)',
  'rgb(244, 128, 36)',     'rgb(57, 115, 157)',
  'rgb(225, 236, 244)',    'rgb(0, 149, 255)',
  'rgb(239, 240, 241)',    'rgb(244, 248, 251)',
  'rgb(59, 64, 69)',       'rgb(27, 64, 114)',
  'rgb(209, 229, 241)',    'rgb(228, 230, 232)',
  'rgb(0, 0, 0)',          'rgb(253, 247, 227)',
  'rgb(61, 143, 88)',      'rgb(209, 56, 61)',
  'rgb(57, 86, 151)',      'rgb(239, 239, 239)',
  'rgb(192, 45, 46)',      'rgb(192, 72, 72)',
  'rgb(251, 242, 212)',    'rgb(94, 186, 125)',
  'rgba(12, 13, 14, 0.5)'
]

Here's the resulting palette:

With a screenshot

1. Take a screenshot of the page
2. Produce the palette of that screenshot.

Here again let's screenshot this page:

// from-picture.js
const puppeteer = require('puppeteer-core');
const path = require('path');
const getColors = require('get-image-colors');

module.exports = async () => {
  // I'm running Puppeteer against Chrome in Docker. Change where necessary please.
  const browser = await puppeteer.connect({ browserWSEndpoint: 'ws://localhost:3000' });
  const page = await browser.newPage();
  await page.goto('https://stackoverflow.com/q/64839035/1244884');
  await page.screenshot({path: 'screenshot.png'});
  await browser.close();
  const options = {count: 10, type: 'image/png'};
  const colors = await getColors(path.join(__dirname, 'screenshot.png'), options);
  console.log(colors.map(c => c.css()));
};

node -p -e 'require("./from-picture.js")()'

Which returns:

[
  'rgb(55,76,87)',
  'rgb(250,250,251)',
  'rgb(150,161,169)',
  'rgb(242,133,38)',
  'rgb(92,176,224)',
  'rgb(203,214,223)',
  'rgb(157,90,31)',
  'rgb(226,204,156)',
  'rgb(244,180,132)'
]

Here's screenshot.png ;)

And here's the palette:

---

How can you tell if a colour is yellow-ish?

This one is tricky. How can you tell if rgb(61, 143, 88) is ± yellow?

It should be possible with a library such as chroma-js to sort of check if a colour is "within the yellow scale" but I have no idea how to do this.

I found this old post which may help: Find closest colour match within range of colours

Hopefully this is enough to get you started ;)