이미지 색상 코드 추출: 어떤 색이든 HEX 코드 찾기

이미지를 추가한 뒤 원하는 지점을 클릭하세요. 해당 색상의 HEX 코드가 큰 색상 견본과 함께 바로 표시되어, 디자인 앱이나 웹사이트, 메시지에 바로 복사해 사용할 수 있습니다.

단색 픽셀이라면 색상 코드는 정확한 값 그대로예요. 축소된 미리보기가 아니라 원본 크기의 이미지에서 읽어오기 때문에, 1200만 화소 사진 속 작은 디테일도 실제 색상을 그대로 유지합니다.

사진은 노이즈가 있기 때문에 이 점이 중요합니다. 맑은 하늘에서도 바로 옆 픽셀 두 개가 미묘하게 다른 색일 수 있습니다. 루페가 중심 픽셀을 표시해주므로 클릭하기 전에 어떤 코드가 나올지 미리 알 수 있습니다.

PNG 스크린샷에서는 버튼 같은 단색 영역 안의 픽셀들이 보통 같은 코드를 공유합니다. JPG에서는 압축으로 색이 가장 많이 바뀌는 경계선과 텍스트 주변을 피해서 선택하세요.

모든 코드는 웹 색상 표준인 sRGB 값입니다. 일부 아이폰 사진은 더 넓은 색 범위를 담고 있는데, 이는 sRGB로 변환되므로 매우 선명한 색조는 코드상 약간 덜 선명하게 나올 수 있습니다.

컴퓨터의 Chrome, Edge 또는 Opera에서 화면에서 선택을 클릭하세요. 마우스 포인터가 스포이드 도구로 바뀌어 웹사이트, 앱, 문서 등 화면의 모든 픽셀을 읽어옵니다. 원하는 지점을 클릭하면 다른 선택과 동일하게 색상 코드가 표시됩니다.

파이어폭스, 사파리, 휴대폰 브라우저는 이 방식으로 화면을 읽을 수 없어 해당 버튼이 표시되지 않습니다. 대신 스크린샷을 찍은 뒤 Ctrl+V(맥은 Cmd+V)로 붙여넣어 선택하세요.

휴대폰에서는 스크린샷을 찍어 사진에서 추가하면 됩니다. 어느 경우든 브라우저 확장 프로그램이나 데스크톱 앱을 설치할 필요가 없습니다.

선택한 색상마다 다섯 가지 형식으로 동일한 색을 보여주며, 각각 복사 버튼이 있습니다. 보라색 픽셀 예시입니다:

• HEX: #8338ec, 대부분의 웹사이트와 디자인 앱에서 사용하는 짧은 코드
• RGB: rgb(131 56 236), 0~255 범위의 빨강, 초록, 파랑 값
• HSL: hsl(265 83% 57%), 색상, 채도, 명도
• HSV: 색상 265°, 채도 76%, 명도 93%, 많은 디자인 앱의 색상 선택기가 사용하는 모델
• CMYK: 시안 44%, 마젠타 76%, 옐로 0%, 블랙 7%, 인쇄용 예상값

HEX, RGB, HSL 코드는 모두 유효한 CSS 값이라 스타일시트에 바로 붙여넣을 수 있어요. PNG 로고의 부드러운 가장자리처럼 픽셀이 부분적으로 투명하면 코드에도 그 투명도가 그대로 반영되며, 브라우저가 읽을 수 있는 한 가장 정확한 색상을 보여줍니다.

색상 이름 찾기

선택한 색상마다 이름도 함께 제공됩니다. 스포이드가 148개 CSS 색상 이름 중 가장 가까운 것을 찾아 가장 가까운 이름으로 표시하므로, 보라색 픽셀은 가장 가까운 이름: blueviolet으로 표시됩니다. 이 이름을 색상 설명에 사용하거나 그대로 CSS에 붙여넣을 수 있습니다.

어떤 색상 코드를 사용해야 할까요?

대부분의 작업에는 HEX를 사용하세요. 웹사이트와 대부분의 디자인 앱이 이를 지원합니다. 다른 코드들은 특정 상황에서 유용합니다:

• 앱이 빨강, 초록, 파랑 값을 따로 요구할 때는 RGB
• 색을 수동으로 더 밝게, 더 어둡게, 더 탁하게 조절할 때는 HSL이나 HSV
• 인쇄용 대략적인 시작점으로는 CMYK. 프린터 프로필이 아닌 단순 공식에서 나온 값이므로, 최종 색상은 인쇄업체와 상의해 맞추세요

휴대폰 사진부터 웹페이지 스크린샷까지 어떤 이미지든 사용할 수 있습니다. 자주 하는 작업들:

• 스크린샷: 복사해서 여기에 붙여넣으면 웹사이트나 앱의 색상을 바로 추출
• 로고: 브랜드 스타일 가이드가 없을 때 로고 파일에서 브랜드 색상 추출
• 사진: 하늘, 드레스, 칠해진 벽 등의 색상 확인

선택한 색상 저장하기

선택한 색상은 모두 내 색상에 최신순으로 추가되며 최대 24개까지 저장됩니다. 색상을 복사하거나 삭제하거나 목록 전체를 지울 수 있습니다. 그런 다음 전체 목록을 다음 형식으로 내보낼 수 있습니다:

• 스타일시트에 붙여넣을 CSS 변수
• Tailwind 설정 코드
• 각 색상의 HEX, RGB, HSL이 담긴 JSON
• 공유할 수 있는 색상 견본 PNG 이미지

목록은 브라우저에 저장되므로 새로고침하거나 다른 이미지를 열어도 그대로 남아 있습니다. 색상 코드만 저장되며 이미지는 저장되지 않습니다. 목록이 가득 차면 가장 오래된 색상부터 제거됩니다.

이미지의 주요 색상 확인하기

스포이드는 이미지의 주요 색상 6가지도 함께 보여줍니다. 색상을 클릭하면 내 색상에 추가됩니다. 이미지 전체의 주요 색상을 4~12개 팔레트로 추출하려면 팔레트 추출기를 열어보세요.

이 색상 추출 도구는 무료이며, 가입이나 계정 없이 색상 내보내기까지 가능합니다. 이미지는 휴대폰이나 컴퓨터에서 열리며 서버에 업로드되지 않습니다. 브라우저에서 바로 실행되어 별도 앱 다운로드가 필요 없습니다.

• 휴대폰, 태블릿, 컴퓨터에서 모두 작동합니다. 터치스크린에서는 루페가 손가락 위쪽에 표시되어 손가락에 픽셀이 가려지지 않습니다.
• 키보드로도 사용 가능합니다. Tab으로 이미지에 포커스한 뒤 방향키로 십자선을 이동하고(Shift로 10px씩 이동), Enter로 선택하세요.
• JPG, PNG, WebP, AVIF, GIF, BMP, SVG, HEIC, HEIF, TIFF 파일을 최대 50MB까지 열 수 있습니다. GIF는 첫 프레임을 사용합니다.
• 아이폰 HEIC 사진은 변환 없이 그대로 열립니다.
• 한 번에 하나의 이미지만 작업합니다. 다른 이미지를 열어도 내 색상은 그대로 유지됩니다.