색상 변환기

색상 형식에 대하여

같은 색상은 HEX(#ff6600), RGB(rgb(255, 102, 0)), HSL(hsl(24, 100%, 50%))로 표기할 수 있습니다. 이는 동일한 색상을 표현하는 세 가지 다른 방식이며, 각각 다른 상황에 적합합니다.

HEX에는 간결한 축약형이 있습니다. #f60 같은 3자리 코드는 각 자릿수를 그냥 두 배로 만들면 6자리 #ff6600과 완전히 같아지며, #ff6600cc 같은 8자리 형식은 rgba()나 hsla()와 같은 방식으로 알파 채널을 추가합니다. 이 도구는 입력으로 축약형을 받아 정규화하지만, 출력은 항상 완전한 6자리나 8자리 형식으로 내놓아 결과를 다른 곳에 붙여넣을 때 모호함이 없도록 합니다. 이 도구가 하지 않는 것이 하나 있습니다. 색상의 접근성 대비를 확인하거나 색각 이상을 시뮬레이션하는 일로, 이는 형식 변환과는 별개의, 그에 못지않게 중요한 디자인 문제입니다.

사용되는 곳

• 디자이너가 제공한 HEX 색상을 코드베이스에서 이미 사용 중인 RGB나 HSL로 변환
• 명도나 채도 조정은 RGB보다 HSL에서 훨씬 직관적으로 다룰 수 있음
• 브라우저의 계산된 스타일에서 색상을 읽어 디자인 명세에 맞게 변환
• 적용하기 전에 CSS 색상 값이 실제로 어떻게 렌더링되는지 확인

자주 묻는 질문

RGB가 이미 있는데 HSL은 왜 존재하나요?
RGB는 색상을 빨강/초록/파랑 빛의 강도로 표현하는데, 이는 사람이 색을 생각하는 방식과 잘 맞지 않습니다. HSL은 색상(Hue), 채도(Saturation), 명도(Lightness)를 분리하므로 "더 어둡게" 또는 "더 선명하게" 같은 조정이 세 값을 다시 계산하는 대신 하나의 숫자만 바꾸면 됩니다.

rgba()/hsla()의 알파 값은 무엇을 의미하나요?
불투명도를 의미하며 0(완전히 투명)부터 1(완전히 불투명)까지의 값입니다. 입력에 알파 값이 포함되어 있으면 이 도구는 8자리 HEX를 포함한 모든 형식에서 이를 그대로 유지합니다.

"tomato"와 같은 CSS 색상 이름도 지원하나요?
아직 지원하지 않습니다. HEX, RGB(A), HSL(A) 입력만 지원합니다. 색상 이름에서 시작한다면 먼저 해당 색상의 HEX 값을 찾아보세요.

#f60은 #ff6600과 같은 색인가요?
네, 정확히 같습니다. 3자리 HEX 축약형은 각 자릿수를 두 배로 만들어 완전한 형태를 얻습니다. f는 ff가 되고, 6은 66이 되고, 0은 00이 됩니다. 이는 특정 색(각 채널이 우연히 같은 자릿수를 반복하는 경우)을 더 짧게 쓰는 방법일 뿐이며, 다른 색 공간이나 더 낮은 정밀도를 의미하지 않습니다. 이 도구는 두 길이를 모두 받아들이며 항상 완전한 6자리나 8자리 형식을 출력합니다.