가이드

색상 이름이나 16진수로 가까운 색상 찾는 방법

색상 이름의 일부나 16진수 값을 입력하면 내장된 이름 있는 색상과 색상값을 확인할 수 있습니다. 직접 일치가 없는 유효한 6자리 16진수에는 RGB 채널 거리 기준의 가까운 이름 있는 색상이 추가될 수 있습니다.

도구 CSS 색상 이름 참조 도구

색상 이름과 16진수로 검색하기

이 도구는 내장된 이름 있는 색상 모음에서 색상을 검색하고, 검색 결과에 대응하는 색상값을 확인할 때 사용할 수 있습니다. 검색어로 색상 이름의 일부를 넣거나 생성된 16진수 색상값을 넣을 수 있어, 디자인 시안의 색상 이름을 찾거나 이미 알고 있는 색상값에 대응하는 이름을 살펴보는 작업에 적합합니다.

검색 입력은 선택 사항입니다. 아무것도 입력하지 않으면 이름이나 16진수에 따른 필터 없이 색상 모음을 처리하고, 색상 이름을 알파벳순으로 처리합니다. 따라서 빈 입력은 특정 색상이 없다는 뜻이나 오류를 뜻하지 않습니다. 모음의 항목을 넓게 확인하려는 경우에 사용할 수 있는 입력 상태입니다.

반대로 검색어를 입력하면 도구는 앞뒤 공백을 제거하고 소문자로 바꾼 값을 기준으로 검색합니다. 색상 이름 검색에서는 입력한 문자열이 색상 이름 안에 포함되는지 확인합니다. 16진수 검색에서는 색상에 대해 생성된 소문자 6자리 16진수 표현과 입력값이 일치하는지 확인합니다. 이 기능은 색상 이름과 16진수 표현을 서로 다른 방식으로 찾고 싶은 경우에 유용합니다.

검색 절차

  1. 검색 입력란에 찾으려는 색상 이름의 일부 또는 16진수 색상값을 입력합니다. 이름 전체를 알고 있지 않아도 이름에 포함된 일부 문자열을 사용할 수 있습니다. 입력할 때 앞뒤에 공백이 있어도 검색 전에 제거되며, 영문 대문자는 소문자로 변환되어 비교됩니다.

  2. 이름으로 찾으려면 색상 이름에 들어 있을 것으로 생각되는 문자열을 입력합니다. 입력한 문자열이 색상 이름 안에 포함되면 해당 항목이 직접 일치 결과로 처리됩니다. 검색어가 이름의 처음에 있어야 한다고 볼 필요는 없지만, 제공된 검색 방식은 이름에 문자열이 포함되는지를 기준으로 합니다.

  3. 16진수로 찾으려면 색상에 대해 생성된 소문자 6자리 16진수 표현과 일치하는 값을 입력합니다. 표현에 포함된 #를 함께 입력하는 형태도 사용할 수 있습니다. 입력값은 소문자와 앞뒤 공백을 정리한 뒤 비교되므로, 입력할 때 대소문자나 주변 공백을 별도로 맞출 필요는 없습니다.

  4. 직접 일치하는 항목이 있으면 결과에서 색상 이름을 확인합니다. 각 일치 색상은 #로 시작하는 소문자 6자리 16진수 값과 세 개의 정수 RGB 채널 값으로 함께 표현됩니다. 이름만 확인하지 말고 16진수 값과 RGB 값도 함께 살펴보면 다른 작업에 색상을 옮길 때 입력값을 대조하기 쉽습니다.

  5. 검색어가 비어 있지 않고 직접 일치가 없으면 가까운 색상 후보를 확인할 수 있습니다. 이때 도구는 선택적인 앞의 #를 제외한 나머지가 6자리인지, 각 문자가 유효한 16진수 문자인지 판단합니다. 두 조건을 만족하면 RGB 채널 사이의 제곱 거리 기준으로 내장된 모음에서 가장 가까운 이름 있는 색상을 선택합니다.

  6. 가까운 색상 결과가 추가되었는지 직접 일치 결과와 구분해 확인합니다. 입력값이 6자리가 아니거나 16진수에 해당하지 않는 문자를 포함하면 가까운 색상 대체 결과는 추가되지 않습니다. 이런 경우에는 입력 형식을 다시 확인하거나, 색상 이름의 일부처럼 직접 검색할 수 있는 문자열을 사용합니다.

결과 해석과 검색 범위

