색상 이름 찾기, HEX 하나에 후보가 여러 개인 이유

HEX 코드를 색 이름 찾기 도구에 넣었는데 답이 하나가 아니라 후보가 여러 개 뜬 적 있으실 겁니다. 도구가 헷갈려서가 아니라, CSS가 정한 표준 색상 이름은 148개뿐이고 실제로 존재하는 색은 1,677만 가지가 넘기 때문입니다.

그래서 대부분의 HEX 값은 148개 이름 중 정확히 일치하는 것이 아니라 가장 가까운 것만 가질 수 있습니다. 이 글은 그 148개 이름의 정체와, "가장 가깝다"를 계산하는 방식을 다룹니다.

요약 ① CSS 표준 색상 이름은 148개뿐이라, 나머지 색은 모두 그중 가장 가까운 이름으로만 부를 수 있습니다. ② "가장 가깝다"는 단순히 숫자 차이가 아니라, 사람 눈이 색을 다르게 느끼는 정도를 반영한 redmean 거리로 계산합니다. ③ 정확히 일치하는 이름이 없으면 근접한 후보 3개를 오차 값과 함께 보여줘, 1위가 확실한 답인지 근소한 차이인지 판단할 수 있습니다. ④ 빨강·파랑처럼 자주 쓰는 색만 한글 명칭이 붙고, 나머지는 영문 CSS 이름 그대로 표시됩니다.

문제: 왜 HEX 하나에 이름이 여러 개 뜨는가

디자인 시안에서 받은 #4A90D9 같은 HEX 값을 문서나 티켓에 적어야 하는데, 그냥 "4A90D9색"이라고 쓰면 상대가 바로 감이 오지 않습니다. "코발트블루" 같은 이름이 있으면 훨씬 편합니다.

문제는 이 정확한 값에 딱 맞는 CSS 이름이 없을 수 있다는 점입니다. 웹에서 공식으로 정의된 색상 이름은 aliceblue부터 yellowgreen까지 148개뿐이고, 이건 예전 X11 시스템의 색상 이름을 CSS가 그대로 물려받아 표준화한 고정 목록입니다.

반면 화면이 표현할 수 있는 색은 R·G·B 각 채널이 0~255인 조합으로 256×256×256, 즉 1,677만 7,216가지입니다. 148개 이름은 이 넓은 공간에 찍힌 점 148개에 불과해서, 임의의 HEX 값이 그중 하나와 정확히 겹칠 확률은 매우 낮습니다.

그래서 "이 색 이름이 뭐야?"라는 질문에는 애초에 정답이 하나로 정해지지 않는 경우가 더 많습니다. 있는 건 "가장 가까운 이름"이고, 그 판단 기준(거리를 어떻게 재는가)에 따라 순위가 달라질 수 있습니다.

해결: 148개 이름표와 "가장 가깝다"를 계산하는 법

표준 이름 148개는 정해진 목록입니다

CSS가 인식하는 색상 이름은 새로 추가되거나 유행에 따라 바뀌지 않는 고정된 148개 목록입니다. 각 이름은 하나의 HEX 값에 정확히 대응합니다. 예를 들어 steelblue는 항상 #4682B4이고, royalblue는 항상 #4169E1입니다.

이 목록에 없는 색(대부분의 실제 색)은 이름이 아예 없는 상태입니다. 색 이름 찾기가 하는 일은 그 색에 새 이름을 붙이는 게 아니라, 148개 중 가장 비슷한 것을 찾아 알려주는 것뿐입니다.

"가장 가깝다"는 redmean 거리로 계산합니다

두 색이 얼마나 다른지는 R·G·B 값을 단순히 빼서 더하기만 해서는 사람이 느끼는 차이와 잘 안 맞습니다. 사람 눈은 초록에 더 민감하고, 빨강·파랑에 대한 민감도는 밝기(빨강 값의 평균 수준)에 따라 달라지기 때문입니다.

이런 특성을 반영한 계산식이 redmean입니다. 두 색 (R1,G1,B1)과 (R2,G2,B2)가 있을 때 다음 순서로 계산합니다.

rmean = (R1 + R2) / 2
distance = √[ (2 + rmean/256) × (R1-R2)²
            + 4 × (G1-G2)²
            + (2 + (255-rmean)/256) × (B1-B2)² ]

빨강·파랑 항에는 두 색의 평균 밝기(rmean)에 따라 가중치가 붙고, 초록 항은 고정으로 4배 가중치가 붙습니다. 값이 0이면 완전히 같은 색이고, 클수록 멀리 떨어진 색입니다.

직접 계산해 보기: #4A90D9

