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

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

更新2024/02/09

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

【PR】

写真と動画の人気オンラインコース

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 のサイトへ▶︎

その他配色決めに役立ちそうなもの

配色ツールの他、色決めに役立つ記事もピックアップしておきます。

写真を参考にカラーの組み合わせを紹介しています。こちらに紹介されているものの他、自分で気になった画像からカラー決めをするのもいいと思います。

タイトル通り配色を決めるための原則をまとめている記事です。うまく選ぶことができない時にこちらの基本原則を確認してみてください。

色の属性やコントラストについて知っておくことは、よりより配色を決めるために必要なことだと思います。どういった組み合わせにすれば良いのか、参考になる記事です。

メインカラー・サブカラー・コンバージョンカラーの決め方や色彩心理学に基づいた色のイメージ、業種別のおすすめカラーなどが紹介されています。
運営するサイトにおいてどんな色を設定するのがいいかを決める上で参考になると思います。

【PR】

TOPへ