색 표기가 들어가는 자리
색은 한 가지 자리에만 머물지 않는다. 매체와 도구에 따라 자리를 옮기며 다른 표기로 적힌다. 자주 마주치는 8가지 자리.
1. CSS 스타일시트
HEX·RGB·HSL 모두 지원. color: #FFFFFF; background: rgb(255,255,255);. 가독성 측면에서 HEX 자주 사용.
2. HTML 인라인 스타일
같은 표기 지원. style="color:#FF0000". 코드 안에 직접 색이 들어가는 자리.
3. 디자인 도구 컬러 패널
포토샵·일러스트·피그마. HEX·RGB·HSB·CMYK 동시 표시. 도구 안에서 색 결정.
4. SVG 코드
fill="#FF0000" 또는 fill="rgb(255,0,0)". CSS와 같은 표기 지원. 색 이름(red, blue) 표기도 가능.
5. 모바일 앱 코드
- iOS Swift → UIColor(red:, green:, blue:, alpha:) (0~1 범위)
- Android XML → #AARRGGBB (알파 포함 8자리)
- Flutter → Color(0xFFRRGGBB)
모바일 OS마다 색 표기 형식이 다르다. 변환 한 번 거쳐야 한다. 색상 변환기로 HEX 추출 후 OS별 형식으로 변형하는 흐름이 무난.
6. 인쇄물 디자인
CMYK 또는 Pantone. 화면 시안의 HEX를 CMYK로 변환해 시안 작성. 인쇄소 전달 단계에서 다시 한 번 검수.
7. 영상 편집 도구
프리미어·다빈치 리졸브. RGB 자주 사용. 영상 내부 색 보정 단계에서 RGB 채널 직접 조정.
8. 데이터 시각화 도구
차트·그래프 도구. HEX·RGB 모두 지원. 데이터 카테고리별 다른 색 적용 시 변환 도구로 색 일관성 확보.
자리별 권장 표기
- 웹·앱 → HEX·RGB
- 인쇄 → CMYK·Pantone
- 영상 → RGB
- iOS → 0~1 범위 RGB
- Android → 8자리 HEX
여덟 자리에 같은 색을 적용하려면 자리마다 표기 변환이 필요. 컬러 코드 변환 도구를 즐겨찾기에 두면 자리 사이 변환 부담이 작다.
마무리
색은 자리를 옮기며 표기를 바꾼다. 자리별 권장 표기를 인식해 두면 다음 작업이 부드러워진다.