색상 이름 찾기 – HEX 코드로 색상의 정확한 이름 찾기

색상 이름 찾기는 HEX 코드를 입력하면 해당 색상의 정확한 이름을 찾아주고, 유사한 색상들을 추천해주는 웹 도구입니다. 디자이너, 개발자, 마케터 등 색상을 다루는 모든 분들에게 유용한 도구로, CSS 표준 색상 140개와 Material Design, Flat Design 확장 색상을 포함한 방대한 데이터베이스를 제공합니다.

주요 기능

1. HEX 코드 입력 및 색상 검색

HEX 코드를 입력하면 해당 색상의 정확한 이름을 찾아줍니다. 3자리 또는 6자리 HEX 코드를 모두 지원하며, # 기호는 포함하거나 생략할 수 있습니다.

• 실시간 입력 검증 및 오류 메시지 제공
• 3자리 HEX 자동 확장 (예: FFF → FFFFFF)
• Enter 키로 빠른 검색

2. 색상 이름 검색

영문 또는 한글로 색상 이름을 검색할 수 있습니다. 입력 중 실시간 자동완성 기능이 제공되어 원하는 색상을 빠르게 찾을 수 있습니다.

• 영문/한글 검색 지원 (예: Tomato 또는 토마토)
• 최대 10개 자동완성 제안
• 색상 미리보기와 HEX 코드 함께 표시

3. 상세 색상 정보

선택한 색상의 다양한 형식 정보를 제공합니다.

• RGB 값 (예: rgb(52, 152, 219))
• HSL 값 (예: hsl(204, 70%, 53%))
• HEX 코드
• 색조 (Hue) – 0°~360° 색상환 각도
• 채도 (Saturation) – 색상의 순도 백분율
• 명도 (Lightness) – 밝기 백분율

4. 유사 색상 추천

가중 유클리드 거리 알고리즘을 사용하여 입력한 색상과 가장 유사한 10개의 색상을 거리순으로 정렬하여 보여줍니다. 각 색상 카드에는 색상 이름, HEX 코드, 유사도 거리 값이 표시됩니다.

• 거리 계산식: √[2×(R차이)² + 4×(G차이)² + 3×(B차이)²]
• 인간의 색상 인지 특성을 반영한 가중치 적용
• 클릭하여 해당 색상으로 즉시 전환

5. 컬러 피커

마우스 클릭만으로 색상을 선택할 수 있는 직관적인 컬러 피커를 제공합니다. 선택한 색상은 자동으로 HEX 입력란에 반영되고 즉시 검색됩니다.

6. 복사 기능

필요한 형식으로 색상 값을 클립보드에 복사할 수 있습니다.

• HEX 형식 복사
• RGB 형식 복사
• HSL 형식 복사
• 색상 이름 복사
• 복사 완료 시 토스트 알림

7. 최근 검색 히스토리

최근 검색한 색상 12개를 자동으로 저장하고 표시합니다. 브라우저를 닫아도 히스토리가 유지되며, 클릭하여 빠르게 재검색할 수 있습니다.

• 브라우저 LocalStorage에 자동 저장
• 최대 12개 색상 기록
• 중복 제거 (최신 검색이 맨 앞)
• 전체 삭제 기능

8. 랜덤 색상 생성

무작위 색상을 생성하여 색상 영감을 얻거나 테스트 용도로 사용할 수 있습니다. Ctrl+Shift+R 단축키로도 실행 가능합니다.

9. 미리보기 가독성 최적화

색상 미리보기 박스의 텍스트 색상이 배경 명도에 따라 자동으로 변경됩니다. 명도 50% 이상은 어두운 텍스트, 50% 미만은 밝은 텍스트가 표시되어 항상 높은 가독성을 유지합니다.

활용 사례

웹 디자이너

• 디자인 시안의 색상 코드를 정확한 색상 이름으로 변환
• 클라이언트와 소통 시 색상 이름으로 명확한 의사전달
• 유사 색상 추천으로 색상 팔레트 확장

프론트엔드 개발자

• CSS 변수 네이밍 시 참고
• HEX, RGB, HSL 형식 간 빠른 변환
• 디자인 시스템 구축 시 색상 정보 정리

마케터/브랜드 담당자

• 브랜드 색상의 정확한 이름 파악
• 색상 가이드 문서 작성
• 인쇄물 제작 시 색상 정보 공유

학생/교육자

• 색상 이론 학습 도구
• RGB, HSL 색공간 이해
• 색상 거리 계산 알고리즘 학습

사용 방법

방법 1: HEX 코드 입력

