🐨CoalaCoding
DocsExamplesTry itBoardB반B반
🐨CoalaCoding

개발자를 위한 한국어 웹 기술 문서

문서

  • JavaScript
  • Web Publishing
  • React
  • Python

커뮤니티

  • 게시판
  • 예제 모음
  • Try it 에디터

기타

  • GitHub
  • 관리자
© 2026 CoalaCoding. All rights reserved.
  • topBtn
  • rollingBanner
  • menu
  • stickyMenu
  • accordion
  • swiper
  • activeMenu
  • slide
  • tab
  • scrollEffect
  • ajax
  • tabSlide
  • adaption
  • 좋은-디자인을-위한-요소
  • 논리적vs물리적해상도
  • 게슈탈트이론
  • 색채심리학
  • 황금비율
  • 컬러모드
  • 디자인실무용어
  • 이미지파일의특징
  • 폰트와사이즈
  • 레이아웃기초
  • 10가지법칙
  • 아이트래킹
  • 색상을성공적으로고르는방법
  • 타이포그래피10가지팁
  • 스타일가이드만들기
  • 모바일디자인버튼
  • 조형요소
  • 6가지비주얼체계규칙
  • 아이콘디자인이론
  • 해상도와그리드시스템
  • 피그마란
  • 작업환경세팅
  • 인터페이스예제
  • 기능심화
  • 인터페이스설계
  1. 홈
  2. 문서
  3. HTML & CSS
  4. UI 컴포넌트
  5. 컬러모드

컬러모드

RGB, CMYK, HSB 등 색상모드의 원리와 차이점을 알아봅니다

코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.

구문

색상모드

컬러모드란? 색상채널 기반으로 색들이 결합되는 방식. 지면출력용: CMYK 화면출력용: RGB


1. RGB (가산혼합)

빛의 3원색인 빨강(Red), 초록(Green), 파랑(Blue)의 약자입니다.

빨강 : rgb(255,0,0) hex: #ff0000

'빛(Light)'의 속성을 그대로 지니고 있기 때문에 혼합하면 할수록 빛이 많아져 명도가 높아지고 색상이 밝아집니다.

주로 컴퓨터 모니터나 텔레비전, 휴대폰 액정과 같은 '빛으로 표현되는 색상'을 나타낼 때 사용됩니다.

RGB 가산혼합


2. CMYK (감산혼합)

청록색(Cyan, 사이안), 자홍색(Magenta, 마젠타), 노란색(Yellow), 검정색(blacK)의 약자입니다.

빨강 CMYK (0,100,100,0)

CMYK 컬러는 잉크에 기초한 색상 구현 원리를 따르기 때문에 색을 더할수록 명도가 낮아지고 어두워집니다. 색을 혼합할 수록 빛의 양이 줄어 들기 때문이죠.

CMYK는 RGB보다 나타낼 수 있는 색상 영역이 적지만, 인쇄 출력물 등 잉크로 표현되는 모든 결과물은 CMYK 모드를 따르므로 잘 알아둘 필요가 있습니다.

컴퓨터 모니터상에서 확인한 컬러가 실제 인쇄했을 때 나온 컬러와는 차이가 있는 경우가 많기 때문에, 포스터, 브로슈어, 팜플렛, 포트폴리오와 같은 인쇄물을 염두에 둔 작품이라면 반드시 CMYK 모드 설정을 익혀야 합니다.

CMYK 감산혼합


3. HSB / HSL / HSV

HSB는 Hue(색조) - Saturation(채도) - Brightness(밝기)의 약자로 색상을 설명하는 훨씬 인간 친화적인 방식입니다.

빨강 hsb(360,100,100)

  1. Hue : 색조 0~360도
  2. Saturation : 채도 0%~100%
  3. Brightness : 명도 0%~100%

HSB 색상모델

목차

  • 구문