🌗 デュオトーン カラー生成ツール

暗い色と明るい色の2つを選ぶと、その間をつなぐデュオトーングラデーションマップと5段階のカラースケールを作ってくれます。CSSグラデーションコードとオーバーレイ方式のデュオトーンCSSをコピーでき、写真をアップロードするとブラウザ内で実際のデュオトーンに変換してプレビューすることもできます。

使い方

1. プリセットを押すか、暗い色・明るい色を自分で選んで2つのトーンを決めます。
2. グラデーションの角度を調整して色が流れる方向を合わせます。
3. 「グラデーションをコピー」または「デュオトーンCSSをコピー」でコードを取得します。
4. 写真をアップロードすると2色に変換された結果を確認でき、PNGで保存できます。

よくある質問

デュオトーンとは正確に何ですか?

写真の明るさの情報だけを残し、暗い部分を1つ目の色、明るい部分を2つ目の色に置き換えて2つのトーンで表現する色補正の手法です。雑誌・アルバムカバー・ウェブバナーで統一感のあるムードを出すときによく使われます。

CSS方式と画像変換の違いは何ですか?

CSSオーバーレイ(grayscale + mix-blend-mode)は元の画像をそのままにして、画面上でだけデュオトーンのように見せます。画像変換はピクセル値を実際にマッピングして、保存まで可能な完成ファイルを作ります。

アップロードした写真はサーバーに送信されますか?

いいえ。画像の読み込みと色変換、保存まですべてブラウザ内(キャンバス)で処理され、どのファイルもサーバーにアップロードされません。コントラストの大きい2つのトーンを選ぶほど結果がはっきりするので参考にしてください。