無料のカラーホイール&カラーパレット生成ツール
Bananiのカラーホイールとカラーパレット生成ツールで、美しい配色をすぐに見つけられます。UIデザイン、Webサイト、ブランディング、プレゼン、クリエイティブ制作に使えるオンラインカラー選択ツールを、HEXまたはRGBで無料で利用できます!
デザイナーや開発者がより良いユーザーインターフェースを作成するための、厳選された無料デザインリソースのディレクトリ。
色を選んでください
色を選んでください
Palette type
Your Palette
使い方
1
欲しい変更内容を説明するだけで、ワイヤーフレームの一部を編集できます。要素を削除したりテキストを書き直したりと、最終調整に必要な操作はすべて揃っています。
.png、.jpg、.gif、.heic など、サポートされているあらゆる形式の画像に対応しています。
.png、.jpg、.gif、.heic など、サポートされているあらゆる形式の画像に対応しています。
2
Figmaデザインを取得
当社のAIは画像を解析し、Figmaファイルを作成します。
当社のAIは画像を解析し、Figmaファイルを作成します。
3
Figmaにエクスポート
変換したデザインをそのままFigmaにコピペできます。
変換したデザインをそのままFigmaにコピペできます。
カラー パレットジェネレーターを使うのは誰ですか?
オンラインのカラーパレットジェネレーターは、さまざまなクリエイティブ職の人や学生に使われています。たとえば、PMは高速なUIデザインに使い、vibeコーダーはAIアプリビルダーで一貫した配色を作成し、学生はUI/UXの基礎を学べます。
カラーホイールとは?

色相環は、人間が認識できるすべての色の関係を示す円形の図です。デザイナー、アーティスト、クリエイターが色彩理論を理解し、配色の調和を探り、バランスの取れた色の組み合わせを作るのに役立ちます。
色相環を発明したのは誰ですか?
1666年、アイザック・ニュートンは可視光スペクトルを円形に配置し、色相環を考案しました。これは現代の色彩理論とデザイン原則の基盤になりました。
色相環の使い方は?
まずはホイールでベースカラーを選びましょう。カラー調和のルールを使って、相性の良い組み合わせを見つけます。無料のカラーホイールツールなら、これらのルールに基づく配色をすぐ生成できます。Banani AIでムード設計をさらに進められます。
色彩理論とは?
デザイナーやアーティストが、どうやって完璧な配色を作るのか気になったことはありませんか? 彼らは、どの色が相性よく組み合わさるかを見極めるための、アートと科学を融合した色彩理論に頼っています。色相環の概念が、色彩理論の土台になります。
色の調和
色の調和
うまく調和する色は「カラー・ハーモニー」と呼ばれます。デザイナーはこれらの調和を使って、特定の視覚効果を生み出します。色相環は、さまざまな配色ルールを通じてこうした調和を見つけるのに役立ち、心地よく効果的なカラーパレットを作れます。
うまく調和する色は「カラー・ハーモニー」と呼ばれます。デザイナーはこれらの調和を使って、特定の視覚効果を生み出します。色相環は、さまざまな配色ルールを通じてこうした調和を見つけるのに役立ち、心地よく効果的なカラーパレットを作れます。
配色の主な種類は何ですか?
配色の主なタイプは5つあります:モノクロマティック、アナロガス、補色、分裂補色、トライアディックです。
配色の主な種類は何ですか?
配色の主なタイプは5つあります:モノクロマティック、アナロガス、補色、分裂補色、トライアディックです。


色相環の種類
色相環の種類
RYBカラーホイール
画家が絵の具を混ぜるために使う方式です。原色(赤、黄、青)、二次色(オレンジ、緑、紫)、三次色(赤橙、黄橙など)を含みます。
RGBカラーホイール
デジタル画面やオンライン向けで、光の混色に最適です。原色(赤、緑、青)と二次色(シアン、マゼンタ、黄)を含みます。
RYBカラーホイール
絵の具の色混ぜに使われます。一次色(赤、黄、青)、二次色(オレンジ、緑、紫)、三次色(赤橙、黄橙など)を含みます。
RGBカラーホイール
デジタル画面やオンライン向けで、光の混色にフォーカスします。一次色(赤、緑、青)と二次色(シアン、マゼンタ、黄)を含みます。
カラーの組み合わせ

