디자이너가 피그마에서 색상 코드를 보내줬다. #3B82F6이라고. 근데 내가 쓰는 툴에서는 RGB로 넣어야 한다. HEX를 RGB로 어떻게 바꾸지?
HEX랑 RGB가 뭔지부터
둘 다 색상을 표현하는 방식이다. HEX는 16진수로 #RRGGBB 형태, RGB는 빨강/초록/파랑 값을 0~255로 표현한다. #3B82F6은 RGB(59, 130, 246)과 같은 색이다.
색상 변환기에 HEX 코드 넣으면 RGB 값이 바로 나온다. 수동으로 16진수 계산할 필요 없이 복사해서 붙여넣기만 하면 된다.
HEX to RGB 변환
HEX to RGB 변환은 간단하다. #3B82F6을 넣으면:
- R: 3B (16진수) = 59 (10진수)
- G: 82 (16진수) = 130 (10진수)
- B: F6 (16진수) = 246 (10진수)
계산기가 이걸 자동으로 해준다. 반대로 RGB to HEX 변환도 된다. RGB(59, 130, 246) 넣으면 #3B82F6이 나온다.
HSL, CMYK도 변환된다
웹에서는 HEX나 RGB를 주로 쓰지만, 다른 형식도 있다. HSL 변환은 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현한다. CSS에서 색상 조절할 때 HSL이 더 직관적인 경우가 있다.
CMYK 변환은 인쇄용이다. 청록(Cyan), 자홍(Magenta), 노랑(Yellow), 검정(Key)의 조합. 웹 디자인을 인쇄물로 옮길 때 CMYK 값이 필요하다.
컬러 피커로 직접 고르기
색상 코드를 모르면 컬러 피커로 직접 색을 고를 수 있다. 클릭하면 색상환이 뜨고, 원하는 색 선택하면 HEX, RGB, HSL, CMYK 값이 다 나온다.
슬라이더로 미세 조정도 가능하다. R값만 조금 올리거나 채도만 낮추거나.
보색, 유사색 찾기
메인 색상 정했는데 어울리는 다른 색을 모르겠을 때. 색상 조화 기능으로 보색, 유사색, 트라이어드(삼각 배색)를 자동으로 제안받을 수 있다.
보색 찾기는 색상환에서 정반대 위치의 색을 알려준다. 파란색의 보색은 주황색. 강조색으로 쓰기 좋다.
팔레트 자동 생성
하나의 색상에서 밝은 버전부터 어두운 버전까지 10단계 컬러 팔레트를 자동 생성해준다. 디자인 시스템에서 primary-100, primary-200 이런 식으로 색상 변형이 필요할 때 유용하다.
히스토리 기능으로 최근 사용한 20개 색상도 저장된다. 자주 쓰는 색상을 다시 찾을 필요 없이 클릭하면 된다.
CSS에 바로 복사
변환된 색상 코드를 클릭하면 클립보드에 복사된다. CSS 파일에 바로 붙여넣기 가능하다. 웹 색상 코드나 CSS 색상 형식으로 나오니까 추가 변환 없이 바로 쓸 수 있다.
정리
디자이너가 HEX로 보내든, RGB로 보내든 컬러 코드 변환 한 번이면 필요한 형식으로 바꿀 수 있다. 보색이나 팔레트 찾을 때도 유용하다.