color-mix()は、色と割合を指定して、その結果を返してくれるCSSの関数です。
構文：color-mix()の書き方
color-mix(色空間, 1色目, 2色目);色空間にはsrgbやlab, hsl などを指定します。
色の混合
下記のように書くと、#3858e9とwhiteを混合した色を返します。
color-mix(in srgb, #3858e9, white);色の割合を指定することもできます。
color-mix(in srgb, #3858e9 10%, white);色の透過
transparentと組み合わせることで透過色になります。
color-mix(in srgb, black 10%, transparent);上記の場合、黒を90%透過した結果を返します。この場合、 rgba(0,0,0,0.1) と計算方式が異なりますが、見た目は殆ど同じです。
個人的なポイントは、カスタムプロパティ（変数）を指定できるということです。
color-mix(in srgb, var(--main-ttl-bg) 10%, transparent);これでベースカラーなどを基にした色の使い回しが楽にできそうです。