CSS color-mix() 式
指定された色空間で 2 つの色をブレンドします。
Formula
color-mix(in oklch, color1 p%, color2) — 宣言された空間内で補間します。
Variables
- R、G、B
- sRGB チャネル (0 ～ 255 または 0 ～ 1 の正規化)
- H、S、L
- HSL の色相 (度)、彩度、明度 (0 ～ 1)
- L
- HSL/OKLCH の相対輝度 (WCAG) または明度
FAQ
- CSS color-mix() 式は印刷ワークフローにとって正確ですか?
- 画面の RGB と印刷の CMYK は異なる色域を使用します。変換を近似的な証明として扱います。商業印刷用の ICC プロファイルを使用して調整します。
- この式を CSS で使用できますか?
- 最新の CSS は、多くの操作で color-mix()、oklch()、および lab() をサポートしています。複雑なパイプラインの場合は、JavaScript で計算し、CSS 変数をエクスポートします。
- Color DevByte は私のカラーをアップロードしますか?
- いいえ。数式リファレンス ページは静的なドキュメントです。インタラクティブ ツールはブラウザ上で 100% クライアント側で実行されます。
概要
指定された色空間で 2 つの色をブレンドします。
Color DevByte は、サーバーにデータを送信せずに再現可能な色の計算を必要とする開発者、デザイナー、アクセシビリティのレビュー担当者向けに、この公式を文書化しています。
リンクされたカラー ツールを使用して、ライブ プレビューとマルチフォーマット エクスポートでこの数式をインタラクティブに適用します。
この式を使用する場合
デザイン トークンの構築、WCAG コントラストの検証、または CSS、Tailwind、またはデザイン システム JSON でのカラー パイプラインの自動化を行うときに、css color-mix() 式を適用します。
実稼働 UI の場合は、常にコントラスト チェッカーまたはビジュアル プレビューを使用して結果を確認してください。ガンマ補正と色域マッピングのエッジ ケースにより、結果が変わる可能性があります。
実装メモ
ブラウザベースのツールは、輝度または ΔE の計算前に sRGB を線形化する必要があります。
RGB ブレンドで一般的な灰色がかった中間点を避けるために、グラデーションとテーマには OKLCH または LAB 補間を優先します。