配色に困ったときに使えるカラーパレットサイトのブックマーク

サイトのカラー決めに悩んだときに利用したいのがカラーパレットツール（配色パターンツール）です。さまざまなツールが配信されているのでどれを使うか迷ってしまいますよね。
そこで、使ってみていいなと思ったものやどういうときにどのカラーパレットツールが使いやすいかまとめていきます。何がいいか悩んだ際には参考にしてみてください。

Color Hunt

Color Hunt は独自のパレットクリーエーターを使って、ユーザーが作成したカラーパレットをコレクションしています。誰でもパレットを作成することができますが、キュレーターによって審査し厳選されたものが公開されるようです。

基本となるカラー1色を選んでそれに当てはまる配色パターンを検索することができますし、複数のカラーでも検索できます。
パステルやビンテージといったテイストごとでも検索できるので、まだ色が決まっていないがなんとなくのテイストイメージはあると言うときにも参考になります。

何も決まっていない状態でも、人気の配色からインスピレーションを得ることができます。

気になった配色はお気に入りとして自分用のコレクションに登録することもできます。

Color Hunt のサイトへ▶︎

SCHEM COLOR

SCHEM COLOR はイメージするものがあるときに利用するのがおすすめです。もちろん何も決まってなくても「Generate」からランダムな配色パターンをチェックすることもできるので、インスピレーションを得たい場合にも使えます。

任意のテキストで検索ができるので、何かしらの検索ワードがある時はこの検索機能を利用するのもおすすめです。例えば company で検索するとそれに関連した配色パターンが表示されます。
英語サイトなので日本語だと思った通りの検索結果は出にくいと思います。できれば英語表記で検索をかけてみてください。

人気の検索ワードはフッターの TRENDING に表示されているので、ここからイメージにあるものをチェックしてみるのもおすすめです。

「Web Design」のカラーリストや素敵な写真から配色カラーを抽出したリストなどもあり様々な分野から配色パターンを探せます。

SCHEM COLOR のサイトへ▶︎

khroma

khroma は自分の好きな色をAIが学習し、カラーパレットを生成してくれるツールです。

まず自分の好きな色を50色選びます。ここで選んだカラーをAIが学習しカラーパレットが生成されます。50色を選ぶのはなかなか大変ですが、最良のカラーパレットを作るためにさまざまな色相や彩度で自分が好きだと思える色を登録していきましょう。

「Generate」ボタンをクリックすると以下のような画面に移ります。
下の方にカラーが表示されるので選んでクリックしていきます。クリックしたものは上部のバーに表示されていきます。

色を選んでいる最中に右下にテキストが表示されることがあります。これは「この色を選んだ方がもっと良い結果になるよ」という文章です。あまり長く表示されているわけではないので、表示されたらどの色が足りていないかすぐチェックするようにしてください。

50色選んだら「Start traning」ボタンを押してカラーパレットが生成されるのを待ちます（私の時は2〜3分ほどかかりました）。

最初のトレーニング完了後カラーパレットが表示されます。初めはテキストと背景のカラーパレットが表示されますが、左上のアイコンをクリックすると表示方法を変更することができます。4色のパレットやグラデーションなどがあります。

2023年8月現在ベータ版を使用しています。この段階では、データはローカルストレージに保存されるようになっているようです。お気に入りのカラーをトレーニングしたデバイスとブラウザでのみ学習したカラーパレットにアクセスできます。データは生成後にダウンロードしたり転送したりできます。

khroma のサイトへ▶︎

Colorbase

色情報、カラーパレット、コントラストチェッカーの機能を一つにまとめられたツールです。

色情報を見るときには色の百科事典 ColorHexa も詳しく載っていて便利なのですが、私はColorbaseの方が見やすいです。

アクセシビリティに配慮するための色覚シミュレーションやコントラストチェッカーは、私のように配色に疎い人には大いに役立ちます。
WordPressでこの記事を書いているときに「この色の組み合わせは読みにくいため、より暗い背景色、より明るい文字色を試してください。」と表示されていたのですが、コントラストチェッカーを使って素早く改善できました。