補色
色相環で正反対に位置する色。強いコントラストと鮮やかな見た目を生みます。
単色配色
1つの基本色の濃淡・明暗・色調の違いで、控えめで統一感のある印象に。
類似色配色
色相環で隣り合う3色。調和しやすい一方、ややまとまりすぎることも。1色を主役に、他はアクセントに。
トライアド配色
色相環で等間隔に並ぶ3色。高いコントラストがありつつ、補色よりバランスが取りやすいです。
テトラード配色
色相環上で等間隔に配置された4色で、長方形を作ります。主役1色とアクセントを分けたい時に最適です。
分裂補色配色
基本色に、その補色の両隣2色を組み合わせる配色。コントラストを保ちつつ、よりやわらかい印象に。
補色
色相環で互いに正反対に位置する色。高いコントラストと鮮やかなビジュアルを生みます。
単色配色
1つのベースカラーのさまざまなシェード、ティント、トーンで、控えめでまとまりのある印象を与えます。
類似色
色相環で隣り合う3色で、調和的ですがやや強くなりすぎることもあります。1色を主役に、他をアクセントに使いましょう。
三色配色
色相環で等間隔に配置された3色で、高いコントラストがありつつ、補色配色よりバランスが取れます。
四色配色
色相環で等間隔に配置された4色で、長方形を作ります。1色を主役に、他をアクセントにすると最も効果的です。
分裂補色配色
ベースカラーに、その補色の隣り合う2色を組み合わせ、やわらかなコントラストを生みます。
補色配色はどう作ればよいですか?
色相環では、1つのベースカラーを選び、その正反対の色を選ぶと補色配色を作れます。
補色配色は、強いコントラスト、鮮やかな見た目、バランスの取れたパレットを生み、人気のモバイルアプリUIでよく使われます。
色相環では、1つのベースカラーを選び、その正反対の色を選ぶと補色配色を作れます。
補色配色は、強いコントラスト、鮮やかな見た目、バランスの取れたパレットを生み、人気のモバイルアプリUIでよく使われます。
60/30/10/10の配色ルールとは?
60/30/10/10ルールは、デザインの色バランスを整えるのに役立ちます。60%を主色、30%を副色、2つの10%をアクセントカラーに使い、見た目のバランスが取れたデザインを作る考え方です。プロのビジュアルアーティストが使う、最も基本的で汎用的なデザインルールの1つです。
Banani AIを使えば、テキストプロンプトだけで60/20/10/10ルールなどに沿ったUIを設計できます。
60/30/10/10ルールは、デザインの色バランスを整えるのに役立ちます。60%を主色、30%を副色、2つの10%をアクセントカラーに使い、見た目のバランスが取れたデザインを作る考え方です。プロのビジュアルアーティストが使う、最も基本的で汎用的なデザインルールの1つです。
Banani AIを使えば、テキストプロンプトだけで60/20/10/10ルールなどに沿ったUIを設計できます。
カラーカテゴリ
カラーカテゴリ
原色
RGBでは、赤・緑・青。これらを混ぜると白色光になります。RYBでは、赤・黄・青。これらは二次色を作る基本の色です。
二次色
RGBでは、シアン・マゼンタ・黄。
RYBでは、紫・オレンジ・緑。
三次色
原色と二次色を混ぜて生まれる色で、パレットに深みを加えます。
原色
RGBの色相環では、赤・緑・青。これらを混ぜると白色光になります。RYBの色相環では、赤・黄・青。これらは二次色を作る基本色です。
二次色
RGBの色相環では、シアン・マゼンタ・黄。
RYBの色相環では、紫・オレンジ・緑。
三次色
原色と二次色を混ぜて作る色で、パレットに深みを加えます。


シェード、ティント、トーン
シェード、ティント、トーン
シェード
ベースの色相に黒を加えて作る、より暗くドラマチックな色です。
ティント
ベースの色相に白を加えて作る、より明るくやわらかな色です。
トーン
ベースの色相に黒と白(またはグレー)を混ぜて作る、よりニュアンスのある色です。
シェード
ベースの色相に黒を加えて作られ、より暗くドラマチックな色になります。
ティント
ベースの色相に白を加えて作られ、色が明るくやわらかくなります。
トーン
ベースの色相に黒と白(またはグレー)を混ぜて作り、よりニュアンスのある色になります。
暖色と寒色
暖色と寒色
暖色系
赤から黄までの範囲で、温かさとエネルギーを感じさせます。
寒色系
青から緑、紫までの範囲で、落ち着きと静けさを連想させます。
暖色系
赤から黄までの範囲で、温かさとエネルギーを感じさせます。
寒色系
青から緑、紫までの範囲で、落ち着きと静けさを連想させます。


色相、彩度、輝度
色相、彩度、輝度
色相
カラーホイール上の個々の色。
彩度
色の強さや鮮やかさ。
輝度
色の明るさや暗さ。
色相
カラーホイール上の個々の色。
彩度
色の強さや鮮やかさ。
輝度
色の明るさや暗さ。
よくある質問
色相環には何色ありますか?
標準的な色相環は12色で、原色3色、二次色3色、三次色6色を円形に配置し、色の関係と調和を示します。
カラーパレットジェネレーターはどう動きますか?
カラーパレットジェネレーターは、色彩理論に基づき、選んだベースカラーから相性のよい配色を作成します。補色、単色、類似色、トライアド、カスタムのパレットを即座に生成できます。
相性のよい3色の組み合わせは?
かなり主観的ですが、人気の3色組み合わせには、青・白・オレンジ、黒・白・赤、緑・ベージュ・ブラウン、ネイビー・シアン・パープルなどがあります。Banani AIでモバイル/ウェブUIに使えます。
カスタムカラーのパレットはどう共有しますか?
カラーパレットジェネレーターを使えば、HEXやRGBコードをコピーしたり、パレットを書き出したり、スクリーンショットを共有できます。実際のUI生成でパレットを使いたいなら、Bananiなら、カスタムカラーでインターフェースを生成し、プレビューリンクで共有できます。
ChatGPTで私のカラーパレットはわかりますか?
はい、ChatGPTは気分、テーマ、ブランド、参考画像に基づいてカラーパレットを提案できます。UIデザインにAIで色を適用するなら、Bananiのようなツールのほうが向いています。
アクセシビリティに最適なコントラスト比は?
アクセシビリティでは、WCAGは通常テキストに4.5:1以上、大きなテキストやUI要素に3:1以上のコントラスト比を推奨し、端末やユーザーを問わず読みやすさを確保します。
希望の配色でUIを生成できるAIはありますか?
はい。BananiのようなAI UIツールなら、好みの配色、ブランドパレット、参考スタイルを使ってインターフェースを生成できます。新しいUIデザインにも既存のUIスクリーンショットにも、AIとの会話だけでカスタムカラーを適用できます。
デザイナーや開発者がより良いユーザーインターフェースを作成するための、厳選された無料デザインリソースのディレクトリ。
参考デザインを見つける
優れたデザインのアプリ画面を閲覧して保存。リサーチにかかる時間を大幅に短縮できます。
優れたデザインのアプリ画面を閲覧して保存。リサーチにかかる時間を大幅に短縮できます。