이름 검색 결과는 입력 문자열이 색상 이름 안에 포함될 때의 직접 일치입니다. 따라서 결과에 이름이 표시되었다면 입력한 검색어와 이름 사이의 포함 관계를 확인하면 됩니다. 이름이 여러 개 표시될 수 있는 경우에는 각 항목의 이름, 16진수 값, RGB 채널 값을 함께 비교해 원하는 항목을 고릅니다. 이 도구의 검색 대상은 내장된 이름 있는 색상 모음이므로, 결과가 없다는 사실만으로 입력한 색상 개념이 존재하지 않는다고 단정하지 말고 검색어의 형태를 먼저 점검하세요.

16진수 입력이 생성된 표현과 직접 일치하면 그 색상의 이름과 표현값을 결과에서 확인할 수 있습니다. 직접 일치가 없더라도 입력값에서 #를 선택적으로 제외한 뒤 남은 값이 6자리 유효 16진수라면 가까운 이름 있는 색상 정보가 추가될 수 있습니다. 이 후보는 입력한 색상 자체의 이름을 확인한 결과가 아니라 RGB 채널 간 제곱 거리로 비교해 선택된 모음 안의 가까운 색상입니다. 그러므로 입력한 색상과 후보 색상의 16진수 및 RGB 값을 나란히 확인하고, 후보를 원래 색상의 공식 이름처럼 사용하지 않는 편이 안전합니다.

빈 입력은 필터를 끄고 모음을 알파벳순으로 처리하는 별도 상태입니다. 특정 이름이나 값에 대한 결과를 기대하면서 입력란을 비워 두었다면, 먼저 검색어를 입력해야 합니다. 반대로 모음의 처리 결과를 살펴보려는 목적이라면 빈 입력 자체가 잘못된 형식은 아닙니다.

계산 중 예외가 발생하는 경우에는 성공하지 않은 결과와 예외 내용이 반환될 수 있습니다. 이 상태에서는 정상적인 색상 결과가 나온 것으로 해석하지 말고 성공 여부와 표시된 내용을 함께 확인하세요. 가까운 색상 결과가 나오지 않는 상황은 입력이 직접 일치하지 않으면서도 유효한 6자리 16진수 조건을 충족하지 못한 경우일 수 있습니다. 입력값의 길이와 문자를 확인한 뒤 다시 검색하면 됩니다.

사용 예시

디자인 시안의 16진수 색상에 대응하는 이름 있는 색상을 확인하려는 상황입니다.

디자인 시안의 16진수 색상에 대응하는 이름 있는 색상을 확인하려는 상황에서 검색란에 #3a7fcb를 입력하고 결과에 표시된 색상 이름과 표현값을 확인합니다.

결과에는 색상 이름, #로 시작하는 소문자 6자리 16진수 값, 세 개의 정수 RGB 채널 값이 포함됩니다. 직접 일치가 없고 입력 조건을 충족하면 가까운 이름 있는 색상 결과가 추가될 수 있습니다.

제한 사항

  • 검색 대상은 도구에 내장된 이름 있는 색상 모음으로 한정됩니다. 결과는 그 모음 안에서 검색된 색상과 비교 결과로 해석해야 합니다.

자주 발생하는 오류

  • 직접 일치가 없을 때 가까운 색상 결과가 나오지 않는 원인은 #를 제외한 입력이 6자리가 아니거나 유효한 16진수 문자를 포함하지 않기 때문일 수 있습니다. 입력을 다시 확인하고, 조건을 충족하는 6자리 16진수 또는 색상 이름의 일부를 입력하세요.

자주 묻는 질문

대문자나 앞뒤 공백이 있는 검색어도 사용할 수 있나요?

가능합니다. 검색 전에 입력값의 앞뒤 공백이 제거되고 소문자로 변환되므로, 대문자나 주변 공백이 있어도 정리된 값으로 비교됩니다.

직접 일치하는 색상이 없으면 가장 가까운 색상을 보여 주나요?

조건에 따라 다릅니다. 직접 일치가 없고 #를 제외한 값이 6자리의 유효한 16진수일 때 가까운 색상 결과가 추가될 수 있습니다. 길이나 문자가 조건에 맞지 않으면 해당 대체 결과는 추가되지 않습니다.

검색어를 비워 두면 어떻게 되나요?

검색어를 비워 두면 이름 또는 16진수 필터가 적용되지 않고 색상 모음이 처리되며, 색상 이름은 알파벳순으로 처리됩니다. 특정 색상을 찾으려면 검색어를 입력하세요.

도구

CSS 색상 이름 참조 도구