オンラインカラーミキサー：完璧な中間色とグラデーションを作成

色をブレンドして完璧な中間色を見つけよう。正確な比率制御でWeb UI向けのスムーズなグラデーションを生成。

First Color

Second Color

Gradient Steps: 5

More steps = smoother gradient. Fewer steps = distinct mid-tones.

ステップバイステップのカラーブレンド

#FF6B6B

ステップ 0

#DC7F7D

ステップ 1

#B8928F

ステップ 2

#95A6A0

ステップ 3

#71B9B2

ステップ 4

#4ECDC4

ステップ 5

CSSグラデーション

linear-gradient(to right, #ff6b6b, #dc7f7d, #b8928f, #95a6a0, #71b9b2, #4ecdc4)

任意の2色間でスムーズな遷移を作成します。私たちのミキサーは正確な中間色を計算し、 Webプロジェクトで使用できるCSSグラデーションを生成します。UI背景やビジュアルエフェクトに最適。

ステップ数を調整してグラデーションの滑らかさを制御します。ステップが多いほど微妙な遷移を作成し、少ないステップでパレットに使用できる明確な中間色が得られます。

グラデーションの各色は、RGB補間に基づいて数学的に計算されます。生成されたCSSをそのままTailwindまたはvanillaスタイルシートにコピーできます。

はい、私たちのミキサーでは複数の色をレイヤーしてリアルタイムで比率を調整し、必要な正確な中間色を見つけることができます。複数のブレンドを連結して複雑なグラデーションを作成できます。

ツールを使用してグラデーションカラーを生成し、CSSコードをコピーします。linear-gradient 関数はすべての最新ブラウザで動作し、背景、オーバーレイ、テキストエフェクトに使用できます。

グラデーションは見つかりましたか？フルパレットを生成しましょう：