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


124

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

답변:


153

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

  • 음영의 경우 각 구성 요소에 이전 값의 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의 설명을 참조하십시오.


20
나는 이것을 시도했고 훌륭하게 작동했습니다. 수식의 예를 작성하는 것이 도움이 될 것이라고 생각했습니다. 원본 (r, g, b); 그늘 (RS, GS, BS) : rs = r * 0.25, gs = g * 0.25, bs = b * 0.25(즉, 꽤 어두운 그늘이다); 색조 (RT, 하였다,이 BT) rt = r + (0.25 * (255 - r)), gt = g + (0.25 * (255 - g)), bt = b + (0.25 * (255 - b))(즉, 꽤 밝은 색조)입니다. 나는 많은 색조를 생성하는 멋진 배열의 일부로 수행했으며 훌륭하게 작동했습니다. 도움이되기를 바랍니다. 고마워 피터.
Thomas

1
당신은 실수했습니다. 그 반대입니다.
프란체스코 Menzani

이러한 조작이 감마 보정을 고려하지 않아야한다고 확신합니까?
Violet Giraffe

1
@VioletGiraffe : 감마 보정으로 좋은 지적을합니다. 내 편집을 참조하십시오. (이것은 22 시간 전에 삭제 된 내 댓글을 대체합니다.)
Peter O.

97

일부 정의

  • 그늘 색조를 "어둡게"또는 "블랙 추가"에 의해 제조되어
  • 색조 색조를 "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
저는 여기에서 "색조를"어둡게 "함으로써 그늘이 만들어집니다" 라고 믿습니다 . 색상이란 색상을 의미합니다. HSL / HSV에서와 같이 색조에 대해 이야기하는 경우이를 변경하면 음영 / 색조가 아닌 다른 색상이 생성되기 때문입니다. 색조 (0-360 °)는 그 자체로 더 어둡거나 밝아 질 수 없습니다. 색조 / 색조를 제공하려면 SL / SV 값을 수정해야합니다. 이 정의는 누군가가 색조를 변경하면 더 어둡거나 밝은 색상을 생성한다고 오해 할 수 있습니다.
akinuri

음영 버전은 0부터 시작하는 색상 범위에서만 작동합니다. 색상 범위의 절반을 색상 채널 값에 더한 다음 수학을 수행 한 다음 해당 범위를 다시 뺍니다. 색상이 서명되어 있고 오버플로 때문에 무언가를 파괴하지 않고 계산을 수행 할 수 있다면 의도 한대로 작동합니다.
t0b4cc0

3

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

  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;
    

또는 그런 것 ...

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.