How would I make a color relative to images in the background?

Question

For example, if you go to Twitter and click on an image, you can see they have a nice color that is close to what you see on the image. I tried looking up ways to achieve this as well as trying to figure it out on my own but no luck. I'm not sure if there's a color: relative property or not.

Answer 1

if you want to use the a colour that exists in your image and set it as a background colour you need to use the canvas element in the following manner:

HTML (this is your image)

<img src="multicolour.jpg" id="mainImage">

JS

   window.onload = function() {

  // get the body element to set background (this can change dependending of your needs)
  let body = document.getElementsByTagName("body")

  // get references to the image element that contains the picture you want to match with background
  let referenceImage = document.getElementById("mainImage");

  // create a canvas element (but don't add it to the page)
  let canvas = document.createElement("canvas");

  // make the canvas size the same as your image
  canvas.width = referenceImage.offsetWidth
  canvas.height = referenceImage.offsetHeight

  // create the canvas context
  let context = canvas.getContext('2d')

  // usage your image reference to draw the image in the canvas
  context.drawImage(referenceImage,0,0);

  // select a random X and Y coordinates inside the drawn image in the canvas
  // (you don't have to do this one, but I did to demonstrate the code)
  let randomX = Math.floor(Math.random() * (referenceImage.offsetWidth - 1) + 1)
  let randomY = Math.floor(Math.random() * (referenceImage.offsetHeight - 1) + 1)

  // THIS IS THE MOST IMPORTANT LINE
  // getImageData takes 4 arguments: coord x, coord y, sample size w, and sample size h.
  // in our case the sample size is going to be of 1 pixel so it retrieves only 1 color
  // the method gives you the data object which constains and array with the r, b, g colour data from the selected pixel
  let color = context.getImageData(randomX, randomY, 1, 1).data

  // use the data to dynamically add a background color extracted from your image
  body[0].style.backgroundColor = `rgb(${color[0]},${color[1]},${color[2]})`
}

here is a gif of the code working... hopefully this helps

UPDATE

Here is the code to select two random points and create a css3 background gradient

window.onload = function() {

  // get the body element to set background (this can change dependending of your needs)
  let body = document.getElementsByTagName("body")

  // get references to the image element that contains the picture you want to match with background
  let referenceImage = document.getElementById("mainImage");

  // create a canvas element (but don't add it to the page)
  let canvas = document.createElement("canvas");

  // make the canvas size the same as your image
  canvas.width = referenceImage.offsetWidth
  canvas.height = referenceImage.offsetHeight

  // create the canvas context
  let context = canvas.getContext('2d')

  // usage your image reference to draw the image in the canvas
  context.drawImage(referenceImage,0,0);

  // select a random X and Y coordinates inside the drawn image in the canvas
  // (you don't have to do this one, but I did to demonstrate the code)
  let randomX = Math.floor(Math.random() * (referenceImage.offsetWidth - 1) + 1)
  let randomY = Math.floor(Math.random() * (referenceImage.offsetHeight - 1) + 1)

  // THIS IS THE MOST IMPORTANT LINE
  // getImageData takes 4 arguments: coord x, coord y, sample size w, and sample size h.
  // in our case the sample size is going to be of 1 pixel so it retrieves only 1 color
  // the method gives you the data object which constains and array with the r, b, g colour data from the selected pixel
  let colorOne = context.getImageData(randomX, randomY, 1, 1).data


  // THE SAME TO OBTAIN ANOTHER pixel data
  let randomX2 = Math.floor(Math.random() * (referenceImage.offsetWidth - 1) + 1)
  let randomY2 = Math.floor(Math.random() * (referenceImage.offsetHeight - 1) + 1)
  let colorTwo = context.getImageData(randomX2, randomY2, 1, 1).data

  // use the data to dynamically add a background color extracted from your image
  //body[0].style.backgroundColor = `rgb(${allColors[0]},${allColors[1]},${allColors[2]})`
  body[0].style.backgroundImage = `linear-gradient(to right, rgb(${colorOne[0]},${colorOne[1]},${colorOne[2]}),rgb(${colorTwo[0]},${colorTwo[1]},${colorTwo[2]}))`;
}

Answer 2

The following are your options.

1. Use an svg.

As far as I know there's no way to have javascript figure out what color is being used in a png and set it as a background color. But you can work the other way around. You can have javascript set the background color and an svg image to be the same color.

See this stackoverflow answer to learn more about modifying svgs with javascript.

2. Use a custom font.

There are fonts out there that provide a bunch of icons instead of letters, you can also create your own font if you feel so inclined to do so. With css you just have to set the font-color of that icon to be the same as the background-color of your other element.

Font Awesome provides a bunch of useful custom icons. If the image you need to use happens to be similar to one of theirs, you can just go with them.

3. Use canvas

If you really want to spend the time to code it up you can use a html <canvas/> element and put the image into it. From there you can inspect certain details about the image like its color, then apply that color to other elements. I won't go into too much detail about using this method as it seems like it's probably overkill for what you're trying to do, but you can read up more about from this stackoverflow answer.

4. Just live with it.

Not a fun solution, but this is usually the option I go with. You simply have to hard-code the color of the image into your css and live with it. If you ever need to modify the color of the image, you have to remember to update your css also.