[colors] RGB 값이 주어 졌을 때 색조 (또는 음영)를 어떻게 만듭니 까?

Program / 글쓴이

와 같은 RGB 값이 주어지면 168, 0, 255색상의 색조 (더 밝게)와 음영 (더 어둡게)을 어떻게 만들 수 있습니까?

답변

음영 및 색조를위한 여러 옵션 중 :

  • 음영의 경우 각 구성 요소에 이전 값의 1/4, 1/2, 3/4 등을 곱합니다. 계수가 작을수록 음영이 더 어두워집니다.

  • 색조의 경우 (255-이전 값)을 계산하고 여기에 1/4, 1/2, 3/4 등을 곱한 다음 (요소가 클수록 색조가 더 밝아짐) 이전 값에 추가합니다 (각각 .component는 8 비트 정수임).

색상 조작 (예 : 색조 및 기타 음영)은 선형 RGB 에서 수행해야합니다 . 그러나 문서에 지정되거나 이미지 및 비디오로 인코딩 된 RGB 색상은 선형 RGB가 아닐 가능성이 높습니다.이 경우 소위 역 전달 함수 를 각 RGB 색상 구성 요소에 적용해야합니다. 이 기능은 RGB 색 공간에 따라 다릅니다. 예를 들어 sRGB 색 공간 (RGB 색 공간을 알 수없는 경우 가정 할 수 있음)에서이 함수는 각 sRGB 색 구성 요소 (범위 0에서 1까지)를 2.2의 거듭 제곱으로 올리는 것과 거의 동일합니다. ( “선형 RGB”는 RGB 색 공간이 아닙니다.)

“감마 보정”에 대한 Violet Giraffe의 설명을 참조하십시오.

답변

일부 정의

  • 그늘 색조를 “어둡게”또는 “블랙 추가”에 의해 제조되어
  • 색조 색조를 “ligthening”또는 “흰색 추가”에 의해 생성된다

색조 또는 음영 만들기

색상 모델에 따라 더 어둡거나 (음영) 더 밝은 (색조) 색상을 생성하는 여러 가지 방법이 있습니다.

  • 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거나 높이십시오.ValueBrightness
  • HSL:
    • 음영 : 낮추기 Lightness
    • 착색하려면 : Lightness

한 색상 모델에서 다른 색상 모델로 변환하는 공식이 있습니다. 초기 질문에 따라 예를 들어 모델을 음영 처리 RGB하는 데 사용하려는 경우 HSV로 변환 HSV하고 음영 처리 한 다음 RGB. 변환하는 공식은 사소한 것은 아니지만 인터넷에서 찾을 수 있습니다. 언어에 따라 핵심 기능으로 사용할 수도 있습니다.

모델 비교

  • RGB 구현이 정말 간단하다는 장점이 있지만 :
    • 상대적으로 색상을 음영 처리하거나 착색 할 수 있습니다.
    • 당신은 당신의 색깔이 이미 착색되어 있는지 또는 음영 처리되었는지 전혀 모릅니다.
  • HSV또는 HSB원하는 것을 얻기 위해 두 개의 매개 변수를 사용해야하기 때문에 다소 복잡합니다 ( Saturation& Value/ Brightness).
  • HSL 내 관점에서 최고입니다.
    • CSS3에서 지원 (웹 앱용)
    • 간단하고 정확한 :
      • 50% 변경되지 않은 색조를 의미합니다.
      • >50% 색조가 더 가볍다는 의미입니다 (색조).
      • <50% 색조가 더 어둡다는 의미 (음영)
    • 색상이 주어지면 이미 착색되었는지 또는 음영 처리되었는지 확인할 수 있습니다.
    • 상대적으로 또는 절대적으로 색상을 착색하거나 음영 처리 할 수 ​​있습니다 ( Lightness부품 만 교체하여 ).

답변

저는 현재 캔버스와 픽셀을 실험하고 있습니다.이 논리가 더 잘 작동한다는 것을 알게되었습니다.

  1. 이것을 사용하여 회색도 (luma?)를 계산합니다.
  2. 하지만 기존 값과 새 ‘색조’값 모두
  3. 차이를 계산하십시오 (나는 곱할 필요가 없다는 것을 알았습니다)

  4. ‘색조’값을 오프셋하기 위해 추가

    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;

또는 그런 것 …

답변