musigned by musign
디지털 아티스트 컴퍼니 뮤자인
안녕하세요!
디지털 아티스트 컴퍼니 뮤자인입니다:)
오늘은 UX/UI 디자이너가 알려주는 컬러 꿀팁! 2번째 시간입니다.
RGB, CMYK 등 컬러모드에 대한 설명에 보태서
디지털 에이전시인 뮤자인의 UX/UI 디자이너들의 즐겨찾기까지!
다시 한번 공개해드릴게요!
컬러모드 (Color Mode)
RGB, CMYK, HSB, HSL
musigned by musign
디지털 아티스트 컴퍼니 뮤자인
대표적인 컬러모드 4가지를 소개해드리겠습니다.
흔히 알고 계시는 RGB와 CMYK 외에도 HSB, HSL 까지 다양한 컬러모드의 개념을 숙지하는 것이 디자인에 많은 도움이 된답니다.
오늘 포스팅을 계기로 이론을 다지고, 이해를 더하는 시간이 되었으면 좋겠어요.
RGB / CMYK
대표적인 Web 컬러모드 RGB와 인쇄/출력 컬러모드 CMYK
* RGB로 작업된 디자인을 CMYK방식으로 인쇄하면 색이 다르게 표현될 수 있음
HEX Code
RGB 모드의 Red, Green, Blue의 값을 16진법으로 표현하여 6자리의 알파벳과 숫자로 표현한 값
* RGB모드 이용시 R, G, B 값으로 전달하거나 HEX 코드 로 전달
HSB / HSL
Hue(색상), Saturation(채도), Brightness/Value(명도), Lightness/luminance (휘도)
*HSB모델은 HSV(Hue, Saturation, Value) 모델이라고도 한다.
HSB 모델은 컴퓨터 그래픽스(CG)에서 색을 기술하는데 사용되는 색모델의 하나로 각각 색상, 채도, 명도를 의미합니다.
H는 색원상의 색인 색상(hue)를 뜻하는 값으로
0도 적색, 60도 황색, 120도 녹색, 180도 시안(청록색), 240도 청색, 300도에 마젠타(적보라색)를 표현할 수 있습니다.
S는 채도(Saturation)를 뜻하는데 어떤 특정 색상의 색의 양으로 0-100%의 백분율로 나타냅니다.
B는 명도(Brightness)를 뜻하는데, 어떤 색 중 백색의 양으로 0%에 가까워질수록 흑, 100%에 가까워질수록 백을 표현할 수 있습니다.
HSL 모델의 L은 Lightness / Luminance 로 명도/휘도를 의미합니다. HSB/HSV 모델의 명도만 변형된 색모델로 비슷해보이지만 위의 색모델 비교 모형을 통해 보이듯, 다른 그래프 형태를 띕니다. HSL 모델의 밝기(L)는 HSB의 채도와 명도 2가지 요소에 영향을 주기도 하며, '얼마나 빛을 포함하고 있는지'에 대한 측정값으로 광도/휘도 등으로 표현됩니다.
HSL 모델에서 밝기(L)를 50% 이상으로 추가할 경우 색상에 흰색을 추가하는 개념으로 HSB의 채도는 떨어지고 밝기가 높아지는 효과가 있습니다.
HSL 모델에서 밝기(L)를 50% 미만으로 줄이는 경우 색상에 검정을 추가하는 개념으로 HSB의 밝기에만 영향을 미쳐 B값이 감소합니다.
UX/UI 디자이너의 즐겨찾기 2탄! 컬러 추천 사이트 3가지
Color 추천 사이트, 컬러 이해도를 높이고 효과적인 색조합을 찾자!
musigned by musign
디지털 아티스트 컴퍼니 뮤자인
*이미지를 클릭하시면 사이트로 이동됩니다.
PANTONE kr
팬톤의 PMS(Pantone Matching System)는
팬톤은 1,757색 색상표를 사용하여 전 세계 고객의 색상을 개발, 표준화 및 예측한다.
수 년 동안, 섬유, 플라스틱 및 디지털 기술 제조업체를 비록하여 컬러 비판적 요구 사항이 있는
다양한 산업에서 사용하기 위해 팬톤 매칭 시스템(PMS; Pantone Matching System)의 개념을 확장했는데,
그 기술은 1960년대 초 팬톤 창립자인 로렌스 허버트에 의해 도입된다.
인쇄/출판 업계에서 CMYK 색상 코드를 주로 이용하지만,
오차로 인한 실수를 줄이기 위해 '별색'(Pantone/DIC 등)을 이용하기도 한다.
별색 인쇄(Spot Color Printing)를 이용하면 표준화된 색상으로 인쇄가 가능하기 때문에
특히 CI/BI 등을 활용한 브랜드 컬러 인쇄 시에 자주 이용된다.
팬톤은 별색인쇄 시 가장 대표적인 표준색상일 뿐 아니라
팬톤에서 발표하는 올해의 색상은 다양한 디자인의 모티브로 활용되고 있다.
HTML Color Codes
HTML Color Codes는 간단히 컬러 픽커를 활용하여
색상의 HEX code, RGB값, HSL값, CMYK값을 확인할 수 있는 웹사이트다.
HTML Color Codes 사이트 내 color picker 기능을 이용하면
지정한 색상과 어우러지는 색조합과 색조합에 포함된 색상의 코드값까지 확인할 수 있어 유용하다.
Material Design - The color system
Material Design System은 아주 치밀하게 짜여있는 디자인 시스템으로
UX/UI 디자이너라면 통용되는 표준 가이드 시스템을 이해할 필요가 있다.
특히, 머티리얼 디자인은 컬러 뿐 아니라 레이아웃, 네비게이션,
타이포그래피, 사운드, 아이코노그래피, 쉐입 뿐 아니라 인터랙션까지 가이드가 마련되어 있다.
상업적인 디자인을 하는 디자이너라면,
크리에이티브한 감각을 뽐내는 것도 중요하지만
대중적인 표준가이드에 대한 기초를 다지는 것 부터 시작!
오늘 준비한 컬러모드, 색상모델에 대한 이야기 어떠셨나요?
사실 디자인의 분야가 워낙 다양하기 때문에
각 분야마다 자주 사용하는 컬러모드가 각각 다를거라고 생각이 되는데요!
TMI를 알려드리자면 웹/앱 디자인을 하는
뮤자인같은 디지털에이전시의 UX/UI 디자이너들은
RGB/HSB 컬러모드를 활용하여 색을 조절하고,
hex code로 컬러값을 전달하곤 한답니다.
물론 카탈로그, 브로슈어 등 인쇄 기반의 작업을 진행할 때는
CMYK 모드로 처음부터 작업을 하는 것이 매우 중요해요!
알려드린 팬톤, html color codes, 머티리얼 디자인 사이트는
정말 많은 분들의 즐겨찾기에서 제가 핵심만 쏙쏙 뽑아왔답니다 XD
디자인에 관심있는 분들이라면 꼭 한번씩 살펴보시면 좋을 것 같아요!
뮤자인은 또 어떤 소식으로 돌아올까요?
댓글 남겨주세요!
musigned by musign
디지털 아티스트 컴퍼니 뮤자인
가입하기
