デザイナー必見無料で使える便利な配色系ツール26選

2024年03月14日(木)11:10

今もなお、生成AIを使った新技術の情報がリリースされています。中には明らかに著作権を侵害しているサービスが人気を博しているケースもあり、クリエイターにとっては期待が高まる一方で多くの不安も感じていることかと思います。

本連載でもたくさんの生成AIに関するサービスを紹介してますが、クリエイターの生業を侵食するのではなく、サポートする生成AIを紹介したいと思っています。そんな中で、安心して生成AI技術を利用できるのジャンルの一つとして、配色系ツールがあります。配色系ツールも日々進化していますが、生成AIや機械学習といった最新技術使った興味深いツールも増えてきました。

そこで、今回は最新の技術も導入されたサービスも含めて、無料で使えるおすすめの配色系ツールをジャンル別に紹介します。

目次

おすすめの配色ツール26選（生成AI・機械学習系 6点）
・ColorMagic ・Khroma ・COOLORS ・Palette Maker ・Colormind ・Adobe Color

1. ColorMagic

ColorMagic無料で利用できる生成AIを使った配色ジェネレーター。「夏」「夕暮れ」「ロマンティック」といったようにプロンプトを入力することによって、生成AIがそのイメージに合った配色をしてくれます。上の画像は「スポーツ」というプロンプトで生成されたパレットです。

ColorMagicURL：https://colormagic.app/

2. Khroma

Khroma好きな色を50色選ぶだけで好みにあった生成AIによる配色ジェネレーターです。配色を生成する際に50色を選択します。他の配色系ツールとは異なり、他のユーザーと結果がおなじになる確率は天文学的な値になるので、内容が被ってしまうリスクはほぼゼロに近いでしょう。配色のオリジナリティを重視する場合は、特におすすめしたいサービスです。

KhromaURL：https://www.khroma.co/

3. COOLORS

COOLORSChatGPTを利用した生成AI配色ジェネレーターです。高機能なプロ版もありますが、（やや広告が多めなものの）無料で利用も可能です。コントラストの確認、明度によるバリエーション、カラーの保存、HEX（HTMLで使われる16進数のカラーコード）の取得なども、ワンクリック操作で簡単です。

COOLORSURL：https://coolors.co/

4. Palette Maker

Palette MakerAIで独自の配色を作成し、実際のデザイン例も確認できるツールです。ロゴデザイン、UI/UX、パターン、ポスターなどの既製のデザインサンプルでカラーパレットを作成し、その動作をテストすることも可能。実際の作例を見ながら直感的に配色を選択できるので、ノンデザイナーにもおすすめの配色ツールです。

Palette MakerURL：https://palettemaker.com/app

5. Colormind

Colormind深層学習を使用した配色ジェネレーターです。写真、映画、ポピュラーアートなどからカラースタイルを学習できるツールです。「フォービズムの芸術作品」「AKIRA」「アメリ」など様々な作品をイメージした配色も確認できるので、見ているだけでも参考になります。

ColormindURL：http://colormind.io/

6. Adobe Color

Adobe Color
可読性も確認できるAdobe公式の配色ツールです。Adobeのリソースを生かした配色パレットの提供だけでなく、Fireflyによる生成AI機能も利用できる点も便利です。新機能である「LAB」では、SVGファイルをドラッグ＆ドロップして生成AIによる再配色ができます。Adobe CCに加入していなくても利用できるのも魅力的です。

Adobe ColorURL：https://color.adobe.com/ja/create/color-contrast-analyzer/

おすすめの配色ツール26選（ワンクリック系 3点）
・SCHEME COLOR ・Color Palette Generator ・FarbVélo

7. SCHEME COLOR

SCHEME COLOR1万以上のカラースキームが公開されている配色パレット提供サイト。「GENERATE」のボタンをクリックするだけで、様々な配色が作成されます。広告が多いのが少し難点ですが、配色パターンも多く簡単に利用できるので、配色のアイデアをがんが得る際にも役立ちます。

SCHEME COLORURL：https://www.schemecolor.com/

8. Color Palette Generator

Color scale generator最適な色を組み合わたカラーパレットを生成してくれる配色ジェネレーター。難しい設定やログイン登録もなく「GENERATE」のボタンをクリックするだけで、自動的に配色パレットが生成できるのも魅力的。配色に関する知識は必要ないので、デザイナーはもちろんノンデザイナーにもおすすめの配色サービスです。

