이미지에서 색상 팔레트

사진에서 팔레트를 만든다는 것

디자인을 해 본 사람이라면 다 겪어 봤습니다. 어떤 사진이 프로젝트에 딱 필요한 분위기를 갖고 있고, 할 일은 그 분위기를 사진에서 꺼내 스타일시트에 옮기는 것입니다.

짐작으로는 안 됩니다. 화면에서 '따뜻한 회색'으로 보이는 색은, 직접 타이핑했을 그 회색인 경우가 거의 없습니다. 정확히 맞추는 방법은 실제 픽셀을 가져오는 것뿐입니다.

사진을 놓고, 돋보기로 훑으며, 원하는 색을 누르세요. 하나하나가 아래 팔레트에 담기고, HEX·RGB·HSL 값이 복사할 수 있는 상태로 함께 나옵니다.

사용 방법

• 눌러서 올리기를 누르거나, 사진을 페이지에 놓거나, 이미지 주소를 붙여 넣습니다
• 포인터를 사진 위로 움직입니다. 돋보기가 그 아래 픽셀을 보여 줍니다
• 클릭하면 그 색이 팔레트에 담깁니다
• 필요한 만큼 고르세요. 다섯이나 여섯이면 보통 팔레트가 됩니다
• 팔레트의 색 견본을 누르면 그 색으로 돌아갑니다. 큰 견본과 HEX·RGB·HSL 값이 모두 그 색으로 바뀌고, HEX가 복사됩니다
• HEX / RGB / HSL 복사로 필요한 형식을 가져가세요

색을 직접 고르는 이유

가장 많이 쓰인 색을 묶어 팔레트를 자동으로 추측하는 도구도 있습니다. 듣기만큼 좋지는 않습니다. 사진에서 가장 *많은* 색은 대개 하늘, 벽, 그림자 같은 크고 둔한 면입니다. 그리고 그 사진의 성격을 실제로 만들어 내는 색은 문에 슨 녹, 잎 하나의 초록, 컵에 앉은 하이라이트처럼 작은 경우가 많습니다.

어느 쪽인지는 눈으로 보면 압니다. 돋보기는 최대 배율에서 바로 그 픽셀을 집게 해 주므로, 팔레트는 평균이 만들어 낸 것이 아니라 여러분이 의도한 것이 됩니다.

팔레트는 다시 돌아올 수 있는 곳입니다

견본은 무엇을 눌렀는지에 대한 기록만이 아닙니다. 하나를 누르면 그것이 현재 색이 됩니다 — 큰 견본과 세 가지 값이 모두 그 색으로 바뀌고, 지금 보고 있는 견본에는 테두리가 생겨 어느 것인지 알 수 있습니다.

두 색조를 비교하는 일이 현실적으로 되는 것도 그래서입니다. 사진에서 둘 다 가져다 놓고 그다음에는 오가며 눌러 값을 읽으면 됩니다. 조금 전에 집었던 픽셀을 이미지에서 다시 찾아 헤맬 필요가 없습니다.

형식이 세 가지인 것은 쓰이는 곳이 다르기 때문입니다

고른 색은 언제나 세 가지로 동시에 표시됩니다.

• HEX — #3f7a5e. CSS, 디자인 도구, 거의 어디서나
• RGB — rgb(63, 122, 94). 채널을 따로 다뤄야 할 때 편리합니다
• HSL — hsl(154, 32%, 36%). 단계를 만들 때 쓰는 형식입니다. 색상은 그대로 두고 밝기만 옮기면, 서로 어울리는 밝은 색과 어두운 색을 얻습니다

이런 때 씁니다

• 브랜드 지침을 아무도 못 찾을 때 로고에서 브랜드 색 꺼내기
• 대표 사진에서 웹사이트나 슬라이드 배색 만들기
• 실물 사진에 맞춰 페인트, 원단, 실 고르기
• 화면 캡처 속 색의 정확한 HEX 얻기
• 참고하려는 그림이나 사진의 색 찾기
• 옆 색과 비교했을 때의 인상이 아니라, 그 색이 실제로 무엇인지 확인하기

알아 두면 좋은 점

• 업로드는 없습니다. 이미지는 페이지 안에서 읽히고 기기를 떠나지 않습니다
• PNG, JPG, GIF, WebP를 지원합니다
• 파일 대신 이미지 주소를 붙여 넣을 수도 있습니다. 다만 일부 서버는 다른 사이트가 픽셀을 읽는 것을 막습니다(CORS). 그럴 때는 이미지를 내려받아 파일로 올리세요
• 색은 축소된 미리보기가 아니라 원래 크기의 실제 픽셀에서 읽으므로 값이 정확합니다
• 컴퓨터와 마찬가지로 휴대폰과 태블릿에서도 작동합니다
• 이미지 색상 추출기와 같은 도구입니다. 한 가지 색만 필요하다면 그 페이지를 쓰세요

관련 도구

• 이미지 색상 추출기 — 같은 도구를 한 가지 색에 맞춰 담은 것
• 색상 선택기 — 사진이 아니라 색상환에서 고르기
• 색 대비 검사 — 내보내기 전에 팔레트가 읽히는지 확인
• CSS 그라데이션 생성기 — 새로 고른 두 색을 그라데이션으로 섞기
• 워드 클라우드 생성기 — 팔레트를 써먹을 또 하나의 곳