색상 변환기
컬러 피커로 색상을 선택하거나 코드를 직접 입력해 HEX · RGB · HSL · HSV를 즉시 변환합니다. 보색, 유사색, 삼각 배색 팔레트도 자동으로 생성됩니다.
HEX
RGB
HSL
HSV
배색 팔레트
보색 (Complementary)
유사색 (Analogous)
삼각 배색 (Triadic)
색상 칩을 클릭하면 HEX 코드가 복사됩니다.
색상 코드 안내
색상 코드를 실제 작업에 쓰기 전 볼 기준
코드 변환 자체보다 더 중요한 것은 어떤 모델을 쓰는지와 실제 화면에서 어떻게 보이는지입니다. 아래 기준을 같이 보면 실무 적용이 쉬워집니다.
HEX, RGB, HSL은 같은 색의 다른 표현입니다
표기 방식이 다를 뿐 실제 색상은 동일할 수 있습니다. 개발자는 HEX와 RGB를, 디자이너는 HSL을 선호하는 경우가 많아 작업자 간 기준을 맞출 때 변환기가 유용합니다.
HSL과 HSV는 비슷해 보여도 쓰임이 다릅니다
HSL은 밝기 감각이 직관적이라 UI 디자인에서 자주 쓰이고, HSV는 그래픽 툴에서 색조와 채도를 다룰 때 익숙합니다. 같은 숫자처럼 보여도 서로 완전히 같은 모델은 아닙니다.
투명도와 대비는 별도로 봐야 합니다
색상 코드만 맞춰도 실제 화면에서는 배경과 섞이면서 체감이 달라질 수 있습니다. 알파값과 대비 비율을 같이 봐야 접근성과 가독성을 제대로 판단할 수 있습니다.
디스플레이 환경에 따라 색이 달라 보일 수 있습니다
같은 코드라도 모니터 프로파일, 밝기, 운영체제 색 관리에 따라 체감 색이 조금씩 달라질 수 있습니다. 최종 시안은 실제 사용 환경에서 다시 확인하는 편이 좋습니다.
자주 묻는 질문
HEX와 RGB 관계, HSL과 HSV 차이, 투명도, 모니터별 차이처럼 자주 묻는 질문을 FAQ로 정리했습니다.
HEX와 RGB는 어떻게 연결되나요?
HEX는 빨강, 초록, 파랑 채널 값을 16진수로 표현한 형식이고, RGB는 같은 값을 10진수로 표현한 형식입니다. 예를 들어 #FF0000은 RGB(255, 0, 0)과 같은 빨간색입니다.
HSL과 HSV는 무엇이 다른가요?
둘 다 색조를 기준으로 하지만 HSL은 명도 개념을, HSV는 값 또는 밝기 개념을 사용합니다. 그래서 같은 색조와 채도 숫자를 넣어도 시각적으로 다른 결과가 나올 수 있습니다.
HEX 코드에 투명도를 넣을 수 있나요?
가능합니다. #RRGGBBAA 형식처럼 뒤에 알파값을 붙여 투명도를 표현할 수 있습니다. 다만 사용하는 브라우저나 환경이 8자리 HEX를 지원하는지 확인하는 것이 좋습니다.
같은 색 코드인데 모니터마다 왜 다르게 보이나요?
디스플레이 밝기, 색역, 캘리브레이션 상태, 운영체제 색 관리 차이 때문입니다. 코드가 같아도 출력 환경이 다르면 체감 색은 충분히 달라질 수 있습니다.
보색과 유사색은 언제 쓰면 좋나요?
보색은 강한 대비와 시선 집중이 필요할 때, 유사색은 안정적이고 자연스러운 화면 분위기를 만들 때 자주 사용됩니다. 목적에 따라 팔레트를 선택하는 편이 좋습니다.
관련 도구
색상을 실제 아이콘, 이미지, QR 코드 자산으로 확장할 때 함께 쓰기 좋은 도구들입니다.