配色ジェネレーター

複数の配色方案の生成、画像からの色抽出、CSSグラデーションやシャドウ効果の生成に対応し、単色または一括処理が可能です。

バグ報告

ブラウザ実行モード: データはブラウザ内で処理され、サーバーにはアップロードされません。

速度と安定性: 処理速度はデバイスとブラウザに依存します。大量のバッチ作業では、デスクトップ版の方が安定する場合があります。

ツールを読み込み中です。お待ちください...

オンラインツールを読み込めない、または実行できない場合は、デスクトップツールをお試しください。 https://tools.yikeaigc.com/

ツール使用状況

旧バージョンに戻す

単色モード

一括色抽出

1基本色を選択

RGB: 2, 132, 199 HSL: 243°, 75%, 59%

2配色を選択

色数:

彩度調整: 0%

明度調整: 0%

3配色

4CSSグラデーション

グラデーション種類:

角度: 90°

5シャドウ効果

ぼかし半径: 20px

拡張半径: 0px

不透明度: 40%

効果をプレビュー

6画像から色を抽出

クリックしてアップロード、または画像をドラッグ

JPG、PNG、GIF、WebP 対応

1複数画像をアップロード

クリックしてアップロード、または複数画像をここにドラッグ

一括選択対応。各画像からメインカラーを自動抽出

各画像の抽出色数:

配色方案:

クリップボードにコピーしました

'; zip.file('preview.html', htmlContent); const content = await zip.generateAsync({ type: 'blob' }); const link = document.createElement('a'); link.href = URL.createObjectURL(content); const timestamp = new Date().toISOString().replace(/[-:.]/g, '').slice(0, 15); link.download = `color-palettes-${timestamp}.zip`; link.click(); downloadBatchZip.disabled = false; batchStatus.textContent = 'ZIP文件已下载'; }); // ========== 导出功能 ========== document.getElementById('exportPaletteBtn').addEventListener('click', function() { if (currentPalette.length === 0) return; const data = { baseColor: baseColorPicker.value, scheme: currentScheme, colors: currentPalette.map(c => ({ hex: c.hex, rgb: `rgb(${c.rgb.r}, ${c.rgb.g}, ${c.rgb.b})`, hsl: `hsl(${Math.round(c.hsl.h)}, ${Math.round(c.hsl.s)}%, ${Math.round(c.hsl.l)}%)` })), gradient: gradientCode.textContent, shadow: shadowCode.textContent }; const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `color-palette-${baseColorPicker.value.replace('#', '')}.json`; link.click(); showCopyToast('配色方案已导出'); }); // ========== 初始化 ========== schemeDescription.textContent = schemeDescriptions['monochromatic']; updateColorDisplay(); updatePalette(); });

手順

ソフトウェア使用方法

ベースカラーを選択：カラーピッカーでベースカラーを選択するか、HEXカラー値（例：#4f46e5）を直接入力します。"ランダムカラー"ボタンをクリックしてインスピレーションを得ることもできます。ツールはRGBとHSLのカラー値情報をリアルタイムで表示します。
配色方案を選択：
- モノクロ配色：同じ色相で、彩度と明度を変えてバリエーションを作成
- 類似色配色：色相環で隣り合う色で、自然で柔らかな印象
- 補色配色：色相環で向かい合う2色で、コントラストが強い
- 分割補色：ベースカラーと、その補色の両隣の色
- トライアド配色：色相環上で等間隔に配置された3色
- スクエア配色：等間隔に配置された4色
- テトラード配色：2組の補色で、メリハリのある構成
パラメータを調整：
- 色数：3、5、7、または9色の生成を選択
- 彩度調整：スライダーをドラッグして全体の彩度を増減
- 明度調整：スライダーをドラッグして全体の明度を増減
CSSグラデーションを生成：線形または放射状のグラデーションタイプを選択し、角度パラメータを調整すると、そのまま使えるCSSグラデーションコードを生成できます。
シャドウ効果を生成：ぼかし半径、拡張半径、透明度パラメータを調整し、現在のベースカラーに基づいたシャドウのCSSコードを生成します。
画像から色を抽出：画像をアップロードすると、ツールがメインカラーを自動抽出します。画像内の任意の位置をクリックして正確に色を取得し、抽出した色をベースカラーとして適用できます。
一括色抽出モード："一括色抽出"タブに切り替え、複数の画像をアップロードし、各画像から抽出する色数と配色方案の拡張モードを設定して、開始ボタンをクリックすると一括抽出できます。完了後、すべての結果を含むZIPをダウンロードできます。
コピーとエクスポート：任意のカラーカードをクリックすると色値をコピーでき、"配色方案をエクスポート"ボタンをクリックすると、完全な配色情報を含むJSONファイルをダウンロードできます。

