[프로세싱] HSB 컬러 모델에서 색조(Hue), 채도(Saturation), 명도(Brightness)

HSB 컬러 모델에서 색조(Hue), 채도(Saturation), 명도(Brightness)

HSB 컬러 모델에서 색상은 색조(Hue), 채도(Saturation), 명도(Brightness)라는 세 가지 요소로 구분됩니다. 각각의 개념은 색을 직관적으로 이해하고 표현하는 데 중요한 역할을 합니다. 이를 하나씩 자세하게 설명드리겠습니다.

1. 색조 (Hue)

색조는 우리가 일반적으로 떠올리는 색상의 종류를 나타냅니다. 즉, 빨강, 초록, 파랑 등 색의 '본질적인 특성'을 나타내는 값입니다. HSB에서 색조는 0도에서 360도까지의 값으로 표현됩니다. 색상환에서 각도를 기준으로 색을 정렬하며, 다음과 같은 주요 색이 각도에 대응합니다.

• 0°: 빨강 (Red)
• 60°: 노랑 (Yellow)
• 120°: 초록 (Green)
• 180°: 청록 (Cyan)
• 240°: 파랑 (Blue)
• 300°: 자주 (Magenta)

360°는 다시 빨강과 같은 위치로 돌아가며, 색상환이 원형으로 연결되는 구조입니다. 색조 값이 바뀔 때 색상이 어떻게 변하는지 쉽게 이해할 수 있습니다.

예시

• 색조가 0도이면 빨간색입니다.
• 색조가 120도이면 초록색입니다.
• 색조가 240도이면 파란색입니다.

2. 채도 (Saturation)

채도는 색의 '선명함'을 나타냅니다. 채도가 높을수록 색이 강렬하고 선명하게 보이며, 채도가 낮을수록 색이 흐려져 회색에 가까워집니다.

• 100% 채도는 해당 색의 가장 강렬한 버전을 의미합니다. 예를 들어, 100% 채도의 빨강은 매우 진한 빨강입니다.
• 0% 채도는 완전히 무채색을 의미하며, 이 경우 색조와 상관없이 완전한 회색이 됩니다.

채도는 색의 강렬함을 조절하는 중요한 요소로, 색상이 얼마나 '회색에서 멀리 떨어져 있는지'를 결정합니다. 그림에서 물감을 섞을 때, 더 많은 회색 또는 백색을 섞으면 색이 흐려지는 것과 비슷한 개념입니다.

예시

• 채도가 100%일 때는 강렬한 원색이지만, 채도가 50%일 때는 그 색이 약간 흐리게 됩니다.
• 채도가 0%일 때는 완전히 회색이 됩니다.

3. 명도 (Brightness)

명도는 색의 밝기를 나타냅니다. 즉, 색이 얼마나 밝거나 어두운지를 결정하는 요소입니다. 명도가 높을수록 밝은 색을 나타내고, 낮을수록 어두운 색을 나타냅니다.

• 100% 명도는 해당 색이 가장 밝은 상태입니다. 예를 들어, 빨간색의 100% 명도는 밝은 빨강을 의미합니다.
• 0% 명도는 완전히 검정색입니다. 이때는 색조와 채도와 상관없이 항상 검은색으로 표현됩니다.

명도는 색의 밝기와 명암을 조절하는 데 사용됩니다. 예를 들어, 동일한 색조와 채도를 유지하면서 명도를 높이면 밝은 색, 명도를 낮추면 어두운 색이 됩니다.

예시

• 명도가 100%일 때는 가장 밝은 색이 되고, 50%일 때는 중간 정도의 밝기가 됩니다.
• 명도가 0%일 때는 완전히 검은색입니다.

HSB 컬러 모델의 상호작용

이 세 가지 요소는 서로 결합되어 색상을 구성합니다. 색조는 기본적인 색의 유형을 정의하고, 채도는 색의 강렬함을 조절하며, 명도는 색의 밝기를 결정합니다. 이를 통해 HSB 모델은 RGB 모델에 비해 더 직관적이고 감각적으로 색을 조정할 수 있게 해 줍니다.

예시

1. 색조가 240도(파랑), 채도가 100%, 명도가 100%일 때, 이 색은 밝고 강렬한 파란색입니다.
2. 동일한 색조와 채도를 유지하면서 명도를 50%로 줄이면 어두운 파란색이 됩니다.
3. 명도를 유지하면서 채도를 50%로 줄이면 흐린 파란색이 됩니다.

1, 2, 3의 결과

 

void setup() {
  size(600, 200);  // 창 크기 설정
  colorMode(HSB, 360, 100, 100);  // HSB 모드로 변경, 범위를 360, 100, 100으로 설정
  
  noStroke();  // 윤곽선 제거

  // 첫 번째 사각형: 색조 240도, 채도 100%, 명도 100% (밝고 강렬한 파란색)
  fill(240, 100, 100);  
  rect(0, 0, 200, height);  // 첫 번째 사각형 그리기
  
  // 두 번째 사각형: 색조 240도, 채도 100%, 명도 50% (어두운 파란색)
  fill(240, 100, 50);  
  rect(200, 0, 200, height);  // 두 번째 사각형 그리기
  
  // 세 번째 사각형: 색조 240도, 채도 50%, 명도 100% (흐린 파란색)
  fill(240, 50, 100);  
  rect(400, 0, 200, height);  // 세 번째 사각형 그리기
}

void draw() {
  // 배경 및 색상 업데이트 없음
}

 

이처럼 HSB 모델은 색을 쉽게 시각적으로 조정할 수 있도록 해주며, 색상 조정 작업을 할 때 매우 유용합니다. 디자인 작업이나 디지털 페인팅, 프로세싱에서 그래픽 작업을 할 때 HSB 컬러 모델을 사용하면 색상 변경이 더 직관적이고 효율적으로 이루어집니다.