어떻게 쓰면 되나요?

Add image 또는 업로드 영역을 눌러 이미지를 고릅니다. 이미지가 캔버스에 표시되면 마우스를 움직여 돋보기로 주변 픽셀을 보고, 원하는 위치를 클릭해 색상을 고정합니다.

클릭한 색은 HEX, RGB, HSL, HSV, CMYK 형식으로 동시에 표시됩니다. 각 줄의 Copy 버튼을 누르면 그 형식만 바로 복사됩니다.

결과를 어떻게 읽나요?

HEX는 CSS와 디자인 토큰에 가장 자주 쓰는 16진수 코드입니다. RGB는 화면 색의 빨강·초록·파랑 값을 0부터 255까지 보여주고, HSL/HSV는 색상 조정 방향을 잡을 때 유용합니다.

• 최근 색은 마지막에 찍은 색부터 한 줄로 남습니다.
• 팔레트는 이미지 전체에서 많이 보이는 색을 따로 묶어 보여줍니다.
• 필요한 값은 각 Copy 버튼으로 바로 복사합니다.

팔레트와 다운로드

주요 색상 팔레트는 캔버스의 픽셀을 샘플링해 비슷한 색끼리 묶고, 많이 보이는 색을 앞쪽에 둡니다. 5개부터 12개까지 선택할 수 있으며, 추출된 색상 카드를 누르면 HEX를 복사합니다.

Download palette는 추출된 팔레트나 마지막 선택 색상을 PNG 이미지로 저장합니다. 문서, 무드보드, 디자인 공유 자료에 붙여 넣기 쉬운 간단한 색상표입니다.

브라우저 처리 기준

이미지는 File API로 현재 브라우저에서만 읽고, Canvas getImageData로 픽셀 값을 확인합니다. 파일은 이 도구 때문에 로베린 서버로 업로드되지 않습니다.

큰 이미지는 성능을 위해 캔버스 미리보기 크기로 다시 그린 뒤 읽습니다. 색상 프로파일, 모니터 설정, 브라우저 디코딩 방식에 따라 사람이 보는 색과 코드 해석이 다르게 느껴질 수 있습니다.

정확하게 찍는 방법

캔버스 위에서 마우스를 움직이면 돋보기 영역이 주변 픽셀을 크게 보여줍니다. 가장자리가 번진 사진이나 그라데이션 이미지는 한두 픽셀 차이로 코드가 달라질 수 있으므로 돋보기를 보고 중심 지점을 고릅니다.

• 아이콘이나 로고처럼 경계가 뚜렷한 이미지는 같은 면 안쪽을 클릭합니다.
• 사진처럼 노이즈가 많은 이미지는 여러 번 찍어 평균적으로 보이는 색을 확인합니다.
• 투명 PNG는 배경 합성 방식에 따라 눈으로 보는 색과 코드가 달라질 수 있습니다.

팔레트 개수 고르기

5개 팔레트는 대표색만 빠르게 볼 때 알맞고, 8개는 웹 페이지나 썸네일 분위기를 잡을 때 균형이 좋습니다. 10개 이상은 사진처럼 색 변화가 많은 이미지에서 보조색을 더 넓게 확인할 때 씁니다.

팔레트는 디자인 확정값이라기보다 후보를 좁히는 출발점입니다. 실제 버튼, 배경, 글자색에 쓰기 전에는 대비와 가독성을 따로 확인하는 편이 안전합니다.

복사와 히스토리 흐름

색을 클릭하면 코드 입력칸이 동시에 바뀌고, 히스토리에 최근 선택 색이 추가됩니다. 같은 이미지에서 여러 후보를 찍은 뒤 히스토리 카드를 비교하면 한 색만 보고 결정할 때보다 톤 차이를 덜 놓칩니다.

• CSS에는 HEX를, 캔버스나 스크립트 작업에는 RGB를 복사하면 편합니다.
• 색상 조정 방향을 설명해야 할 때는 HSL 값을 같이 남기면 좋습니다.
• 히스토리가 복잡해지면 전체 삭제로 현재 작업 기준만 다시 모읍니다.

다운로드 파일 활용

Download palette로 받은 PNG는 색상 칩과 코드가 함께 들어간 간단한 공유용 이미지입니다. 작업 메모, 디자인 피드백, 블로그 글 초안에 붙이면 색상 후보를 텍스트만 보낼 때보다 오해가 적습니다.

팔레트를 추출하지 않은 상태에서는 마지막으로 클릭한 색상만 저장합니다. 여러 색을 한 번에 남기려면 먼저 주요 색상 팔레트를 만든 뒤 내려받습니다.

접근성과 대비 확인

추출한 색이 예쁘게 보여도 본문 글자색이나 버튼 글자색으로 바로 쓰기는 어렵습니다. 배경색과 글자색의 대비가 충분한지, 밝은 화면과 어두운 화면에서 모두 읽히는지 별도로 확인해야 합니다.

이 도구의 보색과 밝기 값은 빠른 판단을 돕는 참고값입니다. 최종 배색은 실제 화면에서 제목, 본문, 버튼, 구분선에 적용해 보고 결정하는 편이 좋습니다.

로컬 처리라서 좋은 경우

시안 캡처, 제품 사진, 아직 공개하지 않은 이미지처럼 외부 업로드가 부담스러운 파일은 브라우저 처리 방식이 잘 맞습니다. 파일을 고르면 현재 탭 안의 캔버스에만 그려지고, 색상 계산도 그 캔버스에서 끝납니다.

다만 브라우저 탭을 닫거나 이미지를 바꾸면 캔버스 상태도 새 작업으로 넘어갑니다. 필요한 색상은 Copy 또는 Download palette로 바로 남겨 두는 것이 안전합니다.