色選びに困ったらこのサイトを使おう！おすすめ無料カラーツール3選

どうも、くじらいどです。

ブログのアイキャッチ作ったり、サムネ考えたりするとき、いつも色選びで手が止まりませんか？

私はずっとそうでした。

なんとなく好きな色を選んでみると「なんかダサい…」ってなるし、
かと言って色の理論とか勉強する気力もなかったし（笑）

そんなときに出会ったのが、今回紹介する無料のカラーツールたちです。

色の知識ゼロでも、センスに自信がなくても、ツールに任せてしまえばそれっぽい配色が決まります。しかも全部ブラウザだけ、インストール不要。

実際に私が使っていておすすめの3つを紹介します。

① Coolors ── とりあえずスペースキーを連打する

Coolors（クーラーズ）は、スペースキーを押すだけで配色が自動生成されるツールです。

5色のパレットがパッと表示されて、気に入らない色だけロックして、またスペースを押す。それだけ。

初めて使ったとき「え、これだけ？」って拍子抜けするくらいシンプルです。でもその分、とにかく早い。

Coolorsの使い方

登録不要、無料で使えます。有料プランもありますが、配色を作るだけなら無料で十分です。

② Adobe Color ── メインカラーを決めたら残りを任せる

Adobe Colorは、Adobeが無料で提供しているカラーツールです。

「補色」「類似色」「トライアド」などの配色ルールを選ぶと、その法則に沿った色の組み合わせを自動で提案してくれます。

配色ルールというのは、こういうものです。

• 類似色：色相環で隣り合う色。まとまりがあって落ち着いた印象になる
• 補色：色相環で正反対の色。コントラストが強くインパクトが出る
• トライアド：色相環を3等分した位置の色。バランスよくカラフルにまとまる

私の使い方はシンプルで、「このブルーを使いたい」と1色だけ決めて、残りの色はAdobe Colorに任せる、という感じです。

Adobe Colorの使い方

③ WebAIM Contrast Checker ── 読みやすさを「数値」で確認する

WebAIM Contrast Checkerは、背景色と文字色の組み合わせが読みやすいかどうかを数値で判定してくれるツールです。

「なんかこの組み合わせ、見づらくない？」と感じたことはありませんか？

実はあれ、センスの問題じゃなくてコントラスト比（背景と文字の明るさの差）の問題です。この数値が小さいほど読みにくくなります。

以前、このブログのカラーを変えようとしたとき、自分では「いい感じかな」と思った組み合わせをこのツールで確認したら「Fail」と出てびっくりしました。見た目の印象と実際の読みやすさって、けっこう違うんですよね。

WebAIM Contrast Checkerの使い方

サイトは英語表示ですが、「Pass」「Fail」だけ見ればいいので問題ありません。

3つのツール、私はこう使っています

この3つをセットで使うと、配色迷子からかなり解放されます。私の流れはだいたいこんな感じ。

• 色のイメージが全然ない → Coolors でスペース連打してインスピレーションをもらう
• メインカラーは決まった → Adobe Color で残りの配色を法則から決める
• 配色が決まったら → WebAIM Contrast Checker で文字の読みやすさを確認する

まとめ

今回紹介した3つの無料カラーツールをまとめます。

• Coolors：スペースキー連打でパレット生成。ゼロから色を探したいとき
• Adobe Color：色の法則で「外れない」組み合わせを作れる
• WebAIM Contrast Checker：背景×文字色の読みやすさを数値で判定

3つとも完全無料・インストール不要・ブラウザだけで使えます。

「デザインセンスがない」は、いいツールを知らなかっただけかもしれません。ぜひ試してみてください。

以上、くじらいどでした！