와 같은 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
거나 높이십시오.Value
Brightness
- 음영 처리 :
HSL
:- 음영 : 낮추기
Lightness
- 착색하려면 :
Lightness
- 음영 : 낮추기
한 색상 모델에서 다른 색상 모델로 변환하는 공식이 있습니다. 초기 질문에 따라 예를 들어 모델을 음영 처리 RGB
하는 데 사용하려는 경우 HSV
로 변환 HSV
하고 음영 처리 한 다음 RGB
. 변환하는 공식은 사소한 것은 아니지만 인터넷에서 찾을 수 있습니다. 언어에 따라 핵심 기능으로 사용할 수도 있습니다.
모델 비교
RGB
구현이 정말 간단하다는 장점이 있지만 :- 상대적으로 색상을 음영 처리하거나 착색 할 수 있습니다.
- 당신은 당신의 색깔이 이미 착색되어 있는지 또는 음영 처리되었는지 전혀 모릅니다.
HSV
또는HSB
원하는 것을 얻기 위해 두 개의 매개 변수를 사용해야하기 때문에 다소 복잡합니다 (Saturation
&Value
/Brightness
).HSL
내 관점에서 최고입니다.- CSS3에서 지원 (웹 앱용)
- 간단하고 정확한 :
50%
변경되지 않은 색조를 의미합니다.>50%
색조가 더 가볍다는 의미입니다 (색조).<50%
색조가 더 어둡다는 의미 (음영)
- 색상이 주어지면 이미 착색되었는지 또는 음영 처리되었는지 확인할 수 있습니다.
- 상대적으로 또는 절대적으로 색상을 착색하거나 음영 처리 할 수 있습니다 (
Lightness
부품 만 교체하여 ).
- 이 주제에 대해 더 자세히 알고 싶다면 : Wiki : Colors Model
- 해당 모델에 대한 자세한 정보 : Wikipedia : HSL 및 HSV
답변
저는 현재 캔버스와 픽셀을 실험하고 있습니다.이 논리가 더 잘 작동한다는 것을 알게되었습니다.
- 이것을 사용하여 회색도 (luma?)를 계산합니다.
- 하지만 기존 값과 새 ‘색조’값 모두
- 차이를 계산하십시오 (나는 곱할 필요가 없다는 것을 알았습니다)
-
‘색조’값을 오프셋하기 위해 추가
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;
또는 그런 것 …