Day 005
その写真、何色でできてる?
画像を1枚入れると、その写真をいちばん占めている6色を取り出します。色をタップすればHEXがコピーされます。
画像はどこにも送信されません。すべてこの画面の中だけで処理されます。
手元に画像がなければ、サンプルで
面積の大きい順。タップでHEXをコピーできます。
この仕組みについて
- メディアンカット法で6色に整理しています。全画素をひとつの箱に入れ、色のばらつきがいちばん大きい箱をその中央値で2つに割る、を6箱になるまで繰り返して、箱ごとの平均色を代表色にします。写真に無い色は出てきません。
- 占有率が25%・12.5%のような刻みに揃うのは、この方法が画素数を半分ずつに割っていくからです。色ごとの実面積そのものではなく、6色に振り分けたあとの画素数の割合が出ています。
- 数えるのは最大辺120pxに縮小した画素です。1点の色を拾うスポイトではなく、写真全体の面積で効いている色が出ます。
- 色数は6色固定です。設定を持たないぶん、入れた瞬間に結果が出ることを優先しました(べた塗りの画像のように色が6種類に届かないときは、出る色も少なくなります)。
- 色の上の文字は、その色の相対輝度(WCAGの計算式)で黒と白を切り替えています。明るい色には黒、暗い色には白が乗ります。
- 読めるのはブラウザが表示できる画像形式だけです。iPhoneのHEICは環境によって開けません(開けなかったときは1行だけお知らせします)。
- 画像はどこにも送信されません。読み込みも縮小も色の計算もすべてこの画面の中で行われ、保存もしません。ページを離れれば消えます。サンプルの3枚も画像ファイルではなく、開くたびにその場で描いています。