色混色計算機

スライダーを動かして、2つのデジタルカラー間を補間します。

配色計算機

計画と参照のためのブラウザ上での計算結果です。

色 A色 B 混合比

CSS / HEX

ガイド

このツールは、2 つの状態間の中間 UI 色を見つけたり、2 つの状態の間の遷移ステップを作成したりする場合に使用します。色 A と色 B を選択し、スライダーを動かして B の反映率を結果に設定します。

このツールは各 0-255 の sRGB チャンネルを線形補間し、結果の RGB 値を HEX で返します。これは数値ベースのスクリーンカラー混合であり、顔料混合やガンマ補正のコンポジットモデルではありません。

#3366FF と #FF6655 を 50 % で混ぜると、3 つのチャンネルの中点を得られます。生成された HEX をホバー状態に貼り付け、実際の背景に対して別途コントラストチェックを実行します。

デザインアプリは別の色空間やブレンドモードを使用する場合、中間点が異なる場合があります。この結果を CMYK、スポットカラー、不透明度、または実際の塗料配合式として扱わないでください。

カラー混合計算機の色を別のアプリに移すにはどうすればよいですか？

結果の下にあるコピーボタンを使って、CSS、HEX、または HSL テキストをコピーします。送信先アプリが同じカラーフォーマットを解釈することを確認してください。

カラー混合計算機のスクリーンカラーは印刷で一致しますか？

自動的には一致しません。発光する RGB スクリーンと反射型の紙・インクはガマットと混色モデルが異なるため、印刷用プロファイルとプルーフは依然として必要です。

カラー混合計算機の結果だけでデザイントークンを承認できますか？

候補として使った後、実際の背景、ダークモード、インタラクション状態、およびテキストのコントラストをテストしてから、トークン名を決めて承認してください。