색상 이름 찾기(HEX 코드)

색상 이름 가이드

HEX 코드만 있어도 색상 이름과 가까운 후보를 같이 봅니다

색상 이름 찾기는 색상값을 사람이 읽는 이름으로 바꿔 보고, 같은 화면에서 RGB·HSL·HEX 값과 가까운 색 후보를 확인하는 본문형 도구입니다. 컬러 피커로 고르거나 HEX 코드를 붙여 넣고, 필요하면 색상 이름으로도 찾아볼 수 있습니다.

먼저 색을 정하고, 이름과 숫자값을 한 번에 확인합니다

화면은 색을 넣는 영역과 결과를 읽는 영역으로 나뉩니다. 입력 방식은 세 가지지만, 마지막에는 같은 결과 카드로 모입니다.

컬러 피커나 HEX 코드로 색을 정합니다. HEX는 `#3498db`처럼 여섯 자리로 넣을 수 있고, 짧은 세 자리 형식도 여섯 자리로 정리됩니다.
색상 이름을 알고 있다면 이름 검색을 씁니다. `Tomato`처럼 영문 이름을 입력하면 제안 목록에서 바로 선택할 수 있습니다.
결과 카드에서 정확한 이름 여부를 봅니다. 일치하는 이름이 있으면 이름과 색상 종류가 나오고, 없으면 아래 유사 색상 목록이 판단 기준이 됩니다.
필요한 형식만 복사합니다. 색상 이름, RGB, HSL, HEX를 각각 복사할 수 있어 디자인 시안이나 CSS 작업에 나눠 붙이기 좋습니다.

HEX, 색상 이름, 컬러 피커는 출발점만 다릅니다

처음 보는 사람은 HEX와 RGB, HSL이 헷갈릴 수 있습니다. 이 도구에서는 입력은 하나만 골라도 되고, 결과에서 세 형식을 함께 확인하면 됩니다.

HEX 코드

웹에서 가장 자주 보는 `#RRGGBB` 형식입니다. `#ff0000`처럼 빨강, 초록, 파랑의 양을 16진수로 적습니다.

색상 이름

브라우저가 알아보는 CSS 색상 이름이나 도구에 포함된 확장 이름을 검색합니다. 이름을 고르면 HEX 입력값도 함께 바뀝니다.

컬러 피커

눈으로 색을 고를 때 씁니다. 정확한 코드가 없어도 먼저 색을 찍고, 결과에서 가까운 이름을 확인할 수 있습니다.

표준 색 이름과 가까운 색 후보는 서로 다른 의미입니다

CSS 표준 색상 이름은 정해진 목록이 있습니다. 반면 Material, Flat 계열처럼 도구 안에 함께 들어 있는 확장 이름은 색을 더 넓게 비교하기 위한 보조 이름입니다.

정확한 이름 코드가 목록과 같을 때

유사 색상 RGB 차이가 가까울 때

색상값 변환 HEX ↔ RGB/HSL

W3C CSS Color Module CSS 표준 색상 이름의 범위를 확인할 때 참고합니다.

#ff0000은 Red로 맞고, 애매한 색은 후보 목록을 봅니다

예를 들어 HEX 코드에 `#ff0000`을 넣으면 결과는 `Red (빨강)`으로 표시됩니다. 같은 결과 카드에서 `rgb(255, 0, 0)`, `hsl(0, 100%, 50%)`, `#FF0000`도 함께 확인할 수 있습니다.

입력 #ff0000

이름 결과 Red (빨강)

복사할 값 rgb(255, 0, 0)

정확히 일치하지 않을 때

정해진 이름이 없는 색은 “정확히 일치하는 색상 이름이 없습니다”라는 안내가 먼저 보입니다. 이때는 아래 유사 색상 카드의 1번 후보부터 비교해 가장 가까운 이름을 고르면 됩니다.

결과는 이름, 숫자값, 후보 색을 나눠 읽습니다

결과 카드 하나만 보고 끝내기보다, 어떤 용도로 쓸 값인지 먼저 정하면 덜 헷갈립니다. 화면에서 복사 버튼이 나뉘어 있는 이유도 여기에 있습니다.

사람에게 설명할 때는 이름을 씁니다. “밝은 파랑 계열”처럼 말할 때는 exact match나 유사 색상 이름이 도움이 됩니다.
CSS나 디자인 토큰에는 HEX가 편합니다. 대소문자는 달라도 같은 색이지만, 도구 결과는 보기 좋게 대문자 HEX로 정리됩니다.
RGB는 화면 색의 세 채널을 볼 때 씁니다. 빨강·초록·파랑 값이 각각 얼마인지 확인하기 좋습니다.
HSL은 색조와 채도, 명도를 따로 볼 때 씁니다. 색을 조금 밝게 하거나 채도를 낮춰야 할 때 읽기 쉽습니다.
최근 검색 색상은 브라우저 저장소에 의존합니다. 시크릿 모드나 저장소 차단 상태에서는 기록이 남지 않을 수 있습니다.

색상 이름 찾기에서 자주 헷갈리는 질문

정확히 일치하는 색상 이름이 없다고 나오면 결과를 어떻게 읽어야 하나요?

입력한 색이 도구의 이름 목록과 완전히 같지 않다는 뜻입니다. 아래 유사 색상 목록에서 1번 후보를 먼저 보고, 프로젝트에서 쓰는 팔레트 이름과 맞춰 선택하면 됩니다.

3자리 HEX 코드도 본문 예시처럼 그대로 써도 되나요?

쓸 수 있습니다. #fff처럼 세 자리로 넣으면 각 자리를 두 번 반복한 #FFFFFF 형식으로 해석됩니다. 결과 화면에서는 여섯 자리 HEX로 정리해 보여줍니다.

RGB와 HSL 값은 각각 언제 보면 좋나요?

RGB는 화면 색을 빨강·초록·파랑 숫자로 확인할 때 좋고, HSL은 색조·채도·명도를 따로 조절해야 할 때 읽기 좋습니다. 둘 다 같은 색을 다른 방식으로 적은 값입니다.

최근 검색 색상이 저장되지 않을 때는 무엇을 확인해야 하나요?

최근 검색은 브라우저의 로컬 저장소를 사용합니다. 시크릿 모드, 저장소 차단 설정, 브라우저 데이터 삭제 뒤에는 기록이 비어 있을 수 있습니다.

색상 이름 찾기(HEX 코드)