색상 변환기 사용법 - HEX RGB HSL CMYK 색상 코드 변환 방법
HEX RGB HSL CMYK 색상 코드의 차이와 색상 변환기 사용법을 정리합니다
색상 코드의 종류와 차이
디자인이나 웹 작업을 하다 보면 색상을 숫자로 표현해야 하는 상황이 생깁니다. '빨간색'이라고 말해도 사람마다 떠올리는 빨간색이 다릅니다. 그래서 색상을 정확하게 지정하기 위해 코드 체계를 사용합니다.
문제는 색상 코드 형식이 여러 가지라는 것입니다. 웹에서는 HEX를 쓰고, 디자인 프로그램에서는 RGB를 쓰고, 인쇄소에서는 CMYK를 씁니다. 같은 빨간색인데 표기 방식이 달라서 변환이 필요합니다.
| 형식 | 표기 예시 | 주요 사용처 | 특징 |
|---|---|---|---|
| HEX | #FF5733 | 웹사이트, CSS | 16진수 6자리 |
| RGB | rgb(255, 87, 51) | 디자인 프로그램, 모니터 | 빨강/초록/파랑 0~255 |
| HSL | hsl(11, 100%, 60%) | CSS, 색상 조절 | 색상/채도/명도 |
| CMYK | 0, 66, 80, 0 | 인쇄, 출판 | 잉크 비율 기반 |
웹 개발자가 디자이너에게 받은 RGB 값을 CSS에 넣으려면 HEX로 바꿔야 합니다. 인쇄 업체에 로고 파일을 보내려면 RGB를 CMYK로 변환해야 합니다. 이런 변환이 실무에서 수시로 발생합니다.
HEX와 RGB 코드 이해하기
가장 많이 쓰이는 HEX와 RGB의 구조를 알면 색상 코드가 어렵지 않습니다.
| 구분 | HEX | RGB |
|---|---|---|
| 구조 | #RRGGBB | R(0~255), G(0~255), B(0~255) |
| 빨간색 | #FF0000 | rgb(255, 0, 0) |
| 초록색 | #00FF00 | rgb(0, 255, 0) |
| 파란색 | #0000FF | rgb(0, 0, 255) |
| 검은색 | #000000 | rgb(0, 0, 0) |
| 흰색 | #FFFFFF | rgb(255, 255, 255) |
- HEX 코드 - #기호 뒤에 6자리 16진수가 옵니다. 앞 2자리가 빨강, 가운데 2자리가 초록, 마지막 2자리가 파랑입니다. FF는 255(최대), 00은 0(없음)을 의미합니다. 웹 개발에서 가장 보편적으로 쓰입니다
- RGB 코드 - 빨강, 초록, 파랑 각각의 밝기를 0부터 255까지 숫자로 표현합니다. 세 색을 모두 최대(255)로 하면 흰색, 모두 0으로 하면 검은색입니다. 포토샵, 피그마 같은 디자인 도구에서 기본으로 사용합니다
- HSL 코드 - 색상(Hue, 0~360도), 채도(Saturation, 0~100%), 명도(Lightness, 0~100%)로 표현합니다. 사람이 색을 인식하는 방식과 비슷해서 '이 색을 좀 더 밝게' 같은 조절이 직관적입니다
HEX와 RGB는 같은 색을 다른 방식으로 쓴 것입니다. #FF5733에서 FF는 10진수로 255(빨강), 57은 87(초록), 33은 51(파랑)입니다. 변환 공식을 외울 필요 없이 변환기를 쓰면 됩니다.
색상 변환기 사용법
색상 변환기에 접속하면 하나의 색상 코드를 입력했을 때 HEX, RGB, HSL, CMYK 네 가지 형식으로 동시에 변환됩니다.
| 기능 | 설명 | 활용 예시 |
|---|---|---|
| 코드 변환 | HEX/RGB/HSL/CMYK 상호 변환 | 디자인 파일 색상을 CSS 코드로 |
| 컬러 피커 | 마우스로 색상 직접 선택 | 원하는 색을 눈으로 찾을 때 |
| 색상 조화 | 보색, 유사색, 삼각색 자동 생성 | 배색 조합 찾기 |
| 팔레트 생성 | 밝기 10단계 자동 생성 | 메인 색상에서 변형 색상 추출 |
| 히스토리 | 최근 20개 색상 기록 | 작업 중 이전 색상 다시 확인 |
HEX 코드를 입력하면 RGB, HSL, CMYK 값이 실시간으로 표시됩니다. 반대로 RGB 값을 입력해도 나머지 형식이 자동 변환됩니다. 각 코드 옆에 복사 버튼이 있어서 원하는 형식을 클릭 한 번으로 가져갈 수 있습니다.
컬러 피커가 특히 편리합니다. 정확한 코드를 모르고 '이런 느낌의 파란색'을 원할 때, 컬러 피커에서 마우스로 색상을 선택하면 즉시 모든 형식의 코드를 얻을 수 있습니다.
색상 조화와 팔레트 활용
색 하나만 정하면 나머지 배색이 막막합니다. 색상 조화 이론을 알면 조합이 쉬워집니다.
| 조화 유형 | 구성 | 느낌 | 사용 예시 |
|---|---|---|---|
| 보색 | 색상환 반대편 색 | 강렬한 대비 | CTA 버튼, 강조 요소 |
| 유사색 | 색상환 인접 색 | 부드럽고 자연스러움 | 전체 톤 통일 |
| 삼각색 | 색상환 120도 간격 3색 | 균형 잡힌 다채로움 | 인포그래픽, 차트 |
| 단색 팔레트 | 같은 색의 밝기 변형 | 깔끔하고 세련됨 | 미니멀 디자인 |
- 보색 활용 - 파란색 배경에 주황색 버튼을 놓으면 버튼이 눈에 확 들어옵니다. 보색은 대비가 강해서 클릭을 유도하는 CTA(Call to Action) 버튼에 효과적입니다
- 유사색 활용 - 파란색 메인에 청록색, 남색을 함께 쓰면 전체적으로 차분하고 통일감 있는 디자인이 됩니다. 기업 홈페이지나 포트폴리오에 많이 쓰입니다
- 단색 팔레트 - 메인 색상 하나에서 밝기만 조절해서 배경, 텍스트, 테두리 등을 구성합니다. 색 조합에 자신 없으면 단색 팔레트가 가장 안전합니다
실무에서 색상 코드 활용하기
직업이나 상황에 따라 필요한 색상 형식이 다릅니다.
| 작업 | 필요한 형식 | 이유 | 주의사항 |
|---|---|---|---|
| 웹 개발 | HEX 또는 RGB | CSS에서 사용 | 투명도 필요 시 RGBA 사용 |
| 앱 개발 | HEX 또는 RGB | 개발 프레임워크 호환 | 플랫폼별 표기 확인 |
| 그래픽 디자인 | RGB (화면용) | 포토샵, 일러스트레이터 | 인쇄 시 CMYK 변환 필요 |
| 인쇄물 제작 | CMYK | 인쇄기가 CMYK로 출력 | RGB→CMYK 변환 시 색 차이 발생 |
| PPT 디자인 | RGB 또는 HEX | 파워포인트 색상 설정 | 사용자 지정 색에서 입력 |
| 브랜드 가이드 | 전부 | 모든 매체에서 일관성 | HEX, RGB, CMYK 모두 명시 |
브랜드 가이드라인을 만들 때는 모든 형식의 색상 코드를 명시해야 합니다. 웹 담당자는 HEX를, 디자이너는 RGB를, 인쇄 업체는 CMYK를 사용하기 때문입니다. 하나의 메인 색상에서 모든 형식을 한 번에 변환해두면 일관된 브랜드 색상을 유지할 수 있습니다.
파워포인트에서 특정 색상을 쓰고 싶으면 '도형 서식 > 색 > 사용자 지정 색'에서 HEX 또는 RGB 값을 직접 입력하면 됩니다. 기본 색상 팔레트에 원하는 색이 없을 때 유용합니다.
