디자이너가 색상을 HEX 코드로 전달했는데 CSS에서 RGB 형식이 필요하다. 반대로 컬러 피커에서 RGB로 뽑았는데 디자인 툴에 HEX를 입력해야 한다. 색상 변환기에 한 형식만 입력하면 나머지가 자동으로 계산된다.
색상 코드 형식의 종류
같은 색상이라도 표현 방식이 여러 가지다. 용도와 환경에 따라 다른 형식을 사용한다.
- HEX: #FF5733 형태. 웹에서 가장 많이 쓰인다. 16진수로 빨강, 초록, 파랑을 표현한다.
- RGB: rgb(255, 87, 51) 형태. 0~255 사이 값으로 빨강, 초록, 파랑 강도를 나타낸다.
- HSL: hsl(14, 100%, 60%) 형태. 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현한다.
- CMYK: cmyk(0, 66, 80, 0) 형태. 인쇄용으로 시안, 마젠타, 옐로, 블랙을 사용한다.
사용 방법
legogo.kr/color-converter에 아무 형식이나 입력한다. HEX 코드를 넣으면 RGB, HSL, CMYK 값이 자동으로 표시된다. RGB를 넣어도 마찬가지로 다른 형식이 모두 계산된다. 색상 미리보기가 함께 표시되어 변환이 정확한지 눈으로 확인할 수 있다.
클릭으로 복사
각 형식 옆에 복사 버튼이 있다. 클릭 한 번으로 클립보드에 복사되어 바로 코드에 붙여넣을 수 있다. css에서 쓸 수 있는 형태로 복사되므로 그대로 사용하면 된다.
컬러 피커
색상 코드를 모르면 컬러 피커에서 직접 색을 선택할 수 있다. 색상환에서 원하는 색을 클릭하면 해당 색의 모든 형식 코드가 표시된다. 명도와 채도를 조절하면서 원하는 색을 찾을 수 있다.
투명도 지원
RGBA, HSLA 같은 투명도가 포함된 형식도 지원한다. rgba(255, 87, 51, 0.5)처럼 네 번째 값이 투명도다. 0이면 완전 투명, 1이면 완전 불투명이다. 오버레이 효과나 반투명 배경에 사용한다.
웹 개발 활용
CSS에서는 HEX, RGB, HSL을 모두 사용할 수 있다. HEX가 짧아서 많이 쓰지만 투명도가 필요하면 RGBA를 쓴다. HSL은 색상을 조금씩 조절할 때 편리하다. 명도만 바꾸면 밝은 버전, 어두운 버전을 쉽게 만들 수 있다.
인쇄와 웹의 차이
웹은 RGB, 인쇄는 CMYK를 사용한다. 화면에서 보이는 색과 인쇄물 색이 다를 수 있다. 특히 선명한 파란색이나 초록색은 인쇄에서 탁해지기 쉽다. 인쇄물을 준비할 때는 CMYK 값을 확인하고 테스트 인쇄를 해보는 것이 좋다.
브랜드 컬러 관리
회사 브랜드 컬러를 여러 형식으로 정리해두면 편리하다. 웹 개발자에게는 HEX, 앱 개발자에게는 RGB, 인쇄 담당자에게는 CMYK를 전달한다. 색상 변환기로 한 번에 모든 형식을 얻을 수 있다.