색상 코드 변환기

색상 코드를 넣으면 HEX·RGB·HSL과 밝기 단계, 글자색 대비를 함께 보여줍니다.

HEX, RGB, HSL은 같은 색의 다른 표기

세 표기법은 모두 같은 색을 가리키지만 다루기 편한 상황이 다릅니다. 어떤 표기를 쓸지는 무엇을 하려는지에 따라 정하면 됩니다.

• HEX — #2563EB처럼 16진수 여섯 자리. 앞에서부터 두 자리씩 빨강·초록·파랑입니다. 짧아서 CSS와 디자인 툴에서 가장 많이 쓰입니다.
• RGB — rgb(37, 99, 235)처럼 0~255 세 값. 투명도를 더한 rgba()로 확장하기 좋습니다.
• HSL — hsl(220, 73%, 53%)처럼 색상(0~360°)·채도(%)·명도(%). 색을 조절할 때 가장 직관적입니다. 같은 색상에서 명도만 바꾸면 자연스러운 밝기 단계가 나옵니다.

글자색은 왜 대비를 따져야 하나요

배경색 위에 글자를 올릴 때 흰 글자가 나은지 검은 글자가 나은지는 감으로 정하기 어렵습니다. 명암비(contrast ratio)라는 계산된 기준이 있습니다.

명암비는 두 색의 상대 휘도를 비교한 값으로 1:1(같은 색)부터 21:1(검정과 흰색)까지 나옵니다. 웹 접근성 지침에서는 아래 기준을 권장합니다.

이 계산기는 입력한 색을 배경으로 봤을 때 흰 글자와 검은 글자 중 어느 쪽의 대비가 높은지, 그 값이 얼마인지 알려줍니다. 4.5 미만이 나오면 본문에는 쓰기 어렵고, 배경색의 명도를 조절하는 편이 좋습니다.

색을 고를 때의 실용적인 기준

브랜드나 화면을 위한 색을 정할 때 참고할 만한 원칙들입니다. 취향의 영역이 크지만, 아래 정도는 대체로 통용됩니다.

• 주색은 하나, 강조색은 하나로 시작하세요. 색이 많아질수록 위계가 무너집니다.
• 회색 계열을 따로 준비하세요. 텍스트·테두리·배경에 쓰는 회색 3~4단계가 있으면 화면이 정돈됩니다.
• 순수한 검정(#000)보다 살짝 밝은 회색이 눈에 편합니다. #111827 같은 값이 자주 쓰입니다.
• 색만으로 정보를 전달하지 마세요. 색각 이상이 있는 사용자에게는 전달되지 않습니다. 아이콘이나 텍스트를 함께 씁니다.
• 다크 모드를 고려한다면 같은 색상의 명도를 뒤집는 것만으로는 부족합니다. 어두운 배경에서는 채도를 조금 낮추는 편이 자연스럽습니다.

입력 형식과 처리 방식

이 도구는 #2563eb, 2563eb, #26e 같은 HEX 표기와 37, 99, 235 형태의 RGB 숫자를 모두 인식합니다. 세 자리 축약형은 각 자리를 두 번 반복한 값으로 해석합니다.

모든 계산은 브라우저 안에서 이뤄지며 입력한 색상값은 저장되거나 전송되지 않습니다. 결과의 밝기 단계는 흰색과 검은색을 섞어 만든 9단계로, 디자인 토큰의 출발점으로 쓸 수 있습니다.

자주 묻는 질문

함께 쓰면 좋은 도구