색상 이름 찾기이란?
아무 HEX, RGB, HSL 값이나 입력하면 1,500개가 넘는 이름이 담긴 데이터베이스에서 가장 가까운 명명된 색상을 찾아줍니다. 색상 코드를 소리 내어 말할 수 있는 이름으로 바꿔 주기 때문에 디자인 문서를 쓰거나 동료와 색 조합을 이야기할 때 편리합니다.
색상 이름 데이터는 오픈소스 color-name-list에서 가져옵니다. Figma 플러그인이나 Tailwind 확장도 같은 데이터를 참고합니다. HEX 값을 입력하거나, 입력을 RGB나 HSL로 바꿔 채널을 직접 적거나, 색상 선택기로 골라도 됩니다. 도구는 RGB 유클리드 거리로 가장 가까운 이름을 찾아 HEX, RGB, HSL, HSV, CMYK로 보여 주고, 대체 이름 두 개와 유사도 점수, WCAG 대비 검사까지 함께 제시하기 때문에 거의 일치인지 대충 비슷한지 한눈에 구분할 수 있습니다.
사용 방법
- 1단계 — HEX 형식으로 색상 값을 입력하거나 (예: #3B82F6), 입력을 RGB나 HSL로 바꿔 채널을 직접 적거나, 색상 선택기로 시각적으로 선택하세요.
- 2단계 — 도구가 즉시 가장 가까운 명명된 색상과 정확한 일치 거리를 함께 찾아냅니다.
- 3단계 — 색상 이름, 정확한 HEX 값, 입력한 색상과 명명된 색상 간의 시각적 비교를 확인하세요.
사용 시기
- 스타일 가이드나 컴포넌트 라이브러리에 등록하기 전에 브랜드 색상에 정식 이름을 붙일 때.
- 스크린샷에서 따온 색을 개발자가 이름으로 검색할 수 있는 표준색으로 바꿀 때.
- 페인트나 원단 샘플을 익숙한 웹 팔레트와 대조해 명칭을 확인할 때.
결과
개발자가 #4A90D9를 입력하면 가장 가까운 색상이 "Steel Blue"(#4682B4)이며 유사도는 96.2%입니다.
자주 묻는 질문
- 색상 이름은 어디에서 가져오나요?
- 오픈소스 프로젝트 color-name-list입니다. 약 1,500개의 이름이 들어 있고 xkcd 색상 설문, 페인트 제조사 카탈로그, CSS 사양에서 수집되었습니다. 많은 디자인 도구가 같은 데이터를 쓰므로 익숙한 이름이 자주 나옵니다.
- 왜 어떤 색은 유사도가 100%에 닿지 못하나요?
- 리스트의 항목과 정확히 일치하는 색만 100%를 받습니다. 그 외에는 RGB 거리로 가장 가까운 색을 골라 줍니다. 95%를 넘으면 눈으로는 구분이 안 가고, 85% 아래로 떨어지면 이름과 실제 색의 차이가 분명히 보입니다.
- RGB 거리인가요, 지각 거리인가요?
- RGB 유클리드 거리입니다. 빠르고 대부분의 웹 색상에 적합합니다. 다만 채도가 높은 빨강과 초록에서는 사람의 눈이 RGB 모델보다 더 예민해서 약간 어긋난 이름이 선택될 수 있습니다.
- HSL이나 RGB, HEX를 바로 입력할 수 있나요?
- 네 — 세 가지 모두 내장되어 있습니다. 입력 탭을 HEX, RGB, HSL로 바꿔 값을 입력하거나 색상 선택기로 고르면 됩니다. 결과 카드에는 일치한 색이 HSL, HSV, CMYK로도 표시되어 필요한 형식을 그대로 복사할 수 있습니다.
- 서로 많이 다른 HEX 값이 같은 이름으로 나오는 이유가 뭔가요?
- 리스트는 일부 영역, 특히 채도가 낮은 중간색이나 파스텔 핑크에서 비어 있습니다. 두 입력이 모두 기존 이름에서 멀리 떨어져 있으면 같은 최근접 이름이 양쪽에 선택됩니다. 그 차이는 유사도 점수로 확인할 수 있습니다.