web-dev-qa-db-ja.com

RGB値が与えられた場合、色合い（またはシェード）を作成するにはどうすればよいですか？

168, 0, 255などのRGB値が与えられた場合、色の濃淡（明るくする）と陰影（暗くする）を作成するにはどうすればよいですか？

colorsrgb
111
DenaliHardtail

いくつかのオプション シェーディングとティント用：

  • シェードの場合、各コンポーネントに前の値の1/4、1/2、3/4などを掛けます。係数が小さいほど、陰が濃くなります。

  • 濃淡の場合、（255-前の値）を計算し、それに1/4、1/2、3/4などを掛けて（係数が大きいほど濃淡が薄くなります）、それを前の値に加算します（それぞれを想定） .componentは8ビット整数です）。

色の操作（色合いやその他のシェーディングなど）は、linear RGBで行う必要があることに注意してください。ただし、ドキュメントで指定された、または画像とビデオでエンコードされたRGBカラーは、線形RGBになる可能性が低く、その場合、いわゆる逆伝達関数 RGBカラーの各コンポーネントに適用する必要があります。この関数は、RGBカラースペースによって異なります。たとえば、sRGB色空間（RGB色空間が不明な場合に想定される）では、この関数はroughly各sRGB色を上げることと同等です。コンポーネント（0〜1の範囲）の2.2乗。 （「リニアRGB」はRGBカラースペースではないことに注意してください。）

「ガンマ補正」に関するViolet Giraffeのコメントも参照してください。

135
Peter O.

いくつかの定義

  • shadeは、色相を「暗くする」か「黒を追加する」ことによって生成されます
  • tintは、色相の「リグニング」または「白の追加」によって生成されます。

ティントまたはシェードを作成する

カラーモデルに応じて、より暗い（影付き）色またはより明るい（色付き）色を作成する方法が異なります。

  • RGB：

    • シェーディングするには：

      newR = currentR * (1 - shade_factor)
newG = currentG * (1 - shade_factor)
newB = currentB * (1 - shade_factor)

    • 色合いを付けるには：

      newR = currentR + (255 - currentR) * tint_factor
newG = currentG + (255 - currentG) * tint_factor
newB = currentB + (255 - currentB) * tint_factor

    • より一般的には、色RGB(currentR,currentG,currentB)と色RGBA(aR,aG,aB,alpha)を重ねた色は次のとおりです。

      newR = currentR + (aR - currentR) * alpha
newG = currentG + (aG - currentG) * alpha
newB = currentB + (aB - currentB) * alpha

    (aR,aG,aB) = black = (0,0,0)はシェーディング用、(aR,aG,aB) = white = (255,255,255)は色付け用

  • HSVまたはHSB：

    • シェーディングするには：Value/Brightnessを下げるか、Saturationを増やします
    • 色合いを付けるには、Saturationを下げるか、Value/Brightnessを増やします
  • HSL：
    • シェーディングするには：Lightnessを下げます
    • 色合いを付けるには、Lightnessを増やします

あるカラーモデルから別のカラーモデルに変換する数式があります。最初の質問にあるように、RGBにいて、たとえばHSVモデルを使用してシェーディングしたい場合は、単にHSVに変換し、シェーディングを行ってからRGBに戻すことができます。変換する式は簡単ではありませんが、インターネットで見つけることができます。言語によっては、コア機能としても利用できる場合があります。

モデルの比較

  • RGBには実装が非常に簡単であるという利点がありますが、
    • 比較的色を濃くするか色味を付けることができます
    • あなたの色がすでに色付けされているか陰影付けされているかどうかはわかりません
  • HSVまたはHSBは、2つのパラメーターを使用して必要なものを取得する必要があるため（Saturation＆Value/Brightness）複雑です
  • HSLは、私の観点から最高です：
    • cSS3でサポート（webapp用）
    • シンプルで正確：
      • 50%は、変更されていない色相を意味します
      • >50%は、色相が明るいことを意味します（色合い）
      • <50%は、色相がより暗い（陰影）ことを意味します
    • 色を指定すると、すでに色付けされているか陰影が付けられているかどうかを判断できます
    • （Lightness部分を置き換えるだけで）色を相対的にまたは絶対に色付けまたはシェーディングできます。
82
JBE

私は現在、キャンバスとピクセルを実験しています...このロジックがうまく機能していることがわかりました。

  1. これを使用してグレーネスを計算します（輝度？）
  2. しかし、既存の値と新しい「tint」値の両方で
  3. 差を計算します（乗算する必要がないことがわかりました）

  4. 'tint'値をオフセットに追加します

    var grey =  (r + g + b) / 3;    
var grey2 = (new_r + new_g + new_b) / 3;

var dr =  grey - grey2 * 1;    
var dg =  grey - grey2 * 1    
var db =  grey - grey2 * 1;  

tint_r = new_r + dr;    
tint_g = new_g + dg;   
tint_b = new_b _ db;

またはそのようなもの...

3
Blair