HSB 컬러 시스템
현역 전문가들 위한 입문서
(출처 : [The HSB Color System: A Practitioner's Primer]의 기사를 번역 및 가공한 콘텐츠입니다.)
HSB 컬러 시스템에 대해서는 잘 설명해 놓은 좋은 기사가 온라인에 단 하나도 없습니다.
250만 개의 Google 검색 결과가 있지만 HSB 시스템을 실제로 사용하고 만드는 사람이 검색한 결과는 없는 걸까요?
이 기사에서는 H, S, B가 무엇인지에 대해 다루고, 이것이 왜 널리 사용되는 단일 최고의 컬러 시스템인지, 그리고 디지털에서 일상적으로 사용되는 HSB 시스템의 몇 가지 복잡한 점에 대해 설명하려고 합니다.
천천히 살펴봅시다.
컴퓨터의 내부는 모두 1과 0으로 되어있습니다. 이 말인즉슨 컴퓨터에서는 색상이 단지 bit일 뿐이라는 것입니다.
알 수 없는 신비한 무지개들의 집합이라고 생각했던 색상이 컴퓨터에서 단지 3개의 숫자만으로 출력된다는 것을 알면 실망할지도 모릅니다.
HTML과 CSS를 코딩한 적이 있다면 아마도 RGB에 익숙할 것입니다.
RGB는 세 가지 숫자로 표현됩니다 : (1) 얼마나 빨간색인지 (R), (2) 녹색인지 (G) , 그리고 (3) 파란색인지 (B).
RGB는 컴퓨터와 색상에 대해 커뮤니케이션하는 기본적인 시스템으로 충분히 직관적인 방식입니다.
그러나 컴퓨터가 인지하기 쉬운 시스템이 인간에게도 쉬운 것을 의미하진 않습니다.
그것이 HSB가 필요한 이유입니다.
출처 : https://libdiz.com/en/books/prepress/4-color-spaces-and-printing/hsb-model/HSB는 Hue(색조) - Saturation(채도) - Brightness(밝기)의 약자로 색상을 설명하는 훨씬 인간 친화적인 방식입니다.
HSB가 좋은 이유는 색상을 설명할 때 이미 사람들이 자연스럽게 생각하는 직관적인 생각 시스템을 사용하기 때문입니다.
Hue(색조) = “무지개 색”
색조는 0에서 360 사이의 숫자입니다.
원의 각도가 단위로 측정됩니다. 하단의 컬러 휠에서 색조는 색상이 컬러 휠 위에 위치한 곳입니다
컬러 휠HSB에 대한 이해력을 높이려면 위의 컬러 휠 중 세 가지 점을 외워두어야 합니다.
원 안에서 빨강, 초록, 파랑은 서로 등거리에 있고,
빨간색은 0 °입니다.
초록색은 120 °입니다.
파란색은 240 °입니다.
적색도 360 °이며 0 °와 완전히 동일합니다.
어떤 색상이 필요한지 생각할 때, 바로 이 빨강, 초록, 파랑 세 가지 점이 어디인지 생각해 봄으로써 올바른 색조에 가까운 숫자를 빠르게 입력할 수 있습니다.
Saturation(채도) = “풍부함”
채도는 0에서 100 사이의 숫자입니다.
따라서 어떤 색조를 선택했는지에 상관없이 100%의 채도가 해당 색상의 가능한 가장 풍부한 버전이 되고 0 % 의 채도는 해당 색상의 회색 버전이 됩니다 (예 : 색상이 밝은 경우 밝은 회색이 되고 색상이 어두운 경우 어두운 회색이 됩니다.)
채도 시스템은 꽤 간단하며, 때때로는 색조가 섞여있는 정도라고 설명되기도 합니다.
따라서 0%는 플랫한 회색이지만 100%는 회색이 섞이지 않는, 모니터가 만들 수 있는 가장 풍부하고 컬러풀한 색상입니다.
Brightness = "밝기"
밝기는 0에서 100 사이의 숫자입니다.
채도와 마찬가지로 때때로 백분율로 표시됩니다.
0 % 밝기는 채도나 색조와 상관없이 검은색입니다.
100 % 밝기는 채도가 0 % 인 경우에만 흰색입니다. 그렇지 않으면 100 % 밝기는 단지 매우 밝은 색상입니다.
이해가 잘 가지 않는다면, 밝기가 전구라고 상상하면 쉽습니다.
0 % 는 전구가 꺼져 있음을 의미합니다 (실내의 검은색).
100 % 는 빛이 최대 강도를 발휘한다는 것을 의미합니다.
그래서 100 % 밝기는 밝은 색상이거나, 이미 흰색인 경우 완벽히 순수한 흰색으로 보입니다.
이제 우리는 위의 세 가지 의미 있는 숫자로 색상을 기술할 수 있습니다
Hue(색조) : 0 °에서 360 °까지 색상환과 가장 유사한 색상
Saturation(채도) : 0 % 에서 100 % 까지 얼마나 색상이 섞여 있는지
Brightness(밝기) : 0 % 에서 100 % 까지 "전구"가 켜져 있는 정도
HSB 실습
이제 이 시스템을 실습해보도록 하겠습니다.
색조(Hue)를 이용한 컬러 베리에이션
첫째, 색조(hue)를 이용하는 것은 컬러 베리에이션을 만드는 환상적인 방법입니다.
0 °에서 360 °까지 다양한 선택을 할 수 있기 때문에 파란색이 단순히 "파란색"이 되는 것이 아니라 색조를 약간 위아래로 밀고 당겨 멋진 베리에이션을 쉽게 얻을 수 있습니다.
맨 처음, 240°의 매우 기본 파란색, 가운데 색상을 선택해보도록 합시다.
240°에서 밝기나 채도를 조절해 베리에이션을 얻는 것보다 30°를 다운시켜 하늘색으로 이동하면 더 가볍고 캐주얼한 느낌의 파랑을 얻을 수 있습니다.
또한 반대로 20° 까지 색조(hue)를 올리면 네온 느낌의 완전히 다른 보라색을 얻을 수 있습니다.
마찬가지로, 빨간색도 가능합니다.
오류 메시지에 쓰일법한 매우 강한 0°의 빨간색 조(hue)를 10°만 내리면 위협적인 강렬한 빨강에서 좀 더 우호적인 핑크를 만들 수 있습니다.
또는 20°를 조정해 안정되어 보이는 오렌지 색을 얻을 수도 있습니다.
색조(hue)를 사용하면 다양한 옵션을 사용할 수 있습니다.
자신의 팔레트를 본인이 알고 있는 색상으로 제한하지 말고 다양하게 조합해보세요.
채도(Saturation)로 가시성 조정
채도 조정과 관련된 테크닉이 많이 있지만, 이제부터 할 이야기는 채도를 통해 가시성을 조정하는 것입니다.
UI의 모든 것을 압도하는 색상이 있는 경우 채도를 낮추는 것이 좋습니다.
Google 로고를 예로 들어 살펴보겠습니다.
나는 파란색의 채도를 90%로 조정시켰더니 G가 사납게 튀어나와 보입니다.
로고를 몇 초 동안 계속 응시하면, "G"와 "g"가 다른 색을 가진 알파벳 사이에서 튀어나와 보이는 것을 알게 될 것입니다.
일반적인 Google 로고에서는 채도의 조정을 통해 다양한 색상이 균형을 더 잘 유지하도록 만들어져 있습니다.
충돌하는 색상을 수정하고 어두운 색조를 풍부하게 하는 것을 포함하여 모든 종류의 것들에 대해 채도의 조정을 사용하면 가시적인 이미지를 만들 수 있습니다.
이제는 HSB의 흥미로운 사실 중 하나, 그리고 그것이 의미하는 바를 살펴보겠습니다.
검은색의 반대는 흰색이 아니다.
HSB에서 검은색과 흰색을 만드는 방법은 다음과 같습니다.
검은색 : 밝기를 0 %로 설정합니다. (색조 또는 채도는 중요하지 않음).
흰색 : 밝기를 100 %로 설정하고 채도를 0 %로 설정합니다. (색조는 중요하지 않음).
이것은 의미심장하게도, (HSB 시스템에서) 검은색이 흰색의 반대가 아니라는 것을 의미합니다.
이것을 증명하는 또 다른 방법은 색상에 검은색이나 흰색을 추가하는 것이 무엇을 의미하는지 생각하는 것입니다.
흰색을 추가하려면 색상 선택 도구에서 색상을 흰색으로 이동해야 합니다.
흰색이 왼쪽 위 모서리에 있으며 충분히 흰색을 추가하면 채도가 감소하고(왼쪽으로 이동) 밝기가 증가합니다(위로 이동).
빨강을 더 밝은 빨강으로 변경흰색을 추가하면 다음과 같이 보입니다.
하지만 검은색을 더할 때는 어떨까요?
검은색은 색상 피커 사각형의 전체 하단면이기 때문에 검은색을 추가하면 밝기가 감소합니다(아래로 이동).
채도는 중요하지 않습니다(왼쪽 혹은 오른쪽으로 이동).
빨강을 더 어두운 빨강으로 변경더 밝은 빨강을 얻는 화살표와 더 어두운 빨강을 얻는 화살표는 서로 상반되지 않습니다.
이것은 흑백은 HSB에서 반대가 아니라는 뜻이며 실제로 검은색만 추가해서 어두운 베리에이션을 만들어보면 해당 베리에이션이 매우 둔해 보입니다.
어두움에 대한 베리에이션이 필요한 경우, 검은색을 추가하는 대신 흰색을 제거하는 것이 좋습니다.
빨강을 흰색이 적은 빨강으로 변경이 방법이 훨씬 더 풍부한 어두운 색상 베리에이션을 만들어 줍니다.
흰색을 제거하는 것, 즉 어두운 색조를 보다 풍부하게 만드는 것은 어두운 색의 95% 이상의 색조를 생성하는 "올바른"방법입니다.
보너스 설명 : HSL과 HSB의 차이점은 무엇일까요?
HSB와 HSL은 비슷하지만, HSL에서는 HSB와 다르게 검은색과 흰색이 반대입니다.
HSB:
검은색 : 밝기를 0 %로 설정합니다. (색조 또는 채도는 중요하지 않음).
흰색 : 밝기를 100 %로 설정하고 채도를 0 %로 설정합니다. (색조는 중요하지 않음).
HSL:
검은색 : 밝기를 0 %로 설정하십시오 (색조 또는 채도는 중요하지 않음).
흰색 : 밝기를 100 %로 설정하십시오 (색조 또는 채도는 중요하지 않음)
밝기를 50 % 이상으로 추가하는 것은 흰색을 추가하는 것과 같습니다 (HSB 채도가 낮아지고 HSB 밝기가 올라갑니다.)
밝기를 50 % 이하로 줄이는 것은 검정을 추가하는 것과 같습니다 (HSB 채도에 영향을 주지 않지만 HSB 밝기가 감소합니다).
HSL의 밝기 특성은 얼마나 빛이 있는지에 달린, HSB의 채도와 밝기의 이상한 혼합입니다!
색상 시스템에 대해 더 자세히 배우고 싶다면, 이 다이어그램을 참고해도 좋습니다.
이 그림은 HSB와 HSL사이의 미묘하지만 중요한 차이를 담고 있습니다.
흑백이 서로 반대되는 것이 실제로는 좀 더 합리적인 시스템 일 수 있지만 현대 UI 디자인 앱 (Sketch, Figma 및 Adobe XD)은 모두 HSL이 아닌 HSB를 사용합니다.
이런 많은 시스템이 있지만, 결국 UI 디자인 툴은 디자인을 하면서 제일 먼저 색상을 선택하고 조정하는 곳입니다. 디자인을 코드로 변형하려면 HSB나 HSL보다 쉬운 hex값을 사용해서 손쉽게 만들어 보는 것도 좋은 방법입니다.
읽어주셔서 감사합니다!
