CSSで行う乗算など

無難に使用できるのは乗算だと思います。

//通常
mix-blend-mode: normal;

//乗算
mix-blend-mode: multiply;

//スクリーン
mix-blend-mode: screen;

//オーバーレイ
mix-blend-mode: overlay;

//覆い焼き
mix-blend-mode: color-dodge;

//焼き込み
mix-blend-mode: color-burn;

//比較（暗）
mix-blend-mode: darken;

//比較（明）
mix-blend-mode: lighten;

//ハードライト
mix-blend-mode: hard-light;

//ソフトライト
mix-blend-mode: soft-light;

//差の絶対値
mix-blend-mode: difference;

//除外
mix-blend-mode: exclusion;

//色相
mix-blend-mode: hue;

//彩度
mix-blend-mode: saturation;

//カラー
mix-blend-mode: color;

//輝度
mix-blend-mode: luminosity;

 
背景画像で使用できる似たような感じの mix-blend-mode がある。
例）mix-blend-mode: multiply;
これは、同じ階層に背景色を指定する必要がある。

background-image: url("bg01.png") ;
background-color: #ccc;
background-blend-mode: multiply;