カラーパレットジェネレーター

プロフェッショナルなカラーパレットの作成、カラーコード変換、画像から色を抽出

カラーパレットジェネレーター＆コンバーター

カラーピッカー

色を選択

カラーコードを入力（HEX、RGB、HSL）

カラーフォーマット

カラー値

HEX: #3b82f6

RGB: rgb(59, 130, 246)

HSL: hsl(217, 91%, 60%)

CMYK: cmyk(76%, 47%, 0%, 4%)

HSB: hsb(217°, 76%, 96%)

カラープレビュー

パレット設定

ベースカラー

パレットタイプ

色数

3 5 12

生成されたパレット

グラデーション設定

グラデーションタイプ

方向

カラーストップ

100%

グラデーションプレビュー

CSSコード

background: linear-gradient(to right, #3b82f6, #8b5cf6);

画像をアップロード

ここに画像をドラッグ＆ドロップ

JPG、PNG、GIF、WebP対応（最大10MB）

抽出された色

抽出方法

最大色数

3 8 16

使用例

Webデザイン

ウェブサイト用の調和のとれたカラーパレットを作成。

#FF6B6B #4ECDC4 #45B7D1...

ロゴデザイン

ブランドアイデンティティのためのプロフェッショナルな配色。

#2C3E50 #E74C3C #F39C12...

ビジュアル分析

既存の画像からカラーパレットを抽出。

写真からの色分析...

機能

カラーコンバーター

HEX、RGB、HSL、CMYK、HSBフォーマット間の変換

画像カラー抽出

画像から主要な色を自動抽出

グラデーションジェネレーター

リニア、ラジアル、コニックグラデーションを作成

パレットタイプ

モノクロマティック、類似色、補色パレットタイプ

📋

簡単コピー

ワンクリックでカラーコードをクリップボードにコピー

♿

アクセシビリティ

色覚に配慮したコントラストと提案

使い方

色を選択

カラーピッカーで色を選択するか、カラーコードを入力

フォーマットを選択

希望のカラーフォーマットを選択（HEX、RGB、HSL、CMYK）

パレット生成

異なるハーモニータイプでプロフェッショナルなカラーパレットを作成

グラデーション作成

カスタムグラデーションを生成し、CSSコードを取得

画像解析

画像から自動的に色を抽出し、パレットに追加

よくある質問

HEX（例：#FF6B6B）、RGB（例：rgb(255, 107, 107)）、HSL（例：hsl(0, 100%, 71%)）、CMYK（例：C:0 M:58 Y:58 K:0）、およびHSB/HSVに対応しています。任意のフォーマットで値を入力すると、他のすべてが即座に更新されます。HEX入力は3桁または6桁で、#プレフィックスあり・なし両方に対応しています。

モノクロマティック：1色の異なる明度・彩度バリエーション。類似色：カラーホイール上で隣り合う色（まとまりのある印象）。補色：カラーホイール上の反対の色（高コントラスト）。トライアド：均等に配置された3色（鮮やかなバランス）。テトラド/スクエア：均等に配置された4色（豊かで複雑）。スプリット補色：ある色とその補色の両隣の2色（純粋な補色よりバランスが取りやすい）。

写真、スクリーンショット、またはJPG、PNG、GIF、WebP（最大10MB）の任意の画像をアップロードしてください。ツールは選択した方法（主要な色・平均色・鮮やかな色）でブラウザ内のピクセルカラーを解析します。すべてクライアントサイドで動作し、サーバーへの画像送信は一切ありません。

リニアグラデーション：指定した角度の直線に沿って色が変化します。ラジアルグラデーション：中心点から外側に向かって色が広がります。コニックグラデーション：カラーホイールのように中心点の周りを色が回転します。3種類すべてでCSS backgroundプロパティの値が生成されます。

CSSカスタムプロパティ（--color-primary: #FF6B6B）、JSON（全フォーマット値を持つカラーオブジェクトの配列）、および個別カラーのクリップボードコピーに対応しています。CSS変数はスタイルシートの:rootブロックに直接貼り付けられます。JSONはデザイントークンに便利です。

HSLはHue（色相：0〜360°）、Saturation（彩度：0〜100%）、Lightness（明度：0〜100%）の略です。RGBと異なり、HSLは直感的です。色を明るくするにはLightnessを上げ、彩度を下げるにはSaturationを下げるだけです。デザイナーが色の関係を考える方法に直接対応しています。

CMYK（シアン、マゼンタ、イエロー、キー/ブラック）は印刷で使用されるカラーモデルです。RGBはスクリーン用、CMYKはプリンター用です。物理的な印刷物のデザインを準備する場合、業者にCMYK値が必要になります。なお、RGBとCMYKの色域は完全に一致しないため、変換は近似値となります。

いいえ。すべてのカラー変換、パレット生成、グラデーション構築、および画像解析はJavaScriptを使用してブラウザ内でローカルに実行されます。画像やカラーデータがデバイスの外に出ることは一切ありません。