이미지 색상 추출 사용 방법
- 1
이미지 열기
최대 25 MB의 스크린샷, 사진, 로고를 끌어다 놓거나 찾아서 선택하거나 붙여넣으세요. JPG, PNG, WebP, AVIF, HEIC, GIF, SVG를 지원해요.
- 2
돋보기로 조준하기
이미지 위에 마우스를 올리거나 드래그하세요. 11 × 11 픽셀 돋보기에 십자선 아래의 정확한 픽셀과 HEX 코드가 표시돼요.
- 3
클릭해서 선택하기
HEX, RGB, HSL, OKLCH 값을 확인하고 값마다 있는 복사 버튼으로 복사하세요. 방향키로 십자선을 조금씩 옮기고 Enter로 선택해요.
- 4
팔레트 가져오기
주요 색상을 5~12개 중에서 고르고 CSS 변수, JSON, Tailwind 테마 블록으로 복사하세요.
제한 및 Pro
한 번에 이미지 1개, 최대 25 MB까지 쓸 수 있고, 색상 선택은 무제한이에요. 팔레트는 5~12색, 기록은 24색까지 가능해요.
Pro에서는 최대 4 GB 이미지까지 샘플링할 수 있어요. Pro 보기
이미지 색상 추출 소개
이미지에서 색상 추출 도구는 이미지 속 어떤 픽셀이든 정확한 값을 읽고, 이미지 전체를 팔레트로 만들어 줘요. 선택한 색상은 네 가지 표기로 보여줘요. 디자인 도구용 HEX, CSS용 rgb()와 hsl(), 그리고 밝기와 채도가 눈의 느낌에 가깝게 움직이는 최신 CSS 색상 작업용 oklch()예요. 선택한 색상은 최근 24개까지 기록에 쌓이고 이 브라우저에 저장되어 다음에 와도 그대로 남아 있어요. 데스크톱의 Chrome과 Edge에서는 화면에서 선택으로 브라우저의 스포이트를 통해 페이지 밖의 색상도 가져올 수 있어요.
팔레트는 긴 변이 최대 200픽셀이 되도록 줄인 이미지 사본에서 OKLab 색 공간의 k-means 클러스터링으로 계산해요. 비슷한 클러스터는 합치고, 투명한 픽셀은 무시하고, 이미지에서 차지하는 비율이 큰 순서로 정렬해요. 각 색상 칩에는 그 비율이 표시돼요. 같은 이미지는 언제나 같은 팔레트가 나와요.
로고에서 브랜드 색상을 맞추거나, 사진으로 테마를 만들거나, 스크린샷 속 버튼의 정확한 색을 확인하거나, 무드보드를 모을 때 쓰기 좋아요. 값은 브라우저가 이미지를 표시하는 표준 sRGB 기준이라서, JPG 압축 노이즈나 넓은 색 영역의 원본은 원래 디자인 파일과 몇 단위 차이가 날 수 있어요. 반투명 픽셀은 투명도를 뺀 색으로 표시하고, 색상 이름 찾기나 대비율 검사는 하지 않아요.
개인정보 보호
이미지는 이 탭에서 디코딩하고 샘플링하며, 팔레트 클러스터링은 이미지를 연 뒤 만들어지는 작은 Web Worker에서 실행돼요. 아무것도 업로드되지 않아요. 색상 기록은 이 브라우저의 로컬 저장소에만 저장돼요. 화면에서 선택은 브라우저에 내장된 스포이트를 사용하며, 선택한 색상 하나만 이 페이지에 전달되고 다른 정보는 공유되지 않아요.
기능
픽셀 단위 돋보기
11 × 11 픽셀 돋보기와 키보드 미세 이동으로 마우스와 터치에서 정확하게 선택해요.
주요 색상 팔레트
OKLab의 k-means로 뽑은 5~12색을 이미지 비율 순으로 정렬해요.
개발자용 내보내기
HEX, RGB, HSL, OKLCH 값과 CSS 변수, JSON, Tailwind @theme 블록을 제공해요.
색상 기록
최근 선택한 24개가 이 브라우저에 남아 있어서 목록으로 바로 복사할 수 있어요.