p5.js colorMode - RGB / HSB 알아보기 (feat. 색상 대비)

p5.js colorMode - RGB / HSB 알아보기 (feat. 색상 대비)

fill(), stroke(), background(), color() 함수에 색상을 채울 때 사용되는 기본 컬러 모드는 RGB 색상 모드로 설정되어 있다. 이 외에 colorMode(HSB)나 colorMode(HSL)로 설정하면 각각의 색상 모드로 변경할 수 있다.

RGB 색상만 알아도 충분히 표현은 가능하지만, 명도/채도 등의 색상에 대한 기본 속성을 알아두면 좀 더 조화롭게 배색하는 데 도움이 될 것이다.

 

RGB 색상 모드

컴퓨터가 색상을 보는 방식으로 빛의 3원 색인 빨강(RED), 초록(GREEN), 파랑(BLUE) 세 종류의 광원을 이용하여 색을 혼합하며, 색을 섞을수록 밝아지기 때문에 '가산 혼합'이라고 한다. 

 

RGB - 빛의 삼원색(빨강, 초록, 파랑) 을 이용하여 색을 표현

 

 

3 가지 색상 (빨강/녹색/파랑)은 각각 0 ~ 255 사이의 값으로 표시되며,
그 값이 0에 가까우면 광원이 약하고 255에 가까워질수록 광원의 세기가 강해진다.

예를 들어 검은색은 RGB 값 ( R = 0, G = 0, B = 0 ) 흰색은 ( R = 255, G = 255, B = 255)으로 표시된다.
아래와 같이 RGB 값을 조합하여 다양한 색상을 만들 수 있고, 
각 값들을 조합하면 1600만 개 이상의 색상을 표현할 수 있다고 한다.

 

RGB 값을 조합하여 만든 색상 예시

 

 

HSB 색상 모드

색의 3 속성인 색상(Hue), 채도(Saturation), 명도(Brightness)를 이용하여 색을 혼합한다. 
colorMode(HSB)로 변경 후 사각형 도형에 채워질 색상을 fill(Hue, Saturation, Brightness) 순으로 채워 넣으면 되며 알파 값은 생략 가능하다. 
* 알파 값이 0에 가까우면 투명해지고 1에 가까울수록 불투명해진다.

 

위의 예시 fill(153, 71, 89)에서 153/71/89는 Hue/Saturation/Brightness를 나타내며 각 값을 적절히 사용하여 원하는 색상 값을 도출하기 위해 아래 내용을 참고하기 바란다.

• 첫 번째 숫자(Hue) : 색상을 나타내며 값의 범위는 0 ~ 360 도이다 (아래 그림 참고)

출처: 색상 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

 

 

• 두 번째 숫자(Saturation) : 색상의 맑고 탁한 선명도를 나타내는 채도로 값의 범위는 0 ~ 100까지의 백분율로 나타낸다. 이 경우 0은 색상 없음을 100은 전체 색상을 의미한다.

채도가 0일 경우 무채색 / 100일 경우 순색이 된다

 

 

• 세 번째 숫자(Brightness) : 색상의 밝고 어두운 정도를 나타내는 명도로 값의 범위는 채도와 마찬가지로 0 ~ 100까지의 백분율로 나타낸다.
  
  흰색을 추가하여 색상 밝기를 향상하거나 검은색을 추가하여 감소시킬 수 있으며, 이 경우 0은 검은색을 100은 흰색을 나타낸다. 따라서 명도의 값이 0이 될수록 색상이 더 어두워지고 100이 될수록 색상이 더 밝아진다.

명도가 0일 경우 검은색 / 100일 경우 흰색이 된다

 

 

 

명도와 채도에 따른 색상 변화 비교

 

색상 대비

1. 단색 대비

동일한 색상에 명도나 채도 값의 차이를 이용하여 변화를 주는 방법

 

Adobe Color - 단색 대비

 

2. 유사색 대비

색상환에서 가까운 위치에 있는 색상을 이용하여 변화를 주는 방법

Adobe Color - 유사색 대비

 

3. 보색 대비

색상환에서 반대 위치에 있는 색상을 이용하여 변화를 주는 방법

Adobe Color - 보색 대비

 

 

어떤 색을 쓰는 게 좋을지 색 배치가 너무 어렵다면 Adobe 색상 휠을 조작해보면서 그 답을 얻어 보는 것도 괜찮을 것 같다.

 

색상 휠, 색상 팔레트 생성기 | Adobe Color

 

 

p5.js 기본 도형 그리기 - 호(arc) 그리기