Khromaの代替7選｜無料・日本語・オープンソースで選ぶ配色ツール(2026年版)

配色で手が止まって、気づいたら1時間経っていた。Khromaに好きな色を50個食べさせたところまでは良かったのに、いざ実務で使おうとすると微妙にかみ合わない——そういう状態で代替を探している人が多いはずです。

先に答えを出します。Khromaの「学習してくれる」部分を再現できる代替は、2026年7月時点では存在しません。 だから乗り換えは「同等品を探す」のではなく、「配色作業を分解して、それぞれ強いツールに割り振る」やり方になります。

Khromaとは何で、なぜ乗り換えたくなるのか

Khromaとは、好きな色を50個選ぶだけで、その好みを学習して自分専用の配色パターンを提案してくれるAI配色ツールです。ブラウザで動き、色の組み合わせをグラデーション、文字サンプル、画像フィルターなどの形で見せてくれます。

学習型という設計は今でも尖っています。ただ、その尖り方が実務では裏目に出ることがある。

代替探しに至る理由は、だいたい次の4つに集約されます。

• 好みを学習し直すのが重い — 案件ごとにトーンが変わる受託仕事だと、50色の再選択が毎回のコストになります
• チームで同じパレットを共有できない — 個人の好みに最適化される設計上、チームの共通言語にしづらい
• アクセシビリティの検証がない — 提案された組み合わせが文字色として読めるかどうかは別途チェックが必要です
• UIが英語のみで、出力の落とし所が狭い — CSS変数やデザイントークンとしてそのまま持ち出す導線が弱い

つまりKhromaは「ひらめきを出す機械」であって、「デザインシステムを作る機械」ではありません。ここを取り違えたまま使い続けると、ずっと噛み合わない。

現行のスペックや料金の扱いはKhromaのツールページにまとめてあります。乗り換え候補を横並びで見たい人はKhromaの代替ツール一覧からどうぞ。

Khromaの代替を選ぶ4つの軸は？

配色ツールは見た目が似ているので、機能表を眺めても差が分かりません。判断軸を4つに絞ると一気に見通しが良くなります。

軸を整理した表がこちらです。自分がどの列を重視するかを先に決めてください。

つまり、Khromaの代わりを探しているつもりでも、実際に必要なのは「生成」ではなく「出力」と「検証」だった、というケースがかなり多いということ。

ここが定まっていないと、次の比較表を見ても選べません。

無料で使えるKhroma代替7つを比べる

無料で実務に耐える候補を7つに絞りました。有料版があるものも、無料の範囲で配色作業は完結します。

各候補の性格を一覧にしました。日本語UIの列がほぼ✕で埋まる点は、あらかじめ覚悟してください。

つまり、「アイデアを出す」ならHuemintかCoolors、「そのまま実装まで持っていく」ならMaterial Theme BuilderかRealtime Colorsという住み分けになります。

補足すると、Khromaの学習型に一番近い感触はHuemintです。用途を指定して生成するので、好みを覚えてはくれないものの、出てくる色の質は近い。ただし出力はHEXの羅列なので、後工程は自分で組む前提。

代替候補の選定基準そのものを見直したい人は、画像生成まわりのツール選びを整理した記事の考え方がそのまま応用できます。

日本語で使えるKhroma代替はある？

正直に言うと、配色専業ツールで日本語UIのものはほぼありません。ここは期待値を下げてください。

ただ、抜け道はあります。配色専業ツールを諦めて、日本語対応済みのデザインスイート内で色を組むやり方です。

日本語で完結させたい場合の現実解を並べました。

つまり、日本語を優先するなら「配色を作るツール」ではなく「配色を持ち込めるツール」を選ぶことになります。

日本の伝統色系のサイトを侮らないでください。藍、柿渋、鶸色といった色名がHEX付きで並んでいるだけですが、和風トーンの案件では海外の配色AIより速く着地します。地味に効きます。

なお、色関連のツールは英語UIでも操作語彙が20語程度しかありません。generate、shuffle、lock、export——これだけ覚えれば止まらない。日本語UIにこだわりすぎて選択肢を狭めるのは、もったいない話です。

