색상 변환기

사용법

1. 색을 넣거나 색 고르기로 집으면 네 가지 형식이 바로 나옵니다.
2. 버튼이나 배지 색을 정할 때는 명도 대비를 먼저 보세요. 흰 글자와 검은 글자 중 어느 쪽이 읽히는지 알려 줍니다.
3. 밝기 단계를 누르면 그 색으로 바뀝니다. 디자인 시스템의 색 단계를 잡을 때 씁니다.
4. 형식마다 복사 버튼이 있어 CSS에 바로 붙여넣을 수 있습니다.

색 표기법과 명도 대비

자주 묻는 질문

HSL과 HSV는 무엇이 다른가요?

색상(H)과 채도(S)는 같은 뜻이고 세 번째 값이 다릅니다. HSL의 L(명도)은 50%일 때 가장 선명하고 100%면 흰색, 0%면 검은색입니다. HSV의 V(명도)는 100%일 때 가장 선명하고 0%면 검은색이라 흰색이 나오지 않습니다. 색을 밝게·어둡게 단계로 만들 때는 HSL이, 그림 도구에서 색을 고를 때는 HSV가 편합니다.

명도 대비는 얼마나 나와야 하나요?

웹 접근성 지침(WCAG)은 본문 글자에 4.5:1, 큰 글자(18pt 이상 또는 굵은 14pt 이상)에 3:1을 요구합니다. 더 엄격한 AAA 등급은 본문 7:1입니다. 흰 배경에 검은 글자가 최대값인 21:1이고, 회색조가 비슷할수록 1:1에 가까워집니다. 버튼이나 링크 색을 정할 때 이 값을 먼저 확인하면 나중에 접근성 지적을 받지 않습니다.

HEX로 되돌리면 값이 1 정도 달라집니다.

HSL의 색상·채도·명도를 정수로 반올림해 보여주기 때문입니다. #2563eb를 HSL로 바꾸면 hsl(221, 83%, 53%)인데, 이 값을 다시 HEX로 바꾸면 반올림 오차로 #2463eb가 될 수 있습니다. 화면에서 구분되지 않는 차이지만, 정확한 값이 필요하면 HEX나 RGB를 기준으로 삼으세요.

어떤 형식으로 입력할 수 있나요?

#2563eb 같은 여섯 자리, #abc 같은 세 자리 축약, rgb(37, 99, 235), 그냥 37,99,235, hsl(221, 83%, 53%) 모두 인식합니다. 앞의 #은 있어도 없어도 됩니다.

밝기 단계는 어떻게 만들어지나요?

HSL에서 색상과 채도는 그대로 두고 명도(L)만 95%부터 15%까지 바꿉니다. 디자인 시스템의 색 단계를 만들 때 쓰는 가장 단순한 방법입니다. 다만 사람 눈은 색상마다 밝기를 다르게 느껴서, 노랑 계열은 이 방식이 부자연스러울 수 있습니다.

함께 쓰면 좋은 도구