이미지 색상 추출

이미지의 주요 색을 HEX, RGB, HSL 코드로 보여 주고, 누른 점의 색 코드를 알려 줍니다. 사진에서 디자인에 쓸 색을 가져오거나 로고 색을 확인할 때 씁니다.

사용 방법

1. 이미지를 끌어다 놓거나 눌러서 고릅니다.
2. '주요 색'에 많이 쓰인 색과 비율이 나옵니다. '색 개수'(5~10색)와 '방식'을 바꿔 볼 수 있습니다.
3. 이미지를 누르거나 끌면 그 점의 색이 '찍은 색'에 나옵니다. 확대해서 찍을 수 있고, '찍는 범위'로 주변 픽셀의 평균을 낼 수도 있습니다.
4. 코드를 누르면 복사됩니다. 팔레트 전체는 'CSS 변수로 복사', 'JSON으로 복사', 'PNG로 저장'으로 가져갑니다.

계산 방식과 참고

• 주요 색은 이미지를 긴 변 최대 256픽셀로 줄인 사본에서 구합니다. 투명한 픽셀은 빼고 셉니다.
• Median cut은 색이 가장 넓게 퍼진 묶음을 중간값에서 둘로 나누기를 반복하는 방식이고, k-means는 묶음의 중심을 여러 번 다시 계산하는 방식입니다. k-means가 조금 더 오래 걸립니다.
• 찍은 색은 최근 30개까지 이 기기의 브라우저에 기록됩니다. 이미지는 전송되지 않습니다.

자주 묻는 질문

사진에서 색상 코드를 알아내려면 어떻게 하나요?

이미지를 올리고 원하는 곳을 누르면 '찍은 색'에 HEX, RGB, HSL 코드가 나옵니다. 코드를 누르면 복사됩니다.

HEX와 RGB는 어떻게 다른가요?

같은 색을 다르게 적은 것입니다. RGB는 빨강, 초록, 파랑을 0~255로 적고, HEX는 이 세 값을 16진수 두 자리씩 이어 씁니다. rgb(255, 0, 0)은 #FF0000입니다.

찍은 색이 화면에서 보이는 색과 조금 달라요.

사진의 픽셀은 바로 옆과도 색이 조금씩 다릅니다. '찍는 범위'를 3 × 3이나 5 × 5픽셀 평균으로 바꾸면 더 고른 값이 나옵니다.

이 페이지 밖의 색도 찍을 수 있나요?

지원하는 브라우저에서만 '화면 어디서나 색 찍기' 버튼이 보입니다. 이 버튼으로 화면의 아무 점이나 눌러 색을 가져옵니다.