オープンソースのKhroma代替はどこまで使える？

自社サービスに配色機能を組み込みたい、あるいは社外にデータを出したくない。そういう要件だとオープンソースが候補になります。

ここで方向転換が必要です。「Khromaのようなアプリ」のOSS版は存在しません。 代わりにあるのは、色を計算するライブラリ群。UIは自分で用意する前提になります。

主要なライブラリを用途別に整理しました。2026年4月時点で確認できた範囲です。

つまりOSSでKhromaを置き換えるなら、「生成のひらめき」は諦めて「計算と一貫性」を取る、という交換になります。

この割り切りができる現場は強い。色相を固定して明度だけ11段階に振る、といったルールをコードで書けば、デザイナーが不在でもトンマナが崩れません。

ローカル完結という点では、画像生成の世界でComfyUIとStable Diffusionを比較した記事と発想が近いです。手離れの良さより、自分で握れる範囲の広さを取る選択。

ここまでの整理 ひらめきが欲しい→Huemint/Coolors。実装まで一直線→Material Theme Builder。自社に組み込む→chroma.js系のライブラリ。日本語で完結→Canva AIやFigma AI側で組む。この4分岐でほぼ決まります。

Webサイトやアプリの配色に向くのはどれ？

Web制作に限定すると、答えはかなり絞れます。ライブプレビュー型かトークン出力型の二択です。

配色を単体のカードで見ると、どんな組み合わせもそれなりに見えてしまう。これが落とし穴。実際のレイアウトに流し込んだ瞬間、背景色と本文色のコントラストが足りない、アクセントが強すぎて目が滑る、といった問題が一気に出てきます。

• Realtime Colors型 — 実サイト風のダミーレイアウトに色が即反映される。判断が速い
• Material Theme Builder型 — ライトとダークの両テーマを機械的に生成し、トークン名まで付けてくれる
• Figmaのvariable運用 — デザインとコードで同じ色名を共有できる
• CSS変数への直書き — 小規模サイトなら、これで十分間に合います

Khromaが弱いのはまさにここ。提案は出るのに、その先の「実装で使う名前」まで面倒を見てくれません。

プロダクトのUI設計まで踏み込むなら、FigmaのAI機能やUizardのような画面生成系と組み合わせるのが早道です。色だけ切り出して悩む時間が減ります。

画像やイラストの配色に向くのはどれ？

Web用途とイラスト用途では、必要な配色の性質が違います。UIは3〜5色で足りますが、イラストは中間色やグラデーションの階調が要る。

このズレを無視して同じツールを使い回すと、どちらも中途半端になります。

イラスト・グラフィック側では、次の組み合わせが機能します。

• 画像から色を抽出するタイプ(Colormindなど)でベースを取る
• chroma.jsの補間で中間色を機械生成し、階調を埋める
• Recraft V3のようなブランドスタイル指定ができる生成AIに、抽出したHEXを渡す

生成AIに配色を守らせたいなら、指示文の中でHEXコードを直接書くのが一番効きます。「落ち着いた青系で」では毎回ブレる。「#1B3A5F、#4A90A4、#E8DCC4の3色で」と書けば再現性が上がります。

イラスト系ツールの選び方そのものはAIイラストツールの比較記事に詳しくまとめてあるので、生成側で迷っているならそちらが先です。

配色AIにうまく指示を出すコツは？

配色専業ツールを使わず、汎用のAIチャットに色を作らせる手もあります。これが意外と実用的。

ポイントは、AIに「色を選ばせない」ことです。制約条件を渡して、計算させる。

効く指示の型を3つ挙げます。

1. ベース色を固定して展開させる — 「#2E5E4Eを基準に、明度を10段階に分割してHEXで出力」
2. 検証条件を先に書く — 「本文色と背景色のコントラスト比が4.5以上になる組み合わせのみ」
3. 出力形式を指定する — 「CSS custom propertiesの形式で、変数名は--color-primary-100のような命名で」

