🎨 실무 색상 코드 변환기

컬러 피커

HEX

RGB

HSL

#RGB·#RGBA·#RRGGBBAA, rgba(83, 52, 131, 0.5), CSS 최신 문법 rgb(83 52 131 / 50%), 쉼표 없이 띄어 쓴 83 52 131도 읽습니다. HSL은 HEX로 되돌려도 값이 바뀌지 않도록 필요한 경우 소수점 한 자리까지 표시합니다.

비교할 글자색

💡 전체 복사는 HEX·RGB·HSL을 한 번에 복사합니다.

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

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

두 표기는 같은 sRGB 색을 서로 다른 진법으로 적은 것입니다. HEX #533483은 빨강 0x53(83), 초록 0x34(52), 파랑 0x83(131)을 16진수 두 자리씩 이어 쓴 것이고, RGB rgb(83, 52, 131)은 같은 값을 10진수로 적은 것입니다. 그래서 둘 사이를 변환해도 색은 전혀 바뀌지 않습니다. CSS, Figma 같은 디자인 도구, 오피스 프로그램 대부분이 두 형식을 모두 지원하므로 붙여넣을 곳이 요구하는 표기에 맞추면 됩니다. 세 자리 #53A는 각 자리를 두 번 쓴 줄임 표기로 #5533AA와 같습니다.

투명도(알파)가 있는 색은 어떻게 입력하나요?

여덟 자리 HEX #53348380의 마지막 두 자리, rgba(83, 52, 131, 0.5), CSS 최신 문법 rgb(83 52 131 / 50%) 가운데 편한 형식으로 입력하면 됩니다. 알파 80은 16진수 128이므로 128/255 ≈ 0.5입니다. 결과는 호환성이 가장 넓은 쉼표 표기(rgba, hsla)로 보여 줍니다. 투명한 색은 뒤에 깔린 배경에 따라 실제 모습이 달라지므로 미리보기의 체크무늬를 참고하고, 명암비는 투명도를 뺀 불투명 색 기준으로 계산된다는 점에 유의하세요.

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

HSL(Hue 색상, Saturation 채도, Lightness 밝기)은 같은 색상에서 밝기나 채도만 조절하기 쉬워 버튼의 호버 색, 비활성 색, 다크 모드 팔레트를 만들 때 편리합니다. 다만 HSL의 밝기는 사람이 느끼는 밝기와 다릅니다. 같은 50%라도 노란색은 파란색보다 훨씬 밝게 보이므로 글자 대비는 HSL 값이 아니라 WCAG 명암비로 확인해야 합니다. 또한 HSL을 정수로 반올림하면 HEX로 되돌렸을 때 채널 값이 1~5만큼 어긋날 수 있어, 이 도구는 필요한 경우 소수점 한 자리까지 표시합니다.

WCAG 명암비 기준은 어떻게 판단하나요?

웹 콘텐츠 접근성 지침(WCAG 2.x)은 본문 글자에 4.5:1 이상(AA), 18pt(약 24px) 이상이거나 14pt(약 18.7px) 이상 굵은 큰 글자에 3:1 이상(AA)을 요구합니다. 더 엄격한 AAA 기준은 각각 7:1과 4.5:1이며, 버튼 테두리·아이콘 같은 UI 요소는 3:1 이상이 기준입니다. 명암비는 두 색의 상대 휘도로 계산하며, 이 도구는 기준을 넘긴 것처럼 보이지 않도록 소수점 셋째 자리에서 버림해 표시합니다. 흰색·검정 글자가 모두 기준에 못 미치면 '밝게'·'어둡게' 후보를 눌러 배경색을 조정해 보세요.

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

보색(Complementary Color)은 색상환에서 서로 마주보는 반대 색으로, HSL 색상 값에 180°를 더해 구합니다. 유사색은 ±30°만큼 떨어진 이웃 색입니다. 강한 대비가 필요한 강조 요소나 조화로운 보조색 후보를 찾을 때 참고할 수 있지만, 브랜드 팔레트나 명암비를 자동으로 보장하지는 않습니다. 회색·흰색·검정 같은 무채색은 색상 값이 없어 보색과 유사색이 원래 색과 같으므로 선택할 수 없게 표시하고, 이미 가장 밝거나 어두운 색도 '밝게'·'어둡게' 후보를 비활성화합니다.

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

업무 예시: 디자이너가 전달한 HEX 값을 RGB로 바꾸거나, Figma에서 복사한 rgba() 값을 CSS용 HEX로 옮길 때 사용합니다. 버튼·배너 배경색을 정할 때는 명암비 영역에서 흰색·검정 글자와의 대비를 함께 확인하세요. 보색과 유사색은 후보를 탐색하는 참고값이며 브랜드 팔레트를 자동으로 보장하지 않습니다.

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

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