색상 이름 찾기
hex, rgb(), hsl() 색상을 입력하면 가장 가까운 CSS 색상 이름을 즉시 찾아드립니다. 실시간 스와치 비교와 몇 가지 다음으로 가까운 대안도 함께 제공합니다.
🔒 브라우저에서 로컬로 처리됩니다
Loading…
사용 방법
- 필드에 hex, rgb(), hsl() 형식으로 색상을 입력하거나 색상 스와치로 직접 선택하세요.
- 가장 가까운 CSS 색상 이름이 즉시 표시되며, 입력한 색상 옆에 해당 스와치, 이름, hex 코드가 함께 나타납니다.
- 거리 점수를 확인하면 일치도가 얼마나 가까운지 알 수 있습니다 — 거리가 0이면 정확히 일치한다는 뜻입니다.
- 아래 목록을 스크롤하면 가장 가까운 순서로 정렬된 다음으로 가까운 색상 이름들을 더 볼 수 있습니다.
기능
- hex, rgb(), hsl() 색상 형식과 시각적 색상 선택기를 모두 지원
- 148개 표준 CSS/X11 색상 이름 전체와 비교
- 입력한 색상과 일치한 색상 이름을 나란히 실시간으로 비교 표시
- 숫자로 된 거리 점수와 함께 다음으로 가까운 여러 대안 제공
- 100% 클라이언트 측 처리 — 색상 정보가 브라우저 밖으로 나가지 않음
자주 묻는 질문
색상 이름 매칭은 어떻게 작동하나요?
입력한 색상은 RGB로 변환된 후, RGB 값 사이의 유클리드 거리를 사용해 모든 표준 CSS 색상 이름과 비교됩니다. 거리가 가장 작은 색상 이름이 가장 가까운 일치로 표시되고, 그다음으로 작은 거리를 가진 색상들이 대안으로 표시됩니다.
어떤 색상 이름들과 비교되나요?
CSS Color Module에서 정의한 148개의 확장 CSS/X11 색상 키워드 표준 세트입니다 — "tomato", "slateblue", "rebeccapurple"처럼 브라우저가 CSS에서 인식하는 것과 동일한 이름입니다. 고정된 잘 알려진 목록이므로, 입력한 색상이 이 중 하나와 정확히 일치할 때만 완전 일치가 나타납니다.
사이트가 제 언어로 되어 있는데 왜 색상 이름은 영어로 표시되나요?
"Tomato"나 "SlateBlue" 같은 이름은 번역 가능한 텍스트가 아니라 CSS 문자 그대로의 키워드입니다 — 브라우저는 스타일시트에서 영문 철자만 인식합니다. 그래서 모든 언어에서 색상 이름만은 영어로 유지되며, 그 주변의 나머지 페이지는 완전히 번역되어 있습니다.
거리 점수는 무엇을 의미하나요?
각 채널이 0~255 범위를 갖는 RGB 공간에서 입력한 색상과 색상 이름 사이의 직선(유클리드) 거리입니다. 거리 0은 정확히 일치한다는 뜻이며, 가능한 최대 거리(검정에서 흰색까지)는 약 441입니다. 숫자가 작을수록 시각적으로 더 가까운 일치를 의미합니다.
이 도구가 제 색상을 저장하거나 업로드하나요?
아니요. 모든 파싱, 매칭, 거리 계산은 일반 JavaScript를 사용해 브라우저 내에서 로컬로 처리됩니다. 어떤 것도 서버로 전송되거나 어딘가에 저장되지 않습니다.