개발자 도구

CSS 색상 이름 참조 도구

CSS 명명 색상을 이름이나 16진수 코드로 검색하고 16진수 및 RGB 값을 확인합니다.

도구 실행

CSS 색상 이름 조회 도구는 표준 CSS 명명 색상 목록을 검색하고 색상 정보를 확인할 수 있는 도구입니다. 검색창에 색상 이름의 일부나 16진수 색상 코드를 입력하면 일치하는 색상 목록이 나타납니다. 검색어를 입력하지 않고 실행하면 전체 색상 목록이 이름순으로 정렬되어 표시됩니다. 각 색상 항목에는 공식 색상 이름, 앞에 #(샤프) 기호가 붙은 6자리 소문자 16진수 코드, 그리고 빨강, 초록, 파랑의 세 가지 정수 RGB 값이 함께 제공됩니다. 직접 일치하는 색상이 없는 경우, 유효한 6자리 16진수 코드를 입력했다면 RGB 색상 차이 계산을 통해 가장 가까운 색상을 찾아 안내합니다.

사용 방법

  1. 검색창에 찾고자 하는 색상 이름의 일부나 16진수 색상 코드를 입력합니다.
  2. 전체 색상 목록을 보려면 검색창을 빈칸으로 둡니다.
  3. 실행 버튼을 눌러 색상 검색 결과를 확인합니다.
  4. 결과 화면에서 색상 이름, 16진수 코드, RGB 값을 확인하여 스타일에 활용합니다.

예시

  • 검색창에 'blue'를 입력하면 이름에 blue가 포함된 모든 색상과 각 색상의 16진수(HEX) 및 RGB 값이 표시됩니다.
  • 검색창에 '#ff5733'과 같은 16진수 코드를 입력하면 직접 일치하는 이름이 없을 때 RGB 색상 차이 계산을 통해 가장 가까운 색상을 찾아 표시합니다.

자주 묻는 질문

대문자로 색상 이름을 입력해도 검색되나요?

검색창에 입력된 텍스트는 자동으로 소문자로 변환되고 앞뒤 공백이 제거된 후 비교되므로 대소문자 구분 없이 검색할 수 있습니다.

16진수 코드 앞에 # 기호를 반드시 붙여야 하나요?

# 기호는 선택 사항입니다. 기호가 없더라도 6자리 유효한 16진수 문자열이면 올바르게 인식됩니다.

검색어를 입력하지 않으면 어떻게 되나요?

검색어를 비워두고 실행하면 내장된 모든 색상 목록이 알파벳순으로 정렬되어 전체 표시됩니다.

가장 가까운 색상 정보는 언제 표시되나요?

정확히 일치하는 색상 이름이 없고 입력값이 유효한 6자리 16진수 색상 코드일 때, RGB 색상 차이 계산을 통해 가장 가까운 색상을 안내합니다.

이 도구 삽입하기

아래 코드를 사용해 작동하는 SmartPlusLab 도구를 웹사이트에 추가하세요.