カラーパレットメーカー

無料で使えるカラーパレット作成ツール

ベース色を選ぶだけで、Webサイトやアプリのデザインに使える配色を自動で作成できます。補色・類似色・トライアド・モノクロームなど、8種類の配色ルールに対応しています。

気に入ったカラーコードはクリックしてコピー。CSS変数、SCSS、JSON、配列への書き出しや、PNG画像・共有リンクでの保存もできます。

シェード

各色を明るく・暗くしたバリエーションです。クリックで HEX をコピーできます。

プレビュー

パレットを UI に当てはめるとこんな感じ。

サンプルカード
パレットのプレビュー

ボタンやバッジ、背景に色を割り当てると、配色の印象を確認できます。

タグ1タグ2タグ3

エクスポート


        

          
          
          
        

      


      

        
自分のパレット

        
名前を空のまま保存すると、薄く表示されている名前で保存されます。

        

          
          
          
        

        
    
      
    

      
    
        
    
          
    
            
    ひらめきパレット
    
            
    クリックで読み込みます。気に入ったら「自分のパレット」に保存してね。
    
          
    
          
    
            
          
    
        
    
        
    
      
    
    
    

    
    
      
    カラーパレットの使い方
    
      
      
        
    1. ベース色をカラーピッカーまたはカラーコードで指定します。
      2. 
        
    2. 配色ルールと色の数を選び、「生成」を押します。
      3. 
        
    3. 完成した配色をコピーして、Webサイトやグラフィックデザインに利用します。
      4. 
      
    
      
    配色をデザインに活用
    
      
    コントラスト比やシェードを確認しながら、背景色・文字色・ボタン色の組み合わせを試せます。登録不要で、保存したパレットはブラウザ内にだけ保存されます。