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