よくある質問

A：モノクロ配色はシンプルで上品なデザインに適しています。類似色は自然をテーマにしたデザインやグラデーション背景に適しています。補色は強いコントラストで目立たせたいデザインに適しています。トライアド配色は活発な子ども向け製品やアート制作に適しています。スクエア配色とテトラード配色は複雑なインターフェースやデータ可視化に適しています。デザインの目的に応じて適切な方案を選択してください。

回答：「画像から色を抽出」エリアに画像をアップロードすると、ツールが自動的に分析し、主要な8色を抽出します。抽出された色をクリックして選択し、「選択した色をベースカラーとして使用」ボタンをクリックすると、その色を基に完全な配色方案を生成できます。

回答：グラデーションコードエリアの「コピー」ボタンをクリックし、コードをCSSファイルに貼り付けて、グラデーション背景が必要な要素に適用するだけです。線形グラデーションと放射状グラデーションの2種類に対応しており、線形グラデーションは角度方向をカスタマイズできます。

回答：一括処理完了後にダウンロードされるZIPには、3つのファイルが含まれます：palette-summary.json（すべての配色データのJSONまとめ）、palettes.css（そのまま使用できるCSS変数定義）、preview.html（ビジュアルプレビューページ）。抽出した配色方案をさまざまな場面で便利に使用できます。

回答：彩度は色の鮮やかさを制御します。彩度を上げると色はより鮮やかになり、下げるとより柔らかくくすんだ色になります。明度は色の明るさを制御します。明度を上げると色はより明るくなり、下げるとより濃くなります。この2つのパラメータを調整することで、全体の配色効果を微調整できます。

回答：JPG、JPEG、PNG、GIF、WebP などの一般的な画像形式に対応しています。より正確に主要カラーを抽出するには、色彩が豊かでコントラストの高い画像の使用をおすすめします。画像処理はすべてローカルで完結し、サーバーにはアップロードされません。

回答：任意のカラーカードまたは色ブロックを直接クリックすると、対応するHEX色値が自動的にクリップボードにコピーされ、ページ下部に「クリップボードにコピーしました」という通知が表示されます。一括結果でも、同様にカラーバーをクリックすると対応する色値をコピーできます。

配色ジェネレーター

ツールを読み込み中です。お待ちください...

ツール使用状況

手順

ソフトウェア使用方法

よくある質問

Q：各配色方案にはどのような違いがあり、どう選べばよいですか？

Q：画像から色を抽出して配色のインスピレーションにするには？

質問：生成されたCSSグラデーションコードはどのように使いますか？

質問：一括色抽出モードでは、処理結果に何が含まれますか？

質問：彩度と明度の調整にはどのような効果がありますか？

質問：色抽出に対応している画像形式は何ですか？

質問：単一カラーの色値をすばやくコピーするには？

関連ツール

顔画像検索ツール

SVGコンバーター

小紅書ノートブック風カバー作成ツール

QRコード一括生成ツール

ナンバープレート自動認識・ぼかしツール

小紅書ビジュアルインパクト風カバー制作

画像の不要物をワンクリックで消去するAIツール

画像カラー簡略化ツール

小红书 絵文字テキストカバー作成ツール

画像背景削除ツール

小红书絵文字テキストカバー作成ツール