팁 & 트릭

HEX 색상 코드를 RGB로 바꾸는 방법 정리

색상 코드가 뭔가요

웹사이트나 디자인 작업을 하는데 색상을 코드로 표현합니다. FF0000이 빨간색이라는데 무슨 의미인지 모르겠습니다. HEX랑 RGB가 뭐가 다른 건가요. 색상 코드의 원리를 쉽게 설명해드릴게요.

RGB란

빨강 초록 파랑의 영어 약자입니다. 세 가지 색을 섞어서 모든 색을 만듭니다. 각각 0에서 255까지 값을 가집니다. RGB(255, 0, 0)은 빨강만 최대값이라 빨간색입니다. 세 값이 모두 255면 흰색이고 0이면 검정색입니다.

HEX 코드란

RGB를 16진수로 표현한 겁니다. #FF0000이 빨간색입니다. FF는 10진수로 255입니다. 앞 두 자리가 빨강 중간이 초록 마지막이 파랑입니다. 웹에서 색상을 지정할 때 주로 씁니다.

변환 방법

RGB를 HEX로 바꾸려면 각 값을 16진수로 변환합니다. 255는 FF, 128은 80, 0은 00입니다. 직접 계산하면 번거로우니 HEX to RGB를 쓰세요. HEX를 입력하면 RGB로 바꿔주기도 합니다.

색상 선택 팁

디자인할 때 색상 조화가 중요합니다. 보색을 쓰면 강한 대비가 됩니다. 유사색을 쓰면 부드러운 느낌입니다. 색상 팔레트 생성 사이트를 활용하면 좋습니다. Coolors나 Adobe Color가 유명합니다.

투명도 추가

RGBA는 투명도가 추가된 형식입니다. 마지막 값이 0에서 1 사이입니다. 0은 완전 투명 1은 불투명입니다. HEX에서도 8자리로 투명도를 추가할 수 있습니다. CSS에서 반투명 효과를 줄 때 씁니다.

실무에서

디자이너와 개발자가 색상을 공유할 때 코드로 전달합니다. 정확히 같은 색을 쓸 수 있습니다. 브랜드 가이드에도 색상 코드가 명시됩니다. 비밀번호 생성기처럼 온라인 유틸리티들을 활용하면 작업 효율이 높아집니다.