입문자가 자주 멈추는 자리
웹 디자인을 시작하면 색상 코드 표기 앞에서 손이 멈춘다. HEX, RGB, HSL, HSLA, CMYK. 어떤 표기를 어디 써야 할지 헷갈린다. 한 번 가이드를 따라가 두면 다음부터 같은 흐름으로 손이 움직인다.
STEP 1: 색상 표기법 4가지
- HEX → 웹 코드 표준 (#FFFFFF)
- RGB → 빛의 삼원색 (255,255,255)
- HSL → 색상·채도·명도 (0,0%,100%)
- CMYK → 인쇄 사원색 (0,0,0,0)
네 가지만 익혀 두면 대부분 작업 자료에 대응 가능.
STEP 2: 매체별 권장 표기
- 웹·앱 → HEX 또는 RGB
- 인쇄물 → CMYK
- 색감 조정 작업 → HSL
- 영상 편집 → RGB
STEP 3: 도구로 변환
한 표기로 받은 색을 다른 표기로 변환할 때 도구 한 번. 색상 변환기에 한 표기를 넣으면 다른 표기가 한 화면에 떠 있다.
STEP 4: 시안 색 추출
포토샵·일러스트·피그마에서 색을 추출하면 보통 HEX 또는 RGB. 추출한 코드를 그대로 도구에 넣어 다른 표기 동시 확보.
STEP 5: 코드 적용
CSS에 적용. background: #FFFFFF; 또는 color: rgb(255,255,255); 형태. 두 표기 모두 같은 결과를 만든다.
STEP 6: 인쇄물 변환
웹 시안을 인쇄물로 옮길 때는 CMYK 변환 필수. 화면 색과 인쇄 색 차이가 있으니 인쇄 검수 단계에서 한 번 더 확인.
STEP 7: 브랜드 컬러 정리
브랜드 메인 컬러 1~3개를 HEX·RGB·CMYK 세 표기로 정리해 두면 모든 매체에 일관 적용 가능. 컬러 변환기로 한 번에 정리해 두면 다음 시안에서 손이 빠르다.
한 번 가이드 거치면 자리 잡힘
처음에는 표기법이 헷갈리지만, 한 번 가이드를 따라가 두면 다음부터는 같은 흐름이 손에 익는다. 색상 변환은 디자인 작업에서 자주 나오는 자리.
마무리
입문자도 한 번 가이드만 거치면 색 표기 앞에서 손이 멈추지 않는다. 한 번 익히면 다음 작업이 자연스럽다.