デザイン作業してると、色まわりの確認だけでタブが5個ぐらい開きっぱなしになりませんか。自分はなります。HEXを変換するタブ、和色の名前を調べるタブ、コントラスト比を測るタブ…。色葉は、そのタブの数をどうにか減らしたくて作った道具です。
- HEX・RGB・HSLの相互変換
- 和色(伝統色)の一覧
- 配色パレット作成
- 画像からの色抽出
- WCAGのコントラスト比判定
1つ1つは別に珍しい機能じゃないんですが、実際のデザイン作業ではこの5つを行ったり来たりする場面がとにかく多くて、それなら1箇所にまとめてしまえばいいじゃないか、というシンプルな発想から始まっています。
和色一覧は趣味です
個人的にこだわったのが和色一覧です。ただの色変換ツールで終わらせたくなかったので、「今様色」とか「東雲色」みたいな日本の伝統色を眺められるようにしました。
正直これ実用性というより趣味で入れた部分もあります。
だって、日本の伝統色の名前って、凄くかっこよくないですか！！
色を漢字で表現するのってとても趣があると思います。
それでも、名前と色を眺めてるだけで配色のヒントになったりするので、我ながらいい判断だったと思っています。
画像から色を拾える機能をあとから足した理由
「画像から色を抽出する」機能を足したのは、自分自身が配色に迷ったときの行動を振り返ったのがきっかけでした。配色のインスピレーションって、大体既存のデザインとか写真から来るんですよね。「この写真の夕焼けの色、使いたいな」と思っても、目視でHEXコードを推測して打ち込む、というのを実際にやってみると、想像以上に色味がズレます。「これ全然思った色にならないな」と何度もやり直した経験があり、それなら画像から直接拾えるようにすればいいじゃないか、と思い立ちました。
画像をアップロードするだけで、そこに含まれる色をピクセル単位で拾ってHEXコードにできるようにしています。目分量じゃなく実際にそこにある色をそのまま数値化できるので、再現性が段違いに上がります。ちなみにこの機能、画像をサーバーに送らずブラウザ内のCanvas APIだけで処理を完結させています。個人的な写真をアップロードする人もいるだろうと思うと、ここは絶対に外部送信させたくなかったので、多少実装が面倒でも譲れなかった部分です。
あとコントラスト比の判定は、後から付け足す機能じゃなくて最初からちゃんと中心に据えました。配色ってかっこよさだけの話じゃなくて、文字が読めるかどうかにも直結する話なので、見た目とアクセシビリティを同じ画面で一緒に確認できるようにしたかったんです。
おかげで色にまつわる作業であちこち彷徨わなくて済む場所は、一応この店にできたんじゃないかと思っています。