🎨 실무 색상 코드 변환기

컬러 피커

HEX

RGB

HSL

💡 클릭 한번으로 모든 코드를 복사하세요.

🤔 색상 코드 변환기 관련 Q&A

HEX 코드와 RGB 코드는 어떤 차이가 있나요?

HEX 코드는 16진수로 색상을 표현하는 방식으로, 웹(HTML/CSS) 디자인에서 가장 보편적으로 사용됩니다. (예: #533483)
RGB 코드는 빛의 3원색인 Red, Green, Blue를 각각 0~255의 숫자로 나타내어 화면에 출력하는 방식입니다. 사진 보정, 모니터 출력 등에 주로 사용됩니다.

HSL은 언제 주로 사용하나요?

HSL (Hue, Saturation, Lightness)는 '색상, 채도, 명도'로 구성된 단위입니다.
직관적으로 명도나 채도를 증감시키기 편해, 웹 접근성(대비)을 조절하거나 다크 모드용 컬러 팔레트를 만들 때 효율적으로 활용됩니다.

관련 색상의 '보색'이란 무엇인가요?

보색(Complementary Color)은 색상환에서 서로 마주보고 있는 반대되는 색을 말합니다.
디자인에서 강렬한 대비를 주고 싶을 때나, 핵심 버튼(CTA)의 컬러를 선정할 때 보색이나 유사색을 참고하면 조화로운 배색이 가능합니다.

디자인 시안과 웹 문서의 색상값 맞추기

업무 예시: 디자이너가 전달한 HEX 값을 RGB로 바꾸거나, 프레젠테이션과 웹 스타일에 쓰인 RGB 값을 HSL로 확인할 때 사용합니다. 보색과 유사색은 배너·버튼 후보를 탐색하는 참고값이며 브랜드 팔레트를 자동으로 보장하지 않습니다.

해석 기준: 같은 코드라도 모니터의 색 영역, 밝기, 브라우저와 출력 장비에 따라 실제 보이는 색은 달라질 수 있습니다. 인쇄물은 RGB가 아닌 CMYK와 별색 기준이 필요하므로 인쇄소의 교정본을 우선하세요.

데이터 처리: 입력한 색상 코드는 서버에 업로드하지 않고 현재 브라우저에서 변환합니다. 복사한 값은 붙여넣을 대상의 알파 채널 지원 여부와 CSS 문법을 확인한 뒤 사용하세요.