1. HEX 코드 입력란에 색상 코드 입력 (예: #3498DB 또는 3498DB)
2. Enter 키를 누르거나 검색 버튼 클릭
3. 색상 이름, RGB, HSL 등 상세 정보 확인
4. 유사한 색상 10개 자동 추천

방법 2: 색상 이름 검색

1. 색상 이름 검색란에 원하는 색상 이름 입력 (영문 또는 한글)
2. 자동완성 목록에서 원하는 색상 선택
3. 선택한 색상의 상세 정보 자동 표시

방법 3: 컬러 피커 사용

1. 컬러 피커를 클릭하여 색상 선택
2. 선택한 색상의 정보 자동 검색

방법 4: 랜덤 색상

1. 랜덤 색상 버튼 클릭 또는 Ctrl+Shift+R 단축키 사용
2. 무작위 생성된 색상 정보 확인

기술 사양

색상 데이터베이스

• CSS 표준 색상 140개
• Material Design 색상 팔레트
• Flat Design 색상 팔레트
• 총 160개 이상의 명명된 색상

색상 거리 계산

가중 유클리드 거리 알고리즘을 사용하여 색상 간 유사도를 계산합니다. 인간의 시각이 녹색(G)에 가장 민감하고, 파랑(B), 빨강(R) 순으로 민감하다는 특성을 반영하여 가중치를 적용했습니다.

계산식: 거리 = √[2×(R1-R2)² + 4×(G1-G2)² + 3×(B1-B2)²]

색공간 변환

• HEX → RGB: 16진수를 10진수로 변환
• RGB → HSL: 색조-채도-명도 색공간 변환
• 모든 변환은 클라이언트 사이드에서 실시간 처리

브라우저 호환성

• Chrome, Firefox, Safari, Edge 최신 버전 지원
• Clipboard API 미지원 브라우저를 위한 Fallback 복사 기능
• LocalStorage 미지원 브라우저 대응

반응형 디자인

• 데스크톱: 2열 그리드 레이아웃
• 태블릿 (768px 이하): 1열 레이아웃, 유사 색상 3열
• 모바일 (480px 이하): 최적화된 1-2열 레이아웃

사용 팁

단축키 활용

• Enter: HEX 입력란에서 빠른 검색
• Ctrl+Shift+R: 랜덤 색상 생성

효율적인 작업 흐름

• 컬러 피커로 대략적인 색상 선택 후 HEX 값 미세 조정
• 유사 색상 카드를 활용하여 색상 팔레트 빠르게 구성
• 히스토리 기능으로 이전에 사용한 색상 재활용
• 필요한 형식(HEX/RGB/HSL)으로 즉시 복사하여 코드에 붙여넣기

색상 이름 검색 활용

• “빨강”, “파랑” 등 한글 검색으로 관련 색상 빠르게 탐색
• 부분 검색 지원: “tom”만 입력해도 “Tomato” 검색 가능
• 자동완성 목록에서 여러 색상 비교 후 선택

자주 묻는 질문

Q. 3자리 HEX 코드와 6자리 HEX 코드의 차이는 무엇인가요?

A. 3자리 HEX 코드는 단축 형식으로, 각 자리가 두 번 반복됩니다. 예를 들어 #FFF는 #FFFFFF와 동일합니다. 본 도구는 3자리 코드를 자동으로 6자리로 확장하여 처리합니다.

Q. 입력한 색상의 정확한 이름이 없다고 나옵니다.

A. 데이터베이스에 정확히 일치하는 색상이 없을 때 표시됩니다. 이 경우 유사한 색상 섹션에서 가장 가까운 색상들을 확인할 수 있습니다. 첫 번째 유사 색상이 가장 가까운 명명된 색상입니다.

Q. RGB와 HSL의 차이는 무엇인가요?

A. RGB는 빨강(Red), 녹색(Green), 파랑(Blue)의 조합으로 색상을 표현하며, 각 값은 0-255 범위입니다. HSL은 색조(Hue, 0-360°), 채도(Saturation, 0-100%), 명도(Lightness, 0-100%)로 색상을 표현합니다. HSL은 색상 조정이 더 직관적입니다.

Q. 히스토리가 저장되지 않습니다.

A. 브라우저의 LocalStorage 기능이 비활성화되었거나, 시크릿 모드를 사용 중일 수 있습니다. 일반 브라우징 모드에서 LocalStorage를 활성화하면 히스토리가 정상적으로 저장됩니다.

Q. 색상 거리 값은 무엇을 의미하나요?

A. 입력한 색상과 데이터베이스 색상 간의 차이를 수치로 나타낸 값입니다. 값이 작을수록 더 유사한 색상이며, 0이면 정확히 일치합니다. 가중 유클리드 거리 알고리즘을 사용하여 인간의 색상 인지 특성을 반영했습니다.

Q. 모바일에서도 사용할 수 있나요?

A. 네, 반응형 디자인으로 제작되어 모바일, 태블릿, 데스크톱 모든 기기에서 최적화된 화면으로 사용할 수 있습니다.

향후 업데이트 계획

• 색상 조화 제안 (보색, 유사색, 3색 조화)
• WCAG 접근성 대비율 계산기
• 이미지에서 색상 추출 기능
• CMYK 색상 정보 추가
• 색상 팔레트 저장 및 내보내기
• 다국어 지원 확대

마치며

색상 이름 찾기 도구는 디자이너, 개발자, 크리에이터 모두가 색상을 더욱 효과적으로 다룰 수 있도록 돕습니다. HEX 코드만으로도 색상의 정확한 이름과 다양한 형식 정보를 얻을 수 있으며, 유사 색상 추천을 통해 색상 팔레트 구성에도 활용할 수 있습니다.

모든 기능은 무료로 제공되며, 브라우저에서 즉시 사용할 수 있습니다. 별도의 설치나 회원가입이 필요 없으며, 개인정보도 수집하지 않습니다.

여러분의 창작 활동에 이 도구가 유용하게 사용되기를 바랍니다.