投稿日：2019年05月20日

こんばんは、ナカです。

今回は、気に入っている配色ツールを紹介したいと思います。

1.color-sample.com
使用している色がある程度決まっていたり、保守作業の配色などで役に立ちます。
カラーコードやトーン、色の系統など様々な内容で検索でき、カラーの個別ページでは情報量が多く、色候補や配色パターンが複数あるため、既存のカラーと合うかどうかを考えながら選べます。

2.HUE/360
はじめに明度、続いて色相環から色みを選んでいくと、相性の良いカラーに絞られるため、その後は何となくで相性の良いカラーを選んでいくことができます。
ページの一番下に選んだカラーが増えていき、カラーバーの×アイコンをクリックすると選択を解除できます。カラーコードは一番最初に選んだカラーバー上にある「Print User Color」のリンクで確認できます。

3-1.トーン別の色相カラーチャート
3-2.明度・彩度のカラーチャート
トーン別の色相カラーチャートは既存サイトの配色を考える場合、トーンを合わせる際に役に立ちます。
明度・彩度のカラーチャートは色相とトーンと配慮しながら配色を考えることができます。
また、各ページのヘッダーにある各カラーリンクから色の個別ページに遷移できますが、色の個別のページでは色の持つ心理効果やイメージ等を確認できます。

上記の配色ツールを知ってからはどんな配色ツールがあるか検索していなかったのですが、最近はAIが配色を考えてくれたり、画像から色をとって配色パターンにしてくれたりと、便利な配色ツールがたくさんあるようですね。
表示されるカラーがlikeかdislikeかを選びつつ色を選んでいくツールもあり、直感的で面白いと思いました。

最後まで読んでいただきましてありがとうございます。