このやり方だと、AIの「それっぽい嘘」(実在しない色名や、計算が合わないコントラスト比)が混ざるリスクは残ります。出てきた数値は必ず検証ツールに通してください。

色の意味づけやトレンドの裏取りをしたいときは、出典を出しながら答えるタイプのAI検索が向いています。Feloの使い方をまとめた記事は、この手のリサーチ用途の手順として参考になります。SNS運用側の配色ルールを詰めたいならMeta AIの解説記事も併せてどうぞ。

アクセシビリティ検証を外すと後で痛い目を見る

配色ツール選びで一番軽視されがちで、一番跳ね返ってくるのがここです。

WCAG(Webコンテンツのアクセシビリティ指針)では、文字と背景のコントラスト比に基準があります。これを満たしていない配色は、公共系や大企業の案件で差し戻しになります。

基準値を整理しました。数字は覚えておいて損がありません。

つまり、見た目が気持ちよくても4.5:1を割っていたら、その配色は使えないということ。

Khromaは提案の段階でこの検証をしてくれません。だからKhroma単体で完結させると、実装後にやり直しが発生する。代替を選ぶなら、検証機能が内蔵されたものを選ぶだけで、この手戻りが消えます。

薄いグレーの補足テキストは、ほぼ確実にこの基準を割ります。デザイン的には落ち着くのに、読めない。ここが最頻出の事故です。

Khromaから乗り換える具体的な手順

学習データは移行できません。ただ、成果物は持ち出せます。手順は5ステップ。

1. 既存パレットのHEXを手で書き出す — Khromaで気に入った組み合わせを、スプレッドシートに転記します。10〜20組もあれば十分
2. 代替ツールにシード色として入れる — HuemintやMaterial Theme Builderに、書き出した色を起点として渡す
3. 役割名を付ける — primary、surface、textのように用途で命名。色名(blue、greenなど)で名付けると後で破綻します
4. コントラスト比を全ペアで検証 — 文字色×背景色の組み合わせを総当たりでチェック
5. チームの参照場所を1つに決める — Figmaのvariable、CSS変数ファイル、どちらか片方に寄せる

3番を飛ばす人が多いのですが、ここが乗り換えの本質です。Khromaは色を提案するツールで、役割名を付ける仕組みがない。だから個人の中で完結してしまう。

役割名を付けた瞬間、配色は「好み」から「仕様」に変わります。チームで運用できるのはこちら。

社内でのツール導入プロセスを整えたい場合は、AIツールの内部監査を扱った記事の審査フローがそのまま流用できます。

商用利用とライセンスで気をつける点

色そのものに著作権はありません。#FF5733を誰かが独占することはできない。ここは安心してください。

ただし、注意点が3つあります。

• ブランドカラーの類似 — 競合の主要色に酷似した配色は、商標や不正競争の観点で問題になり得ます。色単体ではなくロゴ・書体との組み合わせで判断されます
• ツールが生成した「パレット画像」の扱い — HEX値の利用は自由でも、ツールが出力した画像やUIのスクリーンショットをそのまま素材として配布するのは規約違反になることがあります
• OSSライブラリのライセンス表記 — MITやApache-2.0は商用利用可ですが、著作権表示の同梱が条件です。ビルド成果物にライセンスファイルを含める設定を忘れずに

つまり、配色作業でライセンスが問題になるのは「色」ではなく「配布物」の側だということ。

社外納品する制作物では、使用したOSSライブラリの一覧を納品書に添えておくと後々もめません。地味な作業ですが、やっておくと信頼されます。

AI PICKS編集部の判定

Khromaの代替を1つだけ挙げるなら、Material Theme Builderが一択です。無料で、1色から明暗両テーマのトークン一式が出て、コントラスト比も担保される。実装まで一直線に進みます。

一方で、Khromaの「好みを学習する」体験そのものは、代替では取り戻せません。ここは正直あきらめてください。学習型の配色AIというジャンルは、Khroma以降ほとんど後続が出ていない。市場が小さすぎたのだと思います。

