色の混合
2色以上の色を指定した比率で混合して新しい色を作成。 RGB・HSL・LABなど異なる色空間での混合結果を比較できる。
色を選択
混合比率
カラー1 50%カラー2 50%
結果
HEX
#A79C98
RGB
rgb(167, 156, 152)
HSL
hsl(16, 8%, 63%)
++
このツールをシェア
📖
使い方
Step 1
色を選択
混合したい2色以上の色を選択
→
Step 2
比率調整
各色の混合比率を調整
→
Step 3
結果をコピー
混合結果のカラーコードをコピー
✨
このツールの特徴
リアルタイム混合
色や比率を変更すると即座に結果が更新
複数色対応
2色以上の色を同時に混合可能
色空間選択
RGB・HSLなど異なる色空間で混合
❓
よくある質問
最大10色まで同時に混合できます。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。