I made a tool that lets designers/programmers get top colors from a screenshot or design by blixt2

View this thread on: hive.blog | peakd.com | ecency.com

programming · @blixt2 · Aug 27 '17

$0.82

I made a tool that lets designers/programmers get top colors from a screenshot or design

I wanted to share this tool I built because it's been very useful to me when working with designers. You drag and drop an image into it and it will tell you the top colors with Android, Swift, and CSS code for using the color.

Check it out: https://codepen.io/blixt/pen/VvYPOm

![Screen Shot 2017-08-27 at 2.38.20 PM.png](https://steemitimages.com/DQmdmpWmXSfENRt4UtaNqFduUqCgrkhyRvcxC6tYmK7738B/Screen%20Shot%202017-08-27%20at%202.38.20%20PM.png)

👍 bigdeej, pilcrow, larrydavid4, scrooger, sarahburton, vicbarnes, ianworthington, steem.chess, jeanlucpicard, samfranky, haileytennet, samdenton, frankholden, kerrytunsbridge, neilpatel, jerrysmith, amazingclaire, dune69, godspeedexe, nickfost, jcramos, pjhom, woetez, bangkokbrit, mattuk, imransoudagar, jaynene, shadowbot, jonbit, dotty1112, ahmedhani, shaivpidadi, public-money, sophie-eva, darreng0531, ckbahdon, aidefr, blixt2, prettyrose, simplicityiskey, extreme1728, essaki1983, twoitguys, foody, sehrishfatima, nabilanazir, notabot04, danpilkington, aphael, the.assassin, saintsweeto, janebarrow, thegoodquote, grandpawhale, lebelienk, orangejuicee, paced.financial, yennad.atkun529, sarahsepia, ricardovice

`author`	blixt2
`permlink`	i-made-a-tool-that-lets-designers-programmers-get-top-colors-from-a-screenshot-or-design
`category`	programming
`json_metadata`	{"tags":["programming","design","android","ios","css"],"image":["https://steemitimages.com/DQmdmpWmXSfENRt4UtaNqFduUqCgrkhyRvcxC6tYmK7738B/Screen%20Shot%202017-08-27%20at%202.38.20%20PM.png"],"links":["https://codepen.io/blixt/pen/VvYPOm"],"app":"steemit/0.1","format":"markdown"}
`created`	2017-08-27 18:40:30
`last_update`	2017-08-27 18:40:30
`depth`	0
`children`	11
`last_payout`	2017-09-03 18:40:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.640 HBD
`curator_payout_value`	0.176 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	448
`author_reputation`	3,757,878,226
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,050,023
`net_rshares`	201,592,765,276
`author_curate_reward`	""

properties (23)vote details (60)

voter	rshares	pct
nickfost	1,079,360,440	32%
sarahsepia	69,969,263	32%
notabot04	206,150,733	32%
the.assassin	201,808,258	32%
dotty1112	534,369,078	32%
mattuk	876,518,047	32%
dune69	1,831,497,048	32%
scrooger	7,808,344,397	32%
steem.chess	2,713,406,529	32%
bangkokbrit	882,184,322	32%
imransoudagar	764,999,657	32%
pilcrow	27,531,198,510	50%
lebelienk	198,444,605	32%
jonbit	566,307,690	32%
nabilanazir	206,527,964	32%
twoitguys	268,425,888	32%
sehrishfatima	213,926,900	32%
samfranky	2,445,761,516	32%
vicbarnes	2,713,869,414	32%
jeanlucpicard	2,446,447,708	32%
bigdeej	85,997,607,846	32%
darreng0531	382,412,881	32%
samdenton	2,445,299,096	32%
ianworthington	2,713,818,193	32%
haileytennet	2,445,536,684	32%
sarahburton	2,752,830,605	32%
kerrytunsbridge	2,444,757,759	32%
danpilkington	202,471,353	32%
janebarrow	200,359,929	32%
frankholden	2,445,061,383	32%
jerrysmith	2,444,586,149	32%
neilpatel	2,444,744,621	32%
amazingclaire	2,444,533,354	32%
aphael	201,863,721	32%
shaivpidadi	474,229,431	32%
jaynene	763,900,527	32%
larrydavid4	27,006,387,473	32%
orangejuicee	198,431,190	32%
jcramos	1,067,537,955	32%
foody	217,200,121	32%
yennad.atkun529	198,246,400	32%
public-money	454,578,830	32%
grandpawhale	199,381,701	32%
thegoodquote	200,083,419	32%
paced.financial	198,338,898	32%
woetez	1,014,978,945	32%
saintsweeto	201,112,648	32%
shadowbot	581,515,389	32%
ahmedhani	514,968,652	32%
godspeedexe	1,105,384,834	32%
aidefr	373,333,785	32%
blixt2	372,142,433	32%
sophie-eva	405,430,724	32%
ckbahdon	378,317,730	32%
prettyrose	371,400,373	32%
pjhom	1,056,264,607	32%
simplicityiskey	371,399,270	32%
extreme1728	371,399,259	32%
essaki1983	371,399,141	32%
ricardovice	0	100%

@pilcrow · Aug 28 '17

Nice! Can you explain a little bit how you did this? I'm curious to learn how it works.

properties (22)

`author`	pilcrow
`permlink`	re-blixt2-i-made-a-tool-that-lets-designers-programmers-get-top-colors-from-a-screenshot-or-design-20170828t085057720z
`category`	programming
`json_metadata`	{"tags":["programming"],"app":"steemit/0.1"}
`created`	2017-08-28 08:51:06
`last_update`	2017-08-28 08:51:06
`depth`	1
`children`	1
`last_payout`	2017-09-04 08:51:06
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	87
`author_reputation`	2,531,070,549,481
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,103,096
`net_rshares`	0

@blixt2 · Aug 28 '17

Sure! The principle is very simple, it just scans the entire image and counts up the number of equal colored pixels. Then it sorts the resulting map by number of instances (descending, so most common color is at the top) and trims the list at 100 before displaying it in the UI.

The rest is a bunch of JavaScript specific stuff, like getting the blob from drag & drop result, reading bytes from the canvas buffer, using promises to split up asynchronous parts, and so on. For gleaning into that it's probably best to skim through the code, it's written in ES6 flavor and should be fairly readable!

properties (22)

`author`	blixt2
`permlink`	re-pilcrow-re-blixt2-i-made-a-tool-that-lets-designers-programmers-get-top-colors-from-a-screenshot-or-design-20170828t144731209z
`category`	programming
`json_metadata`	{"tags":["programming"],"app":"steemit/0.1"}
`created`	2017-08-28 14:47:30
`last_update`	2017-08-28 14:47:30
`depth`	2
`children`	0
`last_payout`	2017-09-04 14:47:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	598
`author_reputation`	3,757,878,226
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,130,628
`net_rshares`	0

@steemitboard · Aug 30 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170830t222526000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-08-30 22:25:27
`last_update`	2017-08-30 22:25:27
`depth`	1
`children`	0
`last_payout`	2017-09-06 22:25:27
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	682
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,386,465
`net_rshares`	0

@steemitboard · Sep 2 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170902t012130000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-02 01:21:30
`last_update`	2017-09-02 01:21:30
`depth`	1
`children`	0
`last_payout`	2017-09-09 01:21:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	682
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,603,742
`net_rshares`	0

@steemitboard · Sep 3 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/voted.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes received

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170903t075538000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-03 07:55:36
`last_update`	2017-09-03 07:55:36
`depth`	1
`children`	0
`last_payout`	2017-09-10 07:55:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	691
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,720,591
`net_rshares`	0

@steemitboard · Sep 4 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170904t040523000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-04 04:05:21
`last_update`	2017-09-04 04:05:21
`depth`	1
`children`	0
`last_payout`	2017-09-11 04:05:21
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	682
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	13,807,344
`net_rshares`	0

@steemitboard · Sep 16 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170916t104038000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-16 10:40:36
`last_update`	2017-09-16 10:40:36
`depth`	1
`children`	0
`last_payout`	2017-09-23 10:40:36
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	682
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	15,044,562
`net_rshares`	0

@steemitboard · Sep 29 '17

Congratulations @blixt2! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click [here](https://steemit.com/@steemitboard)

If you no longer want to receive notifications, reply to this comment with the word `STOP`

> By upvoting this notification, you can help all Steemit users. Learn how [here](https://steemit.com/steemitboard/@steemitboard/http-i-cubeupload-com-7ciqeo-png)!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20170929t181518000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notifications.png"]}
`created`	2017-09-29 18:15:18
`last_update`	2017-09-29 18:15:18
`depth`	1
`children`	0
`last_payout`	2017-10-06 18:15:18
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	682
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	16,304,384
`net_rshares`	0

@steemitboard · Aug 24 '18

Congratulations @blixt2! You have completed the following achievement on Steemit and have been rewarded with new badge(s) :

[![](https://steemitimages.com/70x80/http://steemitboard.com/notifications/votes.png)](http://steemitboard.com/@blixt2) Award for the number of upvotes

<sub>_Click on the badge to view your Board of Honor._</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



**Do not miss the last post from @steemitboard:**
[SteemitBoard and the Veterans on Steemit - The First Community Badge.](https://steemit.com/veterans/@steemitboard/steemitboard-and-the-veterans-on-steemit-the-first-community-badge)

> Do you like [SteemitBoard's project](https://steemit.com/@steemitboard)? Then **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20180824t015842000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notify.png"]}
`created`	2018-08-24 01:58:42
`last_update`	2018-08-24 01:58:42
`depth`	1
`children`	0
`last_payout`	2018-08-31 01:58:42
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	900
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	69,179,455
`net_rshares`	0

@steemitboard · Dec 20 '18

Congratulations @blixt2! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

<table><tr><td>https://steemitimages.com/60x70/http://steemitboard.com/@blixt2/votes.png?201812200224</td><td>You made more than 5000 upvotes. Your next target is to reach 6000 upvotes.</td></tr>
</table>

<sub>_[Click here to view your Board of Honor](https://steemitboard.com/@blixt2)_</sub>
<sub>_If you no longer want to receive notifications, reply to this comment with the word_ `STOP`</sub>



> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!

properties (22)

`author`	steemitboard
`permlink`	steemitboard-notify-blixt2-20181220t031631000z
`category`	programming
`json_metadata`	{"image":["https://steemitboard.com/img/notify.png"]}
`created`	2018-12-20 03:16:30
`last_update`	2018-12-20 03:16:30
`depth`	1
`children`	0
`last_payout`	2018-12-27 03:16:30
`cashout_time`	1969-12-31 23:59:59
`total_payout_value`	0.000 HBD
`curator_payout_value`	0.000 HBD
`pending_payout_value`	0.000 HBD
`promoted`	0.000 HBD
`body_length`	750
`author_reputation`	38,975,615,169,260
`root_title`	"I made a tool that lets designers/programmers get top colors from a screenshot or design"
`beneficiaries`	`[]`
`max_accepted_payout`	1,000,000.000 HBD
`percent_hbd`	10,000
`post_id`	77,101,209
`net_rshares`	0

@steemitboard · Aug 18 '19

Congratulations @blixt2! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@blixt2/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@blixt2) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=blixt2)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!

properties (22)