カラーブレンダー：2色混合グラデーション生成 | 無料オンラインツール

A 必要ありません。ツールを開いてすぐに色を選べます。すべてブラウザ上で動作し、サーバーにデータは保存されません。先ほど自分でもダークネイビーからペールゴールドまで12ステップのグラデーションを生成し、HEXコードを直接CSSにコピーしました。面倒な登録やスパムは一切なしです。

A 両方変わります。ステップ数が多いほど滑らかな遷移になりますが、各中間色は微妙にずれます。5ステップなら大胆で明確な色合い、20ステップならほぼシームレスなグラデーションになります。ヒーローセクションの背景には8〜10ステップを使い、1つおきのスウォッチをUI要素にコピーしています。コツ：フラットデザインには少なめのステップ数の方が合います。

A できたらいいんですけどね！今のところは各スウォッチをクリックしてHEXコードを1つずつコピーする方式です。20段階のグラデーションなら20回クリックが必要。回避策としては、ステップ数を少なく（5など）設定してコードをコピーし、その後で細かく調整しながら再生成する方法があります。スクリーンショットを撮ってスポイトツールを使う人もいますが、精度は落ちます。

A このツールはRGB色空間でHEXコードを使って色をブレンドします。画面表示やウェブサイトには最適です。でもチラシや名刺、ポスターなどの印刷物では、ブレンドした色がCMYKと正確に一致しません。私自身、美しいラベンダーのグラデーションがクライアントのフライヤーでくすんでしまった経験があります。まずここで色を混ぜ、各HEXコードを別の変換ツールでCMYKに変換してください。あるいは最初からCMYK対応ソフトで作業するのが確実です。

A RGBで計算していて、HSLではありません。そのため青とオレンジのような補色同士を混ぜると、中間で灰色がかった領域を通ることがあります。中間色をもっと鮮やかにしたいなら、手動で中間点を選んで2回に分けてブレンドしてください。ブランドのグラデーションで中央のスウォッチがCTAボタンに使われる場合、私はこの方法を使います。30秒の手間ですが、色の質は確実に変わります。

A 組み込みのエクスポート機能はまだありませんが、簡単な回避策があります。グラデーションを生成し、各HEXスウォッチを手動でCSSのlinear-gradient()文字列にコピーします。10段階なら約60秒のコピペ作業です。またはツールのスクリーンショットを撮ってFigmaに取り込み、スポイトで色を拾います。私はPNGとして書き出し、スウォッチを切り取ってスタイルガイドに使っています。SVGが必要なら、各HEXをRGBに変換してストップオフセットに割り当てるだけです。

A いいえ、そこがデザイナーの落とし穴です。このツールはRGB空間で混色するので、色相の直線ではなく、RGBキューブ内の直線を通ります。純粋な赤と緑を混ぜると、鮮やかな黄色ではなく、濁った茶色っぽいゾーンを経由します。予測可能な結果が欲しいなら、明度か彩度が近い色を選んでください。または3つ目の中間色を追加して、2回に分けてブレンドする方法もあります。途中でグレーっぽく濁らず、コントロールしやすいカーブになりますよ。

A 色相環の反対側にある色で、明度差が大きい組み合わせは避けましょう。青 #0033CC とオレンジ #FF8800 を12ステップで混ぜると、6ステップ目あたりが濁った茶色になります。明度が近い色を選ぶのがコツです。ティール #008080 からコーラル #FF7F50 なら中間もきれいに出ます。コントラストを強めたい場合は、3色目を経由点にして2回に分けてブレンド。30秒の手間でヒーローセクションの見栄えが変わります。

A はい、コピーしたコードをそのままスタイルシートに貼り付けられます。ダークモードでは微妙な色調整が必要になるため、ステップ数を10にして3番目と7番目を背景色に使うのがおすすめです。本番公開の前にブラウザの検証ツールで必ず見え方を確認してください。

A 基本的には同じですが、中間ステップの間隔は元の色相によって異なって見えることがあります。明るい黄色と深い紫を入れ替えると、10個のスウォッチ全体における視覚的な重みの配分が変わります。先週、ブランドカラーの順序を逆にしたら、明るい中間色が中央を早く占拠しすぎてしまいました。片方に偏りすぎる場合は、入力を反転させて試してみてください。