무료 이미지 색상 추출

이미지의 한 지점을 눌러 그 픽셀을 대문자 HEX와 rgb(r, g, b)로 읽어요. 예: rgb(200, 100, 50)은 #C86432예요.

이미지는 브라우저 안에서 분석됩니다.

또는 이 화면 어디에나 이미지 한 장을 놓으세요

이미지를 선택하세요.

색상과 팔레트 추출

알아 두면 좋은 점

불러온 그림 어디든 누르면 도구가 정확히 픽셀 하나를 읽어요. 클릭 위치는 미리보기에서 실제 해상도의 이미지 좌표로 환산되므로, 가로 4000px 사진이 800px로 표시돼도 주변 평균이 아니라 포인터 아래의 그 픽셀 값이 나와요. 결과는 대문자 HEX 코드와 rgb(r, g, b) 문자열로 나오고 각각 복사 버튼이 있어요.

변환은 단순한 16진법이에요. rgb(200, 100, 50)에서 빨강 200은 C8, 초록 100은 64, 파랑 50은 32라서 #C86432가 돼요. 반대로 #C86432는 200, 100, 50으로 읽혀요. 각 채널은 0~255의 정수라서 코드는 항상 16진수 여섯 자리이고 #0A0B0C처럼 앞의 0도 유지돼요.

무엇을 가리키는지 주의하세요. 사진에는 노이즈와 JPG 블록이 있어서 하늘을 한 번 누른 값이 옆 지점과 몇 단계 다를 수 있으니 서너 번 눌러 가운데 값을 쓰세요. 글자와 로고의 안티앨리어싱된 가장자리는 두 색이 섞여 있으므로 글자나 도형의 꽉 찬 안쪽을 찍으세요. PNG의 투명 픽셀은 알파 없이 아래 색으로 읽히니 미리보기 배경도 확인하세요.

이 페이지는 한 점씩 읽어요. 주된 색을 빠르게 훑고 싶다면 팔레트 추출기 페이지가 이미지 전체를 여덟 개의 색으로 요약해 주는데, 그 값은 묶여 있어서 여기서 누른 값과 조금 다를 수 있어요.

작업별 도구 12
함께 쓰는 도구 13
무료 이미지 색상 추출 사용 방법
  1. 보라색 버튼이 있는 PNG 같은 스크린샷이나 로고 파일을 불러와요.
  2. 가장자리와 그라데이션을 피해 꽉 찬 영역의 가운데를 눌러요.
  3. HEX와 rgb 줄을 읽어요. 예를 들면 #C86432와 rgb(200, 100, 50)이에요.
  4. CSS나 디자인 도구가 원하는 형식 옆의 복사 버튼을 눌러요.

빠른 안내

고른 색이 평균인가요, 정확한 픽셀 하나인가요?

미리보기가 축소되어 있어도 이미지의 실제 해상도에서 정확한 픽셀 하나예요. 평균은 적용되지 않아요.

rgb(200, 100, 50)의 HEX 코드는 뭔가요?

#C86432예요. 16진수로 빨강 200은 C8, 초록 100은 64, 파랑 50은 32예요.

같은 하늘을 두 번 눌렀는데 코드가 조금 다른 이유는 뭔가요?

센서 노이즈와 JPG 압축이 픽셀마다 달라서예요. 여러 곳을 찍어 가운데 값을 쓰세요.

가장자리 픽셀은 왜 탁한 색인가요?

안티앨리어싱이 두 색 사이의 경계를 섞기 때문이에요. 도형의 꽉 찬 안쪽을 누르세요.