color-mix()と相対カラー構文
最新のCSSカラ―関数を使って色を混ぜ合わせ、色のバリエーションを作成します。
「color-mix()と相対カラー構文」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
color-mix()関数
color-mix()は、指定した色空間で2つの色を混ぜ合わせます。SassやJavaScriptを使わずに、デザイントークンを基にした色のバリエーションを作成できます。
<button class="button-hover">Hover-mixed button</button>color-mix()の構文
完全な構文はcolor-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage])です。パーセンテージの合計は100%にする必要があります。
<div class="mix-equal">Equal mix</div>
<div class="mix-weighted">Weighted mix</div>color-mix()の色空間
色空間によって混色結果が変わります。oklchのような最新の知覚的色空間は、srgbよりも視覚的に均一な結果を生み出します。
<div class="oklch-mix">OKLCH mix</div>
<div class="srgb-mix">sRGB mix</div>color-mix()によるカラースケールの生成
1つのブランドカラーから、一貫したカラーパレットを作成します。
<span class="swatch swatch-100"></span>
<span class="swatch swatch-300"></span>
<span class="swatch swatch-700"></span>
<span class="swatch swatch-900"></span>相対カラー構文
相対カラーを使うと、既存の色の特定のチャンネルを変更して新しい色を作成できます。fromキーワードを使用します。
<p class="darker">20% darker text</p>
<p class="desaturated">Half saturation text</p>相対カラーによる透明なバリエーション
RGB値を知らなくても、ブランドカラーの透明なバージョンを作成できます。
<div class="overlay">Overlay</div>明るさと暗さの調整
oklchの明度を加算または減算して、明るい色合いや暗い色合いを作成します。
<div class="card demo-active">Card</div>oklch色空間の概要
OKLCHは知覚的に均一な色空間です。
l— 明度（0から1）c— 彩度（0から0.4以上）h— 色相角（0から360）
lを調整すると、予測どおり均一な明るい色合いと暗い色合いが得られます。
ブラウザー対応
color-mix()は、Chrome 111以降、Firefox 113以降、Safari 16.2以降でサポートされています。相対カラー構文（fromキーワード）は、Chrome 119以降、Safari 16.4以降、Firefox 128以降でサポートされています。現在の対応状況はcaniuse.comで確認してください。
color-contrast()の将来性
color-contrast()は、指定した背景に対して最も読みやすい色を、リストから自動的に選ぶ提案中の関数です。まだブラウザーでは利用できませんが、アクセシビリティを重視したテーマ設定を目的に設計されています。
理解度チェック
最も知覚的に均一な混色結果を生み出すcolor-mix()の色空間はどれですか。
まとめ
color-mix(in oklch, color1 %, color2 %)は指定した色空間で色を混ぜ合わせます。1つのブランドカラーから、明るい色合い、暗い色合い、透明なバリエーションを作るのに適しています。相対カラー構文（oklch(from var(--brand) calc(l+0.2) c h)）を使うと、個々のチャンネルを変更して新しい色を作成できます。知覚的に均一な結果を得るには、OKLCHが最適な色空間です。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「color-mix()と相対カラー構文」レッスンは無料ですか？
はい。「color-mix()と相対カラー構文」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「color-mix()と相対カラー構文」で何を学びますか？
最新のCSSカラ―関数を使って色を混ぜ合わせ、色のバリエーションを作成します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「color-mix()と相対カラー構文」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 動的な計算のためのcalc()
- 流動的な値のためのmin()、max()、clamp()
- Gridでのrepeat()とminmax()
- color-mix()と相対カラー構文