[프로세싱] 프로세싱에서 RGB와 HSB

프로세싱에서 RGB와 HSB

RGB와 HSB는 색상을 표현하는 두 가지 다른 방식입니다. 프로세싱(Processing)에서 그래픽을 다룰 때 자주 사용되며, 각각 고유한 특징을 가지고 있습니다.

1. RGB (Red, Green, Blue)

RGB는 빨간색(Red), 초록색(Green), 파란색(Blue)의 세 가지 기본 색상을 혼합하여 다양한 색을 표현하는 방식입니다. 모니터나 디지털 디스플레이에서 주로 사용하는 방식으로, 세 가지 색의 강도를 각각 0부터 255까지의 값으로 지정할 수 있습니다.

• RGB 값의 의미:
  • (255, 0, 0)은 순수한 빨간색을 나타냅니다.
  • (0, 255, 0)은 초록색을 나타냅니다.
  • (0, 0, 255)는 파란색을 나타냅니다.
  • 세 값이 모두 255이면 흰색, 모두 0이면 검은색이 됩니다.
• 프로세싱에서 RGB 사용 예시

background(255, 0, 0); // 빨강색 배경
fill(0, 255, 0); // 초록색으로 채움

코드 실행 결

2. HSB (Hue, Saturation, Brightness)

HSB는 색상을 색조(Hue), 채도(Saturation), 밝기(Brightness)로 나누어 표현하는 방식입니다. HSB는 색을 인간의 지각 방식에 더 가까운 방식으로 다룹니다.

• Hue (색조): 0에서 360도까지의 각도로 색상의 종류를 나타냅니다. 0은 빨간색, 120은 초록색, 240은 파란색입니다.
• Saturation (채도): 0%에서 100%까지의 값으로 색의 선명함을 나타냅니다. 0%는 회색, 100%는 가장 선명한 색입니다.
• Brightness (밝기): 0%에서 100%까지의 값으로 색의 밝기를 나타냅니다. 0%는 검은색, 100%는 가장 밝은 색입니다.
• 프로세싱에서 HSB 사용 예시

코드 실행 결과

RGB와 HSB의 차이

• 표현 방식: RGB는 빨간색, 초록색, 파란색의 혼합으로 색을 만들고, HSB는 색조, 채도, 밝기를 이용하여 색을 표현합니다.
• 사용 용도: RGB는 컴퓨터와 같은 디지털 장치에서 색을 직접 제어할 때 많이 사용됩니다. 반면 HSB는 색을 직관적으로 선택하거나 변형할 때 더 유용합니다. 예를 들어, 색을 어둡게 하거나 밝게 만들고 싶을 때는 HSB에서 밝기 값을 조정하는 것이 더 쉽습니다.

프로세싱에서의 RGB와 HSB 변환

프로세싱에서는 colorMode() 함수를 사용하여 RGB와 HSB 모드를 전환할 수 있습니다. 기본 설정은 RGB 모드이지만, HSB 모드로 전환하면 색상을 더 직관적으로 다룰 수 있습니다.

colorMode(RGB);  // RGB 모드
colorMode(HSB, 360, 100, 100);  // HSB 모드

코드 실행 결과

 

RGB와 HSB를 이해하고 적절하게 사용하는 것은 그래픽 작업을 할 때 다양한 색상을 표현하고 조절하는 데 큰 도움이 됩니다. 특히, 원하는 색을 찾기 어렵다면 HSB 모드를 사용해 보는 것이 유용할 것입니다.