텍스트에서 16진수 색상 코드 추출

한 번의 클릭으로 텍스트에서 모든 16진수 색상 코드를 검색하고 추출

헥스 색상 코드 추출기 사용하는 방법

CSS, HTML, 디자인 노트 또는 16진수 색상이 포함된 모든 텍스트를 붙여넣으세요. 이 도구는 다음과 같은 코드를 찾습니다 #0F5C8C 그리고 #abc, 그런 다음 복사하거나 다운로드할 수 있도록 목록을 나열합니다. 처리 작업은 브라우저에서 실행됩니다.

  1. 텍스트를 붙여넣으세요 입력 상자에 (스타일시트, HTML 조각, 또는 디자인 노트).
  2. 옵션 선택
    • 중복된 색상 제거 — 각 색상을 한 번씩만 유지하세요.
    • 형식 표준화 (대문자) — 대문자 16진수로 정규화합니다.
    • 짧은 형식 색상(#abc)을 포함하세요 — 3자리 16진수와도 일치합니다.
    • 짧은 형태를 6자리로 확장 (#abc → #AABBCC) — 짧은 형식이 켜져 있을 때 #abc#AABBCC로 펼칩니다.
    • 색상 미리보기 표시 — 값 옆에 견본을 표시합니다.
  3. “색상 코드 추출”을 클릭하세요.
  4. 복사, 다운로드 또는 검토 추출된 목록 및 미리보기.

Hex color extractor example

일반적인 사용 사례

  • CSS / 테마 감사: 스타일시트나 디자인 토큰 파일에서 모든 16진수 색상을 가져오세요.
  • 브랜드 일관성: HTML 템플릿이나 이메일 마크업에서 사용된 색상을 수집합니다.
  • 디자인 인수인계: UI 키트를 다시 만들기 전에 노트나 내보낸 CSS에서 색상을 추출하세요.
  • 정리: 팔레트를 통합하기 전에 남아 있는 색상이나 중복된 색상을 찾아보세요.

어떤 형식이 감지되었나요?

  • 6자리 16진수: #0F5C8C, #ff5733 (있든 없든 # (텍스트의 문맥에 따라)
  • 3자리 약어: #abc, #F00 (“단축형 포함”이 활성화되었을 때)
  • 확장된 약식: #abc#AABBCC 확장이 활성화되었을 때

RGB/HSL 함수는 여기서 변환되지 않습니다 — 이 도구는 오직 16진수 색상 코드만 추출합니다.

예시: 전과 후

“약어 포함”, “약어 확장”, “중복 제거”, “형식 표준화”가 활성화된 경우:

CSS 입력추출된 색상
.btn {
  color: #ff0000;
  background: #abc;
  border-color: #FF0000;
  outline: #0F5C8C;
}
#FF0000
#AABBCC
#0F5C8C

#ff0000 그리고 #FF0000 하나의 대문자 값으로 축소합니다. 짧음 #abc 확장된다 #AABBCC.

자주 묻는 질문 (FAQ)

이 도구가 내 CSS나 HTML을 업로드하나요?

아니요. 추출은 사용자의 브라우저에서 로컬로 실행됩니다. 사용자의 텍스트는 우리 서버로 전송되지 않습니다.

왜 #abc와 같은 짧은 색상이 없나요?

활성화 약어 색상 포함. 선택적으로 활성화 약어를 풀다 6자리 숫자에 해당하는 것을 나열하다.

rgb() 또는 hsl() 값을 추출할 수 있나요?

이 페이지에서는 불가합니다. RGB ↔ 16진수 변환이 필요하다면 전용 색상 변환기를 사용하세요 (예를 들어 헥스에서 RGB로 / RGB를 16진수로).

해시(#)가 필요합니까?

가장 잘 맞는 색상에는 #. 디자인 시스템을 위해 일관된 목록을 유지하려면 표준화/대문자 사용을 활성화하세요.

개인정보

모든 일치는 자바스크립트를 사용하여 귀하의 기기에서 이루어집니다. 우리는 귀하가 붙여넣는 텍스트나 추출한 색상을 저장하지 않습니다.