#4A90D9를 RGB로 바꾸면 (74, 144, 217)입니다(16진수 두 자리씩 4A=74, 90=144, D9=217). 이 값을 파란 계열 후보 몇 개와 비교해 보겠습니다.

cornflowerblue(#6495ED = 100, 149, 237)와 비교하면 rmean = (74+100)/2 = 87이고, 계산하면 거리 ≈ 52.4가 나옵니다.

steelblue(#4682B4 = 70, 130, 180)와 비교하면 rmean = 72, 거리 ≈ 67.4입니다. royalblue(#4169E1 = 65, 105, 225)와는 rmean = 69.5, 거리 ≈ 80.3입니다.

세 값을 오름차순으로 놓으면 cornflowerblue(52.4) < steelblue(67.4) < royalblue(80.3) 순입니다. 어느 것도 거리 0(정확히 일치)이 아니므로, #4A90D9에는 "공식 이름"이 없고 가장 가까운 이름만 있습니다.

이 계산을 후보 몇 개로 좁혀서 손으로 해볼 수는 있지만, 148개 전체와 비교해 진짜 최솟값을 찾으려면 148번 계산해야 합니다. 저희 도구로 확인하기.

직접 해보기 →

HEX나 RGB를 입력칸에 넣으면(또는 색상 선택기로 고르면) 148개 이름 전체와의 redmean 거리를 계산해 가장 가까운 순서로 3개를 보여줍니다. 1위 옆에는 값이 0일 때만 "정확히 일치", 그렇지 않으면 "가장 근접" 배지가 붙습니다. 이름 옆에 한글 명칭이 있으면 함께 표시되고(빨강·파랑처럼 자주 쓰는 33개 색만 등록돼 있습니다), 이름 오른쪽 복사 버튼을 누르면 그 이름만 복사됩니다.

자주 막히는 지점

세 번째가 특히 헷갈리는 지점입니다. #4A90D9의 1위(cornflowerblue, 52.4)와 2위(steelblue, 67.4)처럼 오차 차이가 20 미만으로 붙어 있으면, 초록에 4배 가중치를 두지 않는 다른 계산식(단순 유클리드 거리 등)에서는 순위가 바뀔 수 있습니다. 1위 배지만 보지 말고 오차 숫자와 2·3위 후보까지 함께 참고하는 편이 안전합니다.

정리

• CSS 표준 색상 이름은 148개뿐이라, 대부분의 실제 색은 그중 가장 가까운 이름만 가질 수 있습니다.
• "가장 가깝다"는 사람 눈의 인지 특성을 반영한 redmean 거리로 계산합니다: rmean=(R1+R2)/2, 빨강·파랑 항은 rmean 가중, 초록 항은 4배 고정입니다.
• 오차 값이 0이면 정확히 일치, 0보다 크면 근접 후보라는 뜻이므로 배지만 보지 말고 숫자를 확인해야 합니다.
• 1·2위 오차 차이가 작으면 다른 계산식에서는 순위가 달라질 수 있어, 상위 3개를 함께 참고하는 편이 안전합니다.
• 자주 쓰는 색만 한글 명칭이 붙고, 나머지는 영문 CSS 이름 그대로 표시됩니다.

자주 묻는 질문

검색하는 곳마다 "가장 가까운 색 이름"이 다르게 나올 수 있나요?

가능합니다. "가깝다"의 기준 자체가 계산식마다 다르기 때문입니다. 이 도구는 사람의 색 인지 특성을 반영한 redmean 거리(초록에 4배 가중치, 빨강·파랑은 평균 밝기에 따라 가중치 조정)를 사용합니다. 두 후보의 오차가 근소하게 붙어 있을 때는 가중치를 다르게 두는 계산식에서 순위가 바뀔 수 있습니다.

오차(error) 숫자는 어떻게 읽어야 하나요?

퍼센트가 아니라 redmean 공식으로 계산된 거리 값 자체입니다. 0이면 148개 이름 중 완전히 같은 색이 있다는 뜻이고, 숫자가 클수록 그 이름과 멀리 떨어진 색이라는 뜻입니다. "오차 몇 이하면 같은 색"이라는 정해진 기준은 없으므로, 절대값보다는 1위와 2·3위의 오차를 서로 비교하는 용도로 보시면 됩니다.

색 이름 옆에 한글이 안 나올 때가 있는데 왜인가요?

빨강·파랑·초록처럼 일상에서 자주 쓰는 색 이름 33개만 한글 명칭이 함께 등록돼 있기 때문입니다. cornflowerblue나 royalblue처럼 CSS에는 있지만 한국어로 굳어진 일상 표현이 딱히 없는 이름은 영문 CSS 이름 그대로만 표시됩니다.