CSSまたはPHP？元の80％の「透明」のない色？

Question

これは難しい質問かもしれません。

私は、引数$alphaでrgba()に色の値を返すphp関数を持っています。

function colorWheel($alpha) { 

    "rgba(170, 135, 178, ".$alpha.")" 
    … 
} 

そう...

.title { color: <?php echo colorWheel(.8); ?>; } 

を呼び出すときに...私はrgba(170, 135, 178, .8);

---

を取得し、私はこれで持っている問題は、色は "透明" であることであり、 "オーバーレイ" が表示されます。

しかし、私は本当に持っていると何色値のちょうど80％です！ 透明なオーバーレイを使用しません。

質問はどのように解決するのですか？

これを行うにはどのような創造的なアイデアですか？私はrgba()を使用する必要はありません、それは私の心に来たちょうど最も簡単なものです。 CSSアルファ値を持つオーバーレイシェイプをブレンドしない方法はありますか？

またはを計算するPHPの解答は、のrgb(170, 135, 178)ですか？ 関数内に色が多く存在するため、この計算は関数で動的に機能することが重要です。これは"How to return a color-value based a date and random?"へのフォローアップの質問です！

ありがとうございます。それを行う必要があります

Answer 1

：あなたはそれを軽くしたい場合も

function colorWheel($alpha) { 
    $r = round(170 * $alpha); 
    $g = round(135 * $alpha); 
    $b = round(178 * $alpha); 
    "rgba($r, $g, $b, 1)"; 
    … 
} 

、色を暗くなり、あなたは> 1の値にアルファを入れて、そしてまたRかどうかを確認する必要があり、グラムまたはbが255を超え、255に設定されている場合

Answer 2

不透明度のある色をシミュレートするには、背景色も必要です。つまり、R,G,Bは背景色の要素、r,g,bは色の要素です。 あなたが特定の背景に不透明色をシミュレートしたい場合は、同じ運河の対応する値を取り、特定の重みでそれらを追加する必要があります

r = r*alpha + R*(1-alpha) 
g = g*alpha + G*(1-alpha) 
b = b*alpha + B*(1-alpha) 

は、簡単な例を取ることができます。背景に（白）の色のrgb(r,g,b) = rgb(255,0,0)（赤色）の上にalpha = 0.8を得たいと思う。

r = 255*0.8 + 255*0.2 = 255 
g = 0*0.8 + 255*0.2 = 51 
b = 0*0.8 + 255*0.2 = 51 

Answer 3

質問は、「色の80％」のあなたの定義は、実際には何かということです。ということは、あなたは80％あなたの色+ 20％BGを合計する必要があります。

CSSには現在、RGBとHSLの2つの色空間が用意されています（実際には、かなりwellに対応しています）。

は、次のRGB計算を行うことができます：

function colorWheel($alpha) { 

    'rgba('.$r*$alpha.','.$g*$alpha.','.$b*$alpha.', 1)'; 
    … 
} 

をそれとも、HSLを取り、わずか20％の輝度（およびまたは彩度）チャネルを減らすことができます。 HSLの色空間は、色を濃く/明るくするなどの作業を行う際には直感的です。

function colorWheel($alpha) { 

    "hsla($h,$s,".$l*$alpha.",1)"; 
    // or 
    // ("hsla($h, "+$s*$alpha+", $l, 1)";) 
    … 
} 

これらはすべて、（わずかに）異なる結果をもたらします。

色空間はあまりに複雑すぎない数式で相互に変換できます。おそらく、ランダムなカラーピッカー（例：this oneまたはthat one）を見て、どの計算方法が最適かを判断する必要があります。