이미지에서 색상 코드 추출

주요 기능

• 11 × 11픽셀 돋보기

  마우스를 올리거나 터치 화면에서 누른 채 끌면, 돋보기가 11 × 11픽셀 격자를 보여 주고 대상 픽셀을 상자로 표시하며 그 아래에 HEX 코드를 적어 줍니다. 컴퓨터에서는 포인터 옆에, 휴대폰에서는 손가락 위에 나타나므로 어느 이웃 픽셀을 고르게 될지 미리 볼 수 있습니다.

• 네 가지 형식, 줄마다 복사 버튼

  고른 색은 HEX, RGB, HSL, CMYK로 나열되고, 줄마다 복사 버튼이 따로 있습니다. 반투명 픽셀은 8자리 HEX와 RGBA, HSLA 값이 나오고, 불투명도는 퍼센트로 적힙니다.

• 최근 색 12개

  ‘최근 색상’에는 최근에 고른 12개가 남고, 이 브라우저에는 HEX 코드만 저장됩니다. 하나를 누르면 다시 불러와 복사할 수 있고, ‘지우기’를 누르면 목록이 비워집니다.

• 비율이 붙은 주요 색상

  팔레트는 대표 색 5개에서 10개를 찾아내며 처음에는 6개입니다. 색마다 이미지에서 차지하는 비율이 퍼센트로 적히고 비례하는 막대로 그려집니다. 계산은 긴 변을 256픽셀로 줄인 사본에서 하며, 대부분 투명한 픽셀은 무시합니다.

• 코드와 슬라이드에 바로 쓰는 팔레트

  CSS로 복사하면 --color-1, --color-2 같은 사용자 지정 속성이 든 :root 블록이 나오고, 각 줄 뒤에 비율이 주석으로 붙습니다. PNG에는 색마다 견본 하나와 그 아래에 HEX 코드와 비율이 들어가며, 파일 이름은 내 파일 이름 뒤에 -palette가 붙습니다.

• 화면 어디서든 추출

  스포이트를 지원하는 브라우저, 주로 컴퓨터의 크롬과 엣지에서는 ‘화면에서 색 추출’이 열어 둔 이미지뿐 아니라 다른 창이나 웹페이지처럼 화면에 보이는 어떤 픽셀이든 읽습니다. 이미지를 열기 전에도 쓸 수 있고, 고른 색은 다른 방식으로 고른 색과 마찬가지로 ‘추출한 색’과 최근 목록에 들어갑니다.