이미지 색상 추출 — 전달 절차

입력·출력 예제

색을 다른 사람에게 넘길 때는 용도, HEX, RGB 텍스트, 원본 이미지를 함께 적으세요. 그래야 아무도 숫자의 출처를 짐작할 필요가 없어요.

간단한 표 하나면 충분해요. 용도(주 버튼), HEX(#6D28D9), RGB(109, 40, 217), 출처(logo-v3.png, 큰 도형 중앙)처럼요. 이 도구는 픽셀 좌표를 보여 주지 않으니 위치는 말로 설명하거나 이미지 사본에 표시하세요. 개발자는 HEX를 --brand-primary: #6D28D9; 같은 CSS 사용자 지정 속성에 그대로 붙여 사이트 전체에서 한 곳에서만 정의하면 돼요.

고객이 준 무드 사진으로 사이트를 만드는 작은 에이전시라면, 배경·글자·강조 세 줄을 각각의 원본 파일과 함께 개발자에게 보내면 돼요. 로고가 바뀌면 새 파일에서 같은 클릭을 반복하고 달라진 줄만 고치면 버전끼리 비교하기 쉬워요.

흔한 실수는 이름 없이 캡처나 채팅 메시지로 색을 돌려 보는 거예요. 그러면 누가 다시 뽑을 때마다 색이 조금씩 달라져요. 공유 스타일시트나 디자인 토큰 파일에 값을 저장하고 합의한 이름을 붙이세요.

원본 이미지를 표 옆에 함께 보관하고, 화면 값이 인쇄 값이 아니라는 점도 적어 두세요. 인쇄할 색이라면 HEX가 그대로 변환된다고 가정하지 말고, 같은 견본을 인쇄소에 주고 교정쇄를 요청하세요.

Pixel selected in an image

HEX and RGB values

넘겨주는 HEX와 RGB는 한 이미지 속 픽셀을 설명할 뿐, 공식 브랜드 가이드를 대신하지는 않아요.