カラーパレット生成器

美しい5色パレット — スペースキーで生成、ロックして固定、画像から抽出

ハーモニー：

画像から色を抽出

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

JPG、PNG、WebP — 10MBまで

画像はお使いのデバイスから外に出ることはありません — すべての処理はブラウザ内で行われます。

パレットをエクスポート


      

    


    
    

      

        
WCAGコントラストチェック

        

      

    


    
    

      

        
保存済みパレット 

        

          保存済みパレットをすべて削除しますか？
          
          
        

        

      

    


    
    

    
    

      
パレット生成の仕組み

      
すべてのパレットはHSL色空間を使って生成されます — 色相（Hue：0–360°）、彩度（Saturation：0–100%）、明度（Lightness：0–100%）です。HSLはカラーホイール上の角度関係に基づく配色ルールに直感的で使いやすい表現です。


      

        

          

            

            

            

          

          
アナロガス

          
30°以内の隣接色相。調和があり、穏やかな印象。自然や海のテーマに最適。

        

        

          

            

            

            

          

          
補色

          
180°対面する2色。高コントラストで鮮やか。スポーツブランディングによく使われる。

        

        

          

            

            

            

          

          
トライアディック

          
120°間隔の3色。バランスが良くカラフル。遊び心のあるブランドに最適。

        

        

          

            

            

            

          

          
モノクロマティック

          
同じ色相で彩度と明度を変化。洗練されたまとまり感。ミニマルデザインに最適。

        

        

          

            

            

            

          

          
スプリット補色

          
1つのベース色相に左右150°の2色を加える。緊張感のないコントラスト。

        

        

          

            

            

            

            

          

          
テトラディック

          
90°間隔の4色。豊かで複雑な配色。1色を主役にすると映える。

        

      


      
例 — アナロガスパレット

      
開始色相：H = 210°（青系）。アナロガスルール：5色を15°間隔で配置。
色相：195°、205°、215°、225°、235°。
彩度：55%〜70%でバリエーション（奥行きのため）。明度：45%〜70%でバリエーション（レンジのため）。
結果：自然なコントラストを持つ、まとまりのある海の青グラデーションパレット。

    


    
    

    
    

      
デザイナーのためのカラーパレットヒント

      
    
        
  • 60-30-10ルールを守りましょう。デザインの60%にメインカラー（背景・大きなエリア）、30%にサブカラー（セクション・UIパネル）、10%にアクセントカラー（CTA・ハイライト）を使います。5色パレットはこのルールに自然にマッチします。
    • 
        
  • テキストのコントラストは必ず確認しましょう。美しいパレットでも、テキストと背景のコントラスト比が4.5:1以上なければWCAG AAに不合格となります。上部のコントラストチェッカーをご活用ください。
    • 
        
  • 本番環境ではパレットを絞り込みましょう。5色あっても、すべての画面で5色全部を使う必要はありません。洗練されたデザインは2〜3色をメインに使い、残りは特定の場面にとっておきます。
    • 
        
  • まずブランドカラーをロックしましょう。メインブランドカラーがある場合は、再生成前にそのスウォッチのロックアイコンをクリックしてください — ロックした色を中心に調和したパレットが生成されます。
    • 
        
  • 雰囲気に合わせた画像抽出。デザインしたいムードを表す写真（風景・商品写真・ライフスタイル画像）をアップロードすると、抽出されたパレットがブランドの方向性と感情的に一致したものになります。
    • 
      

    


    
    

      
よくある質問

      

        
HSL（色相・彩度・明度）配色ルールを使用します。例えば、アナロガスは30°以内の隣接色相を選択し、補色は180°対面する色相を使用し、トライアディックは120°間隔の3色を選びます。各パレット内で視覚的に美しいコントラストを生み出すために、彩度と明度を変化させています。

        
いいえ — 画像はお使いのデバイスから外に出ることはありません。ブラウザのCanvas APIを使ってローカルでピクセルデータを読み取り、頻度ビニングアルゴリズムで主要色を抽出します。サーバーへの送信・アップロード・追跡は一切ありません。

        
カラースウォッチまたはそのHEXコードラベルを直接クリックすると、クリップボードにコピーされます。短い確認メッセージが表示されます。

        
CSSカスタムプロパティ（--color-1〜--color-5）、Tailwind CSSコンフィグスニペット、SCSS変数、JSONオブジェクト、または単純なカンマ区切りHEXリストとしてエクスポートできます。エクスポートボタンをクリックすると即座にクリップボードにコピーされます。

        
コントラストチェッカーは、パレットの各色を白（#fff）と黒（#000）の背景上にテキストとして表示した場合のWCAG AA合否バッジを表示します。通常テキストで4.5:1の比率を満たす色には緑色の「AA ✓」バッジが表示されます。

        
ブラウザのlocalStorageに最大50パレットまで保存できます。セッションをまたいでも保存されます。履歴パネルから保存済みパレットの確認・読み込み・削除ができます。