0

I want to grab every color from an image, pixel by pixel.

I’m looking for a way to export a table or 2-dimensional array containing the color of each pixel in the image. Imagine this is a close up of a photo or drawing:

example pixel map with defined colors

(Those are the hex codes for each pixel's color; #FFFF00 is yellow, #C6E0B4 is light green, etc.)

How can I export this data from Photoshop or another tool?

2
  • What size is your image? Commented Nov 20, 2020 at 21:55
  • 1
    What do you need this for? It's pretty easy to do with javascript in a browser, but that's not really within the scope of this site. Also be aware that this quickly gets very heavy if it's a large image. 1000 x 1000 px would make a 6.7MB text file with comma separated hex codes.
    – Wolff
    Commented Nov 20, 2020 at 22:23

2 Answers 2

1

Photoshop and many other image editing programs can save your image in some easy to decode file format such as BMP or device independent bitmap with no compression. Still the job needs a competent programmer who can understand file format descriptions and can create a program which extracts from a BMP or other image file the RGB numbers and generates a new image file which contains the numbers in human readable text and the corresponding colors as you have wanted. There's no Photoshop ready to use function for the job.

0

Here's how I solved the problem. Thank you to user287001 for the idea to use a .BMP image and for confirming that there's no Photoshop feature that can extract the color data for me.

Steps in Photoshop:

  1. Open image in Photoshop. Adjust Levels, Brightness/Contrast etc. to my liking.
  2. Reduce the image size to a manageable number of pixels (e.g., 100 x 100 px)
  3. Reduce the total number of unique colors using Image > Mode > Indexed Color. Fiddle with this until the total number of unique colors is a manageable number (e.g., ~50)
  4. Save As .BMP

Steps in Google Colab:

  1. Create a Google Colab notebook. Load the .BMP image
  2. Create a pixel array that contains the data from the image (e.g., MyPixelArray = image.imread(filepath) where filepath is the location of the .BMP image in my Google Drive). This creates a three-dimensional array with dimensions of image-height x image-width x 4. (The third dimension of the array is of size 4 because it contains the color of the pixel in RGBa format—example: 255, 0, 0, 255 = bright red with full opacity.)
  3. Create a for loop that displays the pixel array as a table. Use the color code from the pixel array as both the value of each cell (e.g., "255, 0, 0, 255" is printed in the cell) and as the background color of the corresponding cell.

At first, my table (a Plotly graph_objects figure) was displaying so that the rows were taller than the column widths—i.e. the cells were not square. I had to use this line of code:

fig.update_layout(margin=dict(t=0, b=0, l=0, r=0), width=s*w, height=(s*h))

after defining the figure but before fig.show() to take away the left and right side margins that were squeezing my table and making the cells too tall.

1
  • There are easier ways, just dump your image into any of the available ascii formats and your done.
    – joojaa
    Commented Nov 27, 2020 at 20:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.