ひらめき用途でKhromaを残しつつ、実装用にMaterial Theme Builderを併用する。この二段構えが、現時点で一番損の少ない形です。乗り換えではなく併用。

逆におすすめしないのは、有料の配色サービスに課金することです。この領域は無料ツールの完成度が高く、月額を払って得られる差分が薄い。破格に良い無料ツールが揃っている分野で、財布を開く理由が見つかりません。日本語UIが欲しいという理由だけで有料スイートを契約するのも、正直イマイチな判断です。

よくある質問（FAQ）

Q. Khromaは今も無料で使えますか？

ブラウザから無料で使える状態が続いています。ただ、料金体系や提供状況は変わり得るので、実際の条件は公式サイトで確認してください。当編集部では2026年7月時点の状況をKhromaのツールページに記載しています。

Q. Khromaで学習させた好みは、他のツールに移せますか？

移せません。学習結果はKhroma内部に閉じており、書き出し機能もありません。移行できるのは、気に入った配色のHEX値だけです。乗り換え前に必ず手動で控えておいてください。

Q. 完全に日本語だけで配色作業を終わらせる方法はありますか？

配色専業ツールでは難しいです。Canva AIやAdobe Expressのような日本語UIのデザインツール内で色を組み、そこで完結させるのが現実的な答えになります。

Q. オープンソースの配色ツールをそのまま自社サービスに組み込めますか？

ライブラリ形式のものは組み込めます。MITやApache-2.0のライセンスであれば商用利用も可能です。ただしUIは自前で作る必要があります。「Khromaのような画面ごと」使えるOSSは、2026年7月時点で見当たりません。

Q. 生成された配色が使い物になるか、どう判断すればいいですか？

コントラスト比を測るのが最速です。本文色と背景色で4.5:1を下回っていれば、その時点で不採用。見た目の好みで悩む前に、この数値で機械的に足切りしてください。判断が10倍速くなります。

Q. 配色をAIチャットに作らせるのと、専用ツールを使うのはどちらが良いですか？

専用ツールが上です。AIチャットは色の計算を間違えることがあり、コントラスト比の自己申告も当てになりません。ベース色から階調を機械的に展開させる用途に限れば、AIチャットも実用範囲です。

Q. 印刷物とWebで配色ツールを分けるべきですか？

分けたほうが安全です。Web向けツールの多くはRGB前提で、印刷のCMYK変換で色が沈みます。印刷が絡む案件では、Adobe Color経由でCCライブラリに入れてから作業するのが無難な流れになります。

関連する比較・代替を見る

配色まわりで迷ったときに、横並びで見比べられるページをまとめました。

• Khromaの代替ツール一覧 — 候補を機能軸で絞り込めます
• Canva AIとKhromaを比較 — 日本語UIが必要な人向け
• Figma AIとKhromaを比較 — プロダクトUI設計で使う場合
• Adobe ExpressとKhromaを比較 — ブランドキット運用の観点から
• KhromaとRecraft V3を比較 — 生成画像のトーン統一まで見据えるなら
• KhromaとUizardを比較 — 画面ごと生成したい人向け
• KhromaとLookaを比較 — ロゴとブランドカラーをセットで作る場合
• デザイン系AIツールのカテゴリ一覧 — 配色以外の周辺ツールも含めて眺めたいとき
• 画像生成AIのカテゴリ一覧 — 配色をそのまま画像生成に渡したいとき

次に読むなら、AIイラストツールの比較記事がおすすめです。配色を決めたあと、その色をどの生成ツールに渡すかで仕上がりが大きく変わるので、セットで読むと判断が早くなります。

各ツールの公式サイト（一次情報）

料金・機能・対応範囲は各社公式が一次情報です。本記事は公開時点の検証に基づきますが、最新かつ正確な条件は必ず各公式ページで確認してください。

• Khroma — 公式サイト（AI PICKSの詳細）
• Canva AI — 公式サイト（AI PICKSの詳細）
• Figma AI — 公式サイト（AI PICKSの詳細）
• Recraft V3 — 公式サイト（AI PICKSの詳細）