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

와 같은 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 색상으로?
• RGB 값을 HSV로 변환

모델 비교

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

• 이 주제에 대해 더 자세히 알고 싶다면 : Wiki : Colors Model
• 해당 모델에 대한 자세한 정보 : Wikipedia : HSL 및 HSV

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

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;
   

또는 그런 것 ...