CSSでColor-Mix（）を使用：開発者向けのモダンガイド。

1745721294
2025-04-25 08:48:00

何ですか `color-mix()` ？

関数 color-mix() CSSの2色を組み合わせて新しい色を作成できます。この機能により、プレプロセッサを使用せずに、スタイルシートで直接動的な混合物が可能になります。

なぜ使用するのか `color-mix()` ？

コヒーレントなパレット、パーソナライズされた概要効果、または動的なテーマの作成を簡素化します。また、コードの保守性と読みやすさを獲得することもできます。

関数構造

の一般的な構文 color-mix() 東：

比色空間（例： srgb、 hsl、 lab））
オプションの割合の最初の色
2番目の色、オプションの割合もあります

パーセンテージが定義されていない場合、混合物はデフォルトで公正です（50％/50％）。パーセンテージは理想的には合計100％です。

比色空間

比色空間の選択は、最終レンダリングに影響を与えます。これが最も一般的です：

SRGB ：Webの標準、線形ですが、特定の移行では不正確な場合があります
HSL ：日陰、飽和、光の柔らかい遷移に役立ちます
ラボ：知覚的に均一で、人間の認識により忠実です

透明性を考慮して

color-mix() 透明性も管理します。一方または両方の色にアルファチャネルが含まれている場合、定義された比率に応じて組み合わされます。

ナビゲーターの互換性

CSSの最近の機能であるため、その使用には最新のブラウザーが必要です。レンダリングをテストし、最大限の互換性のために代替ソリューションを提供することをお勧めします。

コードcss d’epedemple

:root {
  --main-color: #347ab7;
  --white: #ffffff;
  --black: #000000;
}

/* Exemple d'utilisation */
.element-transparent {
  /* Teinte principale atténuée (25% de transparence) */
  color: color-mix(in srgb, transparent, var(--main-color) 75%);
}

.element-lightened {
  /* Teinte principale mélangée à 10% de blanc = plus claire */
  color: color-mix(in srgb, var(--white) 10%, var(--main-color));
}

.element-darkened {
  /* Teinte principale mélangée à 10% de noir = plus sombre */
  color: color-mix(in srgb, var(--black) 10%, var(--main-color));
}

説明

color-mix(in srgb, transparent, var(--main-color) 75%) ：

これは75％を意味します --main-color 25％の透明性と混合。視覚効果は、オーバーレイやぼやけの効果に役立つ不透明な色ではありません。

color-mix(in srgb, var(--white) 10%, var(--main-color)) ：

メイン色に10％白を追加します。これにより、微妙に明るくなります。

color-mix(in srgb, var(--black) 10%, var(--main-color)) ：

10％の黒を追加します。これは、ホーバー、暗いエッジ、またはテーマに非常に実用的な暗い色合いを与えます。

Color-mix（）の完全なファイルの例




  
  Test color-mix()
  



  

  
    Couleur principale + transparence (75%)
  

  
    Couleur principale + 10% de blanc
  

  
    Couleur principale + 10% de noir

Codepen deの例を参照してください：

color-mix（）en css

#CSSでColorMixを使用開発者向けのモダンガイド

何ですか color-mix() ？

なぜ使用するのか color-mix() ？