Color Palette GeneratorURL：https://www.colourpalettegenerator.com/

9. FarbVélo

FarbVéloワンクリックでグラデーションの配色を提供してくれるサイト。更新ボタンをクリックするだけで、様々なグラデーションを作成してくれるので、感覚的に利用できます。カラー名やカラーコード（HEX）なども瞬時に確認できます。

FarbVéloURL：https://farbvelo.elastiq.ch/

おすすめの配色ツール26選（画像色抽出系 3点）
・IroSphere ・COLOURlovers・COLORS

10. IroSphere

IroSphere
画像から色を抽出してHSL色空間（色を色相、再度、輝度の3要素で表現する方式）に色相を配置するツール。色を座標に変換することで、より詳細な色の分析が行えるようになります。画面に写真をドラッグ＆ドロップするだけで利用できます。ゲーム開発やVR、ARなど3Dおよび2Dのアプリケーションを開発する総合環境であるUnityというプラットフォームをインストールしなければ使えなかったツールでしたが、ブラウザ版がリリースされたことで簡単に使えるようになりました。

IroSphereURL：http://tali-lab.com/IroSphere/

11.COLOURlovers

写真から色を抽出して配色パレットを作成できるツール。実際に自分の写真を使ってカラーを抽出するには、アカウント登録・ログインやSNSやWebサイトなどに画像をアップロードする必要がありますが、自動的に写真から色を抽出してくれるので便利です。

COLOURloversURL：https://www.colourlovers.com/

12.COLORS

プレゼンテーション用のデザインツールを提供する「プレゼンデザイン」が提供するグラフ・チャートの配色を作成できるツール。

配色ジェネレーターによって生成された配色のカラーコードをワンクリックで取得可能。カラーピッカー機能を使えば写真からカラーを抽出することも可能で、オリジナルのテーマカラーを作成することもできます。

COLORSURL：https://colors.design4u.jp/

おすすめの配色ツール26選（Webデザイン系 5点）
・Leonard ・HUE/360 ・Color scale generator ・Happy Hues ・Figma Color Wheel

13. Leonard

Leonard便利な機能を数多く搭載した配色ツールです。「Color scales」という機能では、カラースケールの詳細な分析が可能で、カラーデータを可視化できます。統一感のあるカラースケールを作成できるので、地図の色分けやグラフの色分けなどにも役立ちます。他にもWebアクセシビリティの高いカラーテーマを作成できる「Adaptive color theme」や、コントララストなどを評価できる「Color toolbox」といったツールも利用できます。

LeonardURL：https://leonardocolor.io

14. HUE/360

HUE/360360度の色相環で、色相（hue）、彩度（chroma）、明度（brightness）を調整し直感的に理想的な配色ができるツールです。配色の基本に立ち返って、配色アイデアを練り直したい場合にも便利です。

HUE/360URL：https://hue360.herokuapp.com/

15. Color scale generator

Color scale generator非常にシンプルなカラースケールのジェレレーターです。生成したカラー情報のSVGや、テキストデータを直接Figmaにペースト可能な配色ツールです。デザインのスタイルガイドなどを作成する際など、カラー情報のSVGが必要などにも便利です。

Color scale generatorURL：https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/1D9A6C/29/154/108/white

16. Happy Hues

Happy Hues実際のWebデザインでの配色をイメージしやすいように工夫された配色ツール。配色パレットのアイコンをクリックするだけで、サイトのデザインイメージを確認できるので、ノンデザイナーにもおすすめのサービスです。

また、チャットアプリやCMSなど、管理画面の配色を変更できるサービスがありますが、こうした配色のバリエーションのアイデアを練るのにも役立つでしょう。

Happy HuesURL：https://www.happyhues.co/

17. Figma Color Wheel

Figma Color WheelFigmaの公式の配色ジェネレーターです。カラーホイール上で色を選択だけで、補色や同系色などのカラーコードを簡単に取得できます。カラーコードを入力してカラーを選択することでも利用できるので、すでにコーポレイトカラーやブランドカラーなどが決まっている場合に、アクセントカラーを設定する、ボタンのホバー時のカラーを決めるといった用途にも便利です。

Figma Color WheelURL：https://www.figma.com/ja/color-wheel/

おすすめの配色ツール26選（UI/UXデザイン系 2点）
・huey ・Huetone

18. huey

hueyUI/UXデザインやユニバーサルデザインも意識した配色ツールです。色覚異常や視覚障害のある人でも、テキストと背景の違いを明確に認識できるようにするWebアクセシビリティのガイドラインであるWCAG（Web Content Accessibility Guidelines）で定められたテキストと背景の色のコントラスト比をチャートで確認することもできます。

hueyURL：https://huey.design/

19.Huetone

Huetone
詳細なカラー情報を確認できる配色ツールです。WCAGのコントラストや、WCAG 3.0（現在は草案段階のバージョン）で提唱されている新基準のAPCA（Advanced Perceptual Contrast Algorithm）のコントラストなども確認できます。論理的に配色アイデアをねっていきたい場合に非常に役立つツールです。

HuetoneURL：https://huetone.ardov.me/

おすすめの配色ツール26選（マテリアルデザイン系 2点）
・Colors & Palettes：Material UI Colors ・Material Design The color system

20. Colors & Palettes：Material UI Colors

Material UI Colorsマテリアルデザインに特化したオンラインの配色パレットです。カラー情報も、HEX、RGB、HSL、CMYK、カラーIDなどに切替可能。同サービス内では、マテリアルデザイン以外にもフラットデザイン向けの「Flat UI」、SNS向けの「Social」といった配色パレットも提供されています。

Colors & Palettes：Material UI ColorsURL：https://materialui.co/colors/

21. Material Design The color system

Material Design The color systemGoogle公式が提供するマテリアルデザイン向けのサービス内にある配色パレットです。Googleが推奨するマテリアルデザインに準拠した配色を確認できます。

調和のとれた同系色をまとめた配色などのカラー情報を得るにも便利なサービスです。

The color systemURL：https://m2.material.io/design/color/the-color-system.html#color-theme-creation

おすすめの配色ツール26選（配色見本 5点）
・NIPPON COLORS ・Color Lisa ・BrandColors ・Pigment ・Color Hunt

22. NIPPON COLORS

日本の伝統的な配色パレットを提供しているサイト。「浅葱」「薄紅」「琥珀」など、和色お名前も確認できる。CMYKやRGBの値、HEXカラーコードなども簡単に確認できます。和色の飲食店、神社・仏閣、伝統工芸品を作成する会社など、和のテイストを重視した販促物・Webサイト等を作成したい場合に、ぜひ参考にしたい配色提供サイトです。

NIPPON COLORSURL：https://nipponcolors.com/

23.Color Lisa

Color Lisa世界の様々なアーティストの作品を基に配色イメージを提供する配色系サービス。ミケランジェロ、レオナルド・ダヴィンチ、レンブラント、ゴッホ、マネ、リキテンスタインといった様々な時代の芸術家の配色がラインアップされています。美術展や博覧会などの販促物などを作成するときも便利です。

Color LisaURL：https://colorlisa.com/

24.BrandColors

BrandColorsGoogle、Microsoft、Apple、Adobeなど世界的な大企業のブランドカラーや、有名大学のスクールカラーなどがまとめられたサイト。配色の参考に用いることはもちろん、ブランドカラーを決定するときに他企業のブランドカラーと被らないように参考するときにも非常に便利です。

BrandColorsURL：https://brandcolors.net/

25.Pigment

Pigmentバイカラー（2色配色）の組み合わせを確認できる配色ツールです。表示されている2色配色を色素の濃度や色の明度を調整して微調整することも可能です。カラーコードが表示されているエリアにポインタを合わせれば、同系色のカラー情報を得ることもできます。

PigmentURL：https://pigment.shapefactory.co/

26.Color Hunt

Color Hunt様々な4色を組み合わせた配色パレットがコレクションされたサイトです。メインカラー、サブカラー×2、アクセントカラーといった組み合わせを考える際にも、参考になるサイトです。「レトロ」「パステル」「ヴィンテージ」など、カテゴリーで配色パレットを検索することもできます。

Color HuntURL：https://colorhunt.co/

まとめ

ここまで様々な配色ツールを紹介してきましたが、今回ピックアップしたツールを眺めていくだけでも最新の配色技術のトレンドを理解できるかと思います。色に関する造詣やツールを使うスキルは、デザイナーも含めたクリエイター職だけでなく、一般のビジネスパーソンにも重要な知識になってきています。これまで以上にWebアクセシビリティやユニバーサルデザインなどに求められることも増えていくことでしょう。そのため、本記事を参考に配色系ツールを使いこなしてもらえれば幸いです。