User:Eleanorg/1.2/Forbidden Pixels/extracting pixel colours

From XPUB & Lens-Based wiki

Aim: to break an image down into a list of each pixel's position & colour, so that it can be re-created with html & css. Each pixel becomes an area coloured with a #hex code; thus manipulable - and no longer strictly part of an image. Question: how to write a script that will extract a grid of pixel colours from a given image?

ImageMagick colour extraction

Command syntax: convert imagename.png -format '%[pixel:p{xpos,ypos}]' info:- Returns the rgba value of the bottom right pixel in a 20x10 grid:

# convert 20by10PixelsSection1.png -format '%[pixel:p{20,10}]' info:-
rgba(135,161,160,1)

You can get a list of all the *unique* colours in an image thus. In my image of 200 pixels total, this line returns 167 unique colours:

# convert 20by10PixelsSection1.png -unique-colors -depth 16 txt:-
# ImageMagick pixel enumeration: 168,1,65535,rgba
0,0: (26471,33924,33410,65535)  #676784848282  rgba(103,132,130,1)
1,0: (26214,34438,34181,65535)  #666686868585  rgba(40%,52.549%,52.1569%,1)
2,0: (26985,34438,33924,65535)  #696986868484  rgba(41.1765%,52.549%,51.7647%,1)
3,0: (27499,34952,34438,65535)  #6B6B88888686  rgba(41.9608%,53.3333%,52.549%,1)
4,0: (26985,35209,34952,65535)  #696989898888  rgba(41.1765%,53.7255%,53.3333%,1)
5,0: (26985,35723,35466,65535)  #69698B8B8A8A  rgba(41.1765%,54.5098%,54.1176%,1)
6,0: (28013,35466,34952,65535)  #6D6D8A8A8888  rgba(42.7451%,54.1176%,53.3333%,1)
7,0: (29298,36751,36237,65535)  #72728F8F8D8D  rgba(44.7059%,56.0784%,55.2941%,1)
8,0: (29041,37265,37008,65535)  #717191919090  rgba(44.3137%,56.8627%,56.4706%,1)
9,0: (30583,38807,38550,65535)  #777797979696  rgba(46.6667%,59.2157%,58.8235%,1)
10,0: (31097,37779,37522,65535)  #797993939292  rgba(47.451%,57.6471%,57.2549%,1)
11,0: (31611,38293,38036,65535)  #7B7B95959494  rgba(48.2353%,58.4314%,58.0392%,1)
12,0: (30326,39064,38807,65535)  #767698989797  rgba(46.2745%,59.6078%,59.2157%,1)
13,0: (31868,39321,38807,65535)  #7C7C99999797  rgba(48.6275%,60%,59.2157%,1)
14,0: (32382,41120,40863,65535)  #7E7EA0A09F9F  rgba(49.4118%,62.7451%,62.3529%,1)
15,0: (33667,39321,38807,65535)  #838399999797  rgba(51.3725%,60%,59.2157%,1)
16,0: (33153,41377,41120,65535)  #8181A1A1A0A0  rgba(50.5882%,63.1373%,62.7451%,1)
17,0: (34695,41377,41120,65535)  #8787A1A1A0A0  rgba(52.9412%,63.1373%,62.7451%,1)
18,0: (33667,42405,42148,65535)  #8383A5A5A4A4  rgba(51.3725%,64.7059%,64.3137%,1)
19,0: (34181,42405,42148,65535)  #8585A5A5A4A4  rgba(52.1569%,64.7059%,64.3137%,1)
20,0: (34181,42919,42662,65535)  #8585A7A7A6A6  rgba(52.1569%,65.4902%,65.098%,1)
21,0: (35980,42662,42405,65535)  #8C8CA6A6A5A5  rgba(54.902%,65.098%,64.7059%,1)
22,0: (35209,43433,43176,65535)  #8989A9A9A8A8  rgba(53.7255%,66.2745%,65.8824%,1)
23,0: (36751,43433,43176,65535)  #8F8FA9A9A8A8  rgba(56.0784%,66.2745%,65.8824%,1)
24,0: (35980,44718,44461,65535)  #8C8CAEAEADAD  rgba(54.902%,68.2353%,67.8431%,1)
25,0: (37008,44718,44204,65535)  #9090AEAEACAC  rgba(56.4706%,68.2353%,67.451%,1)
26,0: (38550,44718,44718,65535)  #9696AEAEAEAE  rgba(58.8235%,68.2353%,68.2353%,1)
27,0: (39835,43433,43690,65535)  #9B9BA9A9AAAA  rgba(60.7843%,66.2745%,66.6667%,1)
28,0: (40863,43947,43947,65535)  #9F9FABABABAB  rgba(62.3529%,67.0588%,67.0588%,1)
29,0: (40092,44204,43947,65535)  #9C9CACACABAB  rgba(61.1765%,67.451%,67.0588%,1)
30,0: (40349,44461,44461,65535)  #9D9DADADADAD  rgba(61.5686%,67.8431%,67.8431%,1)
31,0: (40606,44718,44461,65535)  #9E9EAEAEADAD  rgba(61.9608%,68.2353%,67.8431%,1)
32,0: (37008,45232,44461,65535)  #9090B0B0ADAD  rgba(56.4706%,69.0196%,67.8431%,1)
33,0: (37779,45232,44718,65535)  #9393B0B0AEAE  rgba(57.6471%,69.0196%,68.2353%,1)
34,0: (37779,45489,44975,65535)  #9393B1B1AFAF  rgba(57.6471%,69.4118%,68.6275%,1)
35,0: (38293,45746,45232,65535)  #9595B2B2B0B0  rgba(58.4314%,69.8039%,69.0196%,1)
36,0: (38550,46260,45746,65535)  #9696B4B4B2B2  rgba(58.8235%,70.5882%,69.8039%,1)
37,0: (38807,46260,45746,65535)  #9797B4B4B2B2  rgba(59.2157%,70.5882%,69.8039%,1)
38,0: (38550,47288,47031,65535)  #9696B8B8B7B7  rgba(58.8235%,72.1569%,71.7647%,1)
39,0: (39835,47545,47031,65535)  #9B9BB9B9B7B7  rgba(60.7843%,72.549%,71.7647%,1)
40,0: (39835,47288,46774,65535)  #9B9BB8B8B6B6  rgba(60.7843%,72.1569%,71.3725%,1)
41,0: (40606,48316,47802,65535)  #9E9EBCBCBABA  rgba(61.9608%,73.7255%,72.9412%,1)
42,0: (41120,43947,44461,65535)  #A0A0ABABADAD  rgba(62.7451%,67.0588%,67.8431%,1)
43,0: (41377,44461,44461,65535)  #A1A1ADADADAD  rgba(63.1373%,67.8431%,67.8431%,1)
44,0: (41891,44461,44975,65535)  #A3A3ADADAFAF  rgba(63.9216%,67.8431%,68.6275%,1)
45,0: (42919,44975,45746,65535)  #A7A7AFAFB2B2  rgba(65.4902%,68.6275%,69.8039%,1)
46,0: (41377,46003,46003,65535)  #A1A1B3B3B3B3  rgba(63.1373%,70.1961%,70.1961%,1)
47,0: (42405,46517,45746,65535)  #A5A5B5B5B2B2  rgba(64.7059%,70.9804%,69.8039%,1)
48,0: (42148,46260,46003,65535)  #A4A4B4B4B3B3  rgba(64.3137%,70.5882%,70.1961%,1)
49,0: (41377,46774,47031,65535)  #A1A1B6B6B7B7  rgba(63.1373%,71.3725%,71.7647%,1)
50,0: (41634,46774,47031,65535)  #A2A2B6B6B7B7  rgba(63.5294%,71.3725%,71.7647%,1)
51,0: (43176,45746,46260,65535)  #A8A8B2B2B4B4  rgba(65.8824%,69.8039%,70.5882%,1)
52,0: (43176,46003,46517,65535)  #A8A8B3B3B5B5  rgba(65.8824%,70.1961%,70.9804%,1)
53,0: (42148,47288,47031,65535)  #A4A4B8B8B7B7  rgba(64.3137%,72.1569%,71.7647%,1)
54,0: (43433,47288,46517,65535)  #A9A9B8B8B5B5  rgba(66.2745%,72.1569%,70.9804%,1)
55,0: (44975,47802,46774,65535)  #AFAFBABAB6B6  rgba(68.6275%,72.9412%,71.3725%,1)
56,0: (42148,46774,47288,65535)  #A4A4B6B6B8B8  rgba(64.3137%,71.3725%,72.1569%,1)
57,0: (43176,47031,47802,65535)  #A8A8B7B7BABA  rgba(65.8824%,71.7647%,72.9412%,1)
58,0: (41120,47288,47288,65535)  #A0A0B8B8B8B8  rgba(62.7451%,72.1569%,72.1569%,1)
59,0: (41120,47802,47545,65535)  #A0A0BABAB9B9  rgba(62.7451%,72.9412%,72.549%,1)
60,0: (41377,48059,47802,65535)  #A1A1BBBBBABA  rgba(63.1373%,73.3333%,72.9412%,1)
61,0: (41891,48059,48059,65535)  #A3A3BBBBBBBB  rgba(63.9216%,73.3333%,73.3333%,1)
62,0: (42405,48059,47545,65535)  #A5A5BBBBB9B9  rgba(64.7059%,73.3333%,72.549%,1)
63,0: (42405,48830,48059,65535)  #A5A5BEBEBBBB  rgba(64.7059%,74.5098%,73.3333%,1)
64,0: (41891,48573,48316,65535)  #A3A3BDBDBCBC  rgba(63.9216%,74.1176%,73.7255%,1)
65,0: (41377,48830,48316,65535)  #A1A1BEBEBCBC  rgba(63.1373%,74.5098%,73.7255%,1)
66,0: (42919,49087,49087,65535)  #A7A7BFBFBFBF  rgba(65.4902%,74.902%,74.902%,1)
67,0: (43947,47802,48573,65535)  #ABABBABABDBD  rgba(67.0588%,72.9412%,74.1176%,1)
68,0: (44975,48573,48830,65535)  #AFAFBDBDBEBE  rgba(68.6275%,74.1176%,74.5098%,1)
69,0: (44461,49087,49087,65535)  #ADADBFBFBFBF  rgba(67.8431%,74.902%,74.902%,1)
70,0: (45489,47802,47031,65535)  #B1B1BABAB7B7  rgba(69.4118%,72.9412%,71.7647%,1)
71,0: (46003,48316,47545,65535)  #B3B3BCBCB9B9  rgba(70.1961%,73.7255%,72.549%,1)
72,0: (45232,48316,47802,65535)  #B0B0BCBCBABA  rgba(69.0196%,73.7255%,72.9412%,1)
73,0: (45489,48059,48573,65535)  #B1B1BBBBBDBD  rgba(69.4118%,73.3333%,74.1176%,1)
74,0: (46260,47545,48573,65535)  #B4B4B9B9BDBD  rgba(70.5882%,72.549%,74.1176%,1)
75,0: (46517,47802,48573,65535)  #B5B5BABABDBD  rgba(70.9804%,72.9412%,74.1176%,1)
76,0: (47288,48316,49087,65535)  #B8B8BCBCBFBF  rgba(72.1569%,73.7255%,74.902%,1)
77,0: (47031,49344,48573,65535)  #B7B7C0C0BDBD  rgba(71.7647%,75.2941%,74.1176%,1)
78,0: (44718,48573,49344,65535)  #AEAEBDBDC0C0  rgba(68.2353%,74.1176%,75.2941%,1)
79,0: (45489,49087,49344,65535)  #B1B1BFBFC0C0  rgba(69.4118%,74.902%,75.2941%,1)
80,0: (46517,49087,49344,65535)  #B5B5BFBFC0C0  rgba(70.9804%,74.902%,75.2941%,1)
81,0: (44461,49601,49858,65535)  #ADADC1C1C2C2  rgba(67.8431%,75.6863%,76.0784%,1)
82,0: (44204,49601,49858,65535)  #ACACC1C1C2C2  rgba(67.451%,75.6863%,76.0784%,1)
83,0: (44975,50115,50372,65535)  #AFAFC3C3C4C4  rgba(68.6275%,76.4706%,76.8627%,1)
84,0: (44718,50115,50372,65535)  #AEAEC3C3C4C4  rgba(68.2353%,76.4706%,76.8627%,1)
85,0: (46774,49858,49344,65535)  #B6B6C2C2C0C0  rgba(71.3725%,76.0784%,75.2941%,1)
86,0: (46003,50629,50629,65535)  #B3B3C5C5C5C5  rgba(70.1961%,77.2549%,77.2549%,1)
87,0: (47545,49601,50115,65535)  #B9B9C1C1C3C3  rgba(72.549%,75.6863%,76.4706%,1)
88,0: (48573,50886,50115,65535)  #BDBDC6C6C3C3  rgba(74.1176%,77.6471%,76.4706%,1)
89,0: (48573,49601,50372,65535)  #BDBDC1C1C4C4  rgba(74.1176%,75.6863%,76.8627%,1)
90,0: (49087,50115,50886,65535)  #BFBFC3C3C6C6  rgba(74.902%,76.4706%,77.6471%,1)
91,0: (47288,50372,50372,65535)  #B8B8C4C4C4C4  rgba(72.1569%,76.8627%,76.8627%,1)
92,0: (47545,51143,51143,65535)  #B9B9C7C7C7C7  rgba(72.549%,78.0392%,78.0392%,1)
93,0: (49087,50372,51143,65535)  #BFBFC4C4C7C7  rgba(74.902%,76.8627%,78.0392%,1)
94,0: (48573,51143,50886,65535)  #BDBDC7C7C6C6  rgba(74.1176%,78.0392%,77.6471%,1)
95,0: (48830,51400,51657,65535)  #BEBEC8C8C9C9  rgba(74.5098%,78.4314%,78.8235%,1)
96,0: (49087,52171,52171,65535)  #BFBFCBCBCBCB  rgba(74.902%,79.6078%,79.6078%,1)
97,0: (50115,50372,51400,65535)  #C3C3C4C4C8C8  rgba(76.4706%,76.8627%,78.4314%,1)
98,0: (50115,50886,52171,65535)  #C3C3C6C6CBCB  rgba(76.4706%,77.6471%,79.6078%,1)
99,0: (50629,50886,51914,65535)  #C5C5C6C6CACA  rgba(77.2549%,77.6471%,79.2157%,1)
100,0: (50629,52171,51657,65535)  #C5C5CBCBC9C9  rgba(77.2549%,79.6078%,78.8235%,1)
101,0: (51143,52171,51914,65535)  #C7C7CBCBCACA  rgba(78.0392%,79.6078%,79.2157%,1)
102,0: (51143,51400,52428,65535)  #C7C7C8C8CCCC  rgba(78.0392%,78.4314%,80%,1)
103,0: (50372,52685,52428,65535)  #C4C4CDCDCCCC  rgba(76.8627%,80.3922%,80%,1)
104,0: (50629,52942,52685,65535)  #C5C5CECECDCD  rgba(77.2549%,80.7843%,80.3922%,1)
105,0: (51914,52171,53199,65535)  #CACACBCBCFCF  rgba(79.2157%,79.6078%,81.1765%,1)
106,0: (51400,52428,52685,65535)  #C8C8CCCCCDCD  rgba(78.4314%,80%,80.3922%,1)
107,0: (51400,52942,52428,65535)  #C8C8CECECCCC  rgba(78.4314%,80.7843%,80%,1)
108,0: (51657,53199,53199,65535)  #C9C9CFCFCFCF  rgba(78.8235%,81.1765%,81.1765%,1)
109,0: (51400,52942,52942,65535)  #C8C8CECECECE  rgba(78.4314%,80.7843%,80.7843%,1)
110,0: (52171,53199,52942,65535)  #CBCBCFCFCECE  rgba(79.6078%,81.1765%,80.7843%,1)
111,0: (52428,52942,52685,65535)  #CCCCCECECDCD  rgba(80%,80.7843%,80.3922%,1)
112,0: (53199,53199,53199,65535)  #CFCFCFCFCFCF  grey81
113,0: (54227,54484,53199,65535)  #D3D3D4D4CFCF  rgba(82.7451%,83.1373%,81.1765%,1)
114,0: (52428,52171,53456,65535)  #CCCCCBCBD0D0  rgba(80%,79.6078%,81.5686%,1)
115,0: (52171,53199,53456,65535)  #CBCBCFCFD0D0  rgba(79.6078%,81.1765%,81.5686%,1)
116,0: (53199,53199,53713,65535)  #CFCFCFCFD1D1  rgba(81.1765%,81.1765%,81.9608%,1)
117,0: (52428,53456,53713,65535)  #CCCCD0D0D1D1  rgba(80%,81.5686%,81.9608%,1)
118,0: (53199,53713,53456,65535)  #CFCFD1D1D0D0  rgba(81.1765%,81.9608%,81.5686%,1)
119,0: (52428,53456,54227,65535)  #CCCCD0D0D3D3  rgba(80%,81.5686%,82.7451%,1)
120,0: (53199,53456,53970,65535)  #CFCFD0D0D2D2  rgba(81.1765%,81.5686%,82.3529%,1)
121,0: (53456,53456,53456,65535)  #D0D0D0D0D0D0  rgba(81.5686%,81.5686%,81.5686%,1)
122,0: (53456,53970,53713,65535)  #D0D0D2D2D1D1  rgba(81.5686%,82.3529%,81.9608%,1)
123,0: (53713,53713,54227,65535)  #D1D1D1D1D3D3  rgba(81.9608%,81.9608%,82.7451%,1)
124,0: (53713,54227,53970,65535)  #D1D1D3D3D2D2  rgba(81.9608%,82.7451%,82.3529%,1)
125,0: (53970,54484,54227,65535)  #D2D2D4D4D3D3  rgba(82.3529%,83.1373%,82.7451%,1)
126,0: (54741,54998,53713,65535)  #D5D5D6D6D1D1  rgba(83.5294%,83.9216%,81.9608%,1)
127,0: (54741,55255,53970,65535)  #D5D5D7D7D2D2  rgba(83.5294%,84.3137%,82.3529%,1)
128,0: (54998,55255,53970,65535)  #D6D6D7D7D2D2  rgba(83.9216%,84.3137%,82.3529%,1)
129,0: (54227,54227,54741,65535)  #D3D3D3D3D5D5  rgba(82.7451%,82.7451%,83.5294%,1)
130,0: (53970,53970,54484,65535)  #D2D2D2D2D4D4  rgba(82.3529%,82.3529%,83.1373%,1)
131,0: (53713,54741,54484,65535)  #D1D1D5D5D4D4  rgba(81.9608%,83.5294%,83.1373%,1)
132,0: (53456,54484,54741,65535)  #D0D0D4D4D5D5  rgba(81.5686%,83.1373%,83.5294%,1)
133,0: (54227,54741,54484,65535)  #D3D3D5D5D4D4  rgba(82.7451%,83.5294%,83.1373%,1)
134,0: (54227,55255,54998,65535)  #D3D3D7D7D6D6  rgba(82.7451%,84.3137%,83.9216%,1)
135,0: (54741,54741,54741,65535)  #D5D5D5D5D5D5  rgba(83.5294%,83.5294%,83.5294%,1)
136,0: (54484,54484,54484,65535)  #D4D4D4D4D4D4  grey83
137,0: (54484,54998,54741,65535)  #D4D4D6D6D5D5  rgba(83.1373%,83.9216%,83.5294%,1)
138,0: (54484,54484,54998,65535)  #D4D4D4D4D6D6  rgba(83.1373%,83.1373%,83.9216%,1)
139,0: (54741,54741,55255,65535)  #D5D5D5D5D7D7  rgba(83.5294%,83.5294%,84.3137%,1)
140,0: (54998,54998,54998,65535)  #D6D6D6D6D6D6  grey84
141,0: (55255,55255,55255,65535)  #D7D7D7D7D7D7  rgba(84.3137%,84.3137%,84.3137%,1)
142,0: (55512,55255,54227,65535)  #D8D8D7D7D3D3  rgba(84.7059%,84.3137%,82.7451%,1)
143,0: (55255,55512,54227,65535)  #D7D7D8D8D3D3  rgba(84.3137%,84.7059%,82.7451%,1)
144,0: (54484,55512,55255,65535)  #D4D4D8D8D7D7  rgba(83.1373%,84.7059%,84.3137%,1)
145,0: (55512,55769,54484,65535)  #D8D8D9D9D4D4  rgba(84.7059%,85.098%,83.1373%,1)
146,0: (55769,56026,54741,65535)  #D9D9DADAD5D5  rgba(85.098%,85.4902%,83.5294%,1)
147,0: (56283,56026,54998,65535)  #DBDBDADAD6D6  rgba(85.8824%,85.4902%,83.9216%,1)
148,0: (56283,56540,55255,65535)  #DBDBDCDCD7D7  rgba(85.8824%,86.2745%,84.3137%,1)
149,0: (54741,54998,55512,65535)  #D5D5D6D6D8D8  rgba(83.5294%,83.9216%,84.7059%,1)
150,0: (55255,55255,55769,65535)  #D7D7D7D7D9D9  rgba(84.3137%,84.3137%,85.098%,1)
151,0: (55255,55769,55512,65535)  #D7D7D9D9D8D8  rgba(84.3137%,85.098%,84.7059%,1)
152,0: (55255,55512,56026,65535)  #D7D7D8D8DADA  rgba(84.3137%,84.7059%,85.4902%,1)
153,0: (55255,56283,56026,65535)  #D7D7DBDBDADA  rgba(84.3137%,85.8824%,85.4902%,1)
154,0: (55512,56026,55769,65535)  #D8D8DADAD9D9  rgba(84.7059%,85.4902%,85.098%,1)
155,0: (56283,55769,56026,65535)  #DBDBD9D9DADA  rgba(85.8824%,85.098%,85.4902%,1)
156,0: (55769,56283,56026,65535)  #D9D9DBDBDADA  rgba(85.098%,85.8824%,85.4902%,1)
157,0: (57311,56283,55512,65535)  #DFDFDBDBD8D8  rgba(87.451%,85.8824%,84.7059%,1)
158,0: (55512,56540,56283,65535)  #D8D8DCDCDBDB  rgba(84.7059%,86.2745%,85.8824%,1)
159,0: (56026,56540,56283,65535)  #DADADCDCDBDB  rgba(85.4902%,86.2745%,85.8824%,1)
160,0: (57054,56797,55769,65535)  #DEDEDDDDD9D9  rgba(87.0588%,86.6667%,85.098%,1)
161,0: (56540,57054,55769,65535)  #DCDCDEDED9D9  rgba(86.2745%,87.0588%,85.098%,1)
162,0: (57054,57311,56026,65535)  #DEDEDFDFDADA  rgba(87.0588%,87.451%,85.4902%,1)
163,0: (55769,56797,56540,65535)  #D9D9DDDDDCDC  rgba(85.098%,86.6667%,86.2745%,1)
164,0: (56283,56797,56540,65535)  #DBDBDDDDDCDC  rgba(85.8824%,86.6667%,86.2745%,1)
165,0: (56540,57054,56797,65535)  #DCDCDEDEDDDD  rgba(86.2745%,87.0588%,86.6667%,1)
166,0: (58339,57311,56540,65535)  #E3E3DFDFDCDC  rgba(89.0196%,87.451%,86.2745%,1)
167,0: (57568,58082,56797,65535)  #E0E0E2E2DDDD  rgba(87.8431%,88.6275%,86.6667%,1)

Kind of annoying that this only returns unique colours - so 167 out of 200 - but this could maybe be interesting too. A kind of 'condensation' of the essential elements.

Still, try to figure out how to get the grid... is there an easier way than just typing this...?
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,0}]' info:-
rgba(135,161,160,1)
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,1}]' info:-
rgba(135,161,160,1)
# convert 20by10PixelsSection1.png -format '%[pixel:p{0,2}]' info:-
rgba(135,161,160,1)