스크린샷이 가진 전부일 때가 많다. 사이트의 CSS를 열 수 없고, 앱을 뜯어볼 수 없고, 디자인 파일도 없다. 하지만 화면의 색은 볼 수 있고, 스크린샷은 그것을 샘플링할 수 있는 이미지로 얼려둔다. 거기서 정확한 색 코드를 뽑는 법을 소개한다.
스크린샷이 정직한 원천인 이유
렌더링된 페이지나 앱을 스크린샷하면 색을 실제로 나타나는 그대로 — 모든 그라데이션, 오버레이, 불투명도가 적용된 뒤로 — 담는다. 그것은 종종 원본 값보다 더 진실하다. 회색 배경 위에 90% 불투명도로 #000000으로 정의된 카드는 화면에서 검정이 아니다. 어떤 특정한 짙은 회색이다. 코드를 뜯어보면 레시피를 주고, 스크린샷을 샘플링하면 사용자가 정말 보는 색을 준다. 그 모습을 맞출 때 읽어야 할 것은 스크린샷이다.
세 단계로 색 뽑기
- 스크린샷을 찍고 불러온다. 화면(또는 관심 영역)을 캡처하고 이미지를 추출기에 놓는다.
- 픽셀 위로 호버한다. 돋보기 루페가 커서를 따라다니며 그 아래 영역을 확대하므로, 얇은 테두리나 작은 아이콘 위에도 정확히 착지할 수 있다.
- 클릭해 저장하고, 복사한다. 클릭할 때마다 색이 HEX, RGB, HSL과 함께 견본으로 보관되고, 각각에 복사 버튼이 있다. 필요한 형식을 복사해 스타일시트나 디자인 도구에 붙여넣는다.
스크린샷 특유의 주의할 점
스크린샷에는 색 샘플을 어긋나게 할 수 있는 특성이 있는데, 알고 나면 피하기 쉽다:
- JPEG가 아니라 PNG로 저장하라. JPEG 압축은 색을 살짝 뭉갠다. 특히 가장자리 근처와 평평한 영역에서 그래서 샘플링한 값이 진짜 값에서 벗어날 수 있다. PNG는 무손실이라 각 픽셀을 정확히 유지한다. 대부분의 OS 스크린샷 도구는 이미 PNG를 기본값으로 쓴다.
- 확대 배율에 유의하라. 브라우저나 OS 확대가 100%가 아닐 때 찍은 스크린샷은 배율이 조정되고, 배율 조정은 이웃 픽셀을 섞는다. 가장 깨끗한 샘플을 위해 100%에서 캡처하라.
- 가장자리와 텍스트를 피하라. 안티앨리어싱은 가장자리를 따라 있는 픽셀이 진짜 색이 아니라 혼합임을 뜻한다. 단색 영역의 한가운데에서 샘플링하라. 루페가 흐릿한 경계에서 벗어났음을 보는 데 도움을 준다.
- 서브픽셀 텍스트 색에 주의하라. 렌더링된 텍스트를 확대하면 텍스트의 진짜 값이 아닌 색의 테두리가 보인다. 글자 획이 아니라 채움과 배경에서 색을 뽑아라.
HEX, RGB, HSL 읽기
모든 견본이 세 형식을 한꺼번에 보여준다:
- HEX (
#3A7BD5) — CSS와 디자인 도구의 기본값. - RGB (
rgb(58, 123, 213)) — 채널 값,rgba투명도가 필요할 때 편리. - HSL (
hsl(215, 65%, 53%)) — 색조, 채도, 명도, 색을 정확히 복사하기보다 조정하고 싶을 때 최적.
전환하려고 다시 샘플링할 필요 없다. 같은 색이 이미 세 형식 모두에 있다.
한 번에 전체 배색 뽑기
스크린샷 하나에서 전체 배색을 재구성할 수 있다. 헤더 색, 버튼, 링크, 배경, 흐린 텍스트를 클릭한다. 각각이 목록에 쌓이므로 한 번에 전체 세트를 뽑아 순서대로 복사할 수 있다.
만약 대신 이미지의 전반적 팔레트를 요약받고 싶다면 — 지배적인 몇 가지 톤 — 그건 별개의 일이고, img.diy의 팔레트 도구가 자동 추출한다. 이 추출기는 스크린샷의 특정 픽셀을 가리키기 위한 것이고, 팔레트 도구는 이미지 전체를 특징짓기 위한 것이다.
아무것도 기기를 떠나지 않는다
스크린샷에는 업로드하고 싶지 않은 것 — 내부 대시보드, 비공개 초안, 고객의 미출시 UI — 이 담기는 일이 많다. 여기서 이미지는 브라우저에서 캔버스로 로컬로 읽힌다. 아무것도 어디로도 보내지지 않고, 계정도 없고, 첫 로드 이후 오프라인에서 작동한다. 스크린샷이 기기를 떠나는 일 없이 색을 얻는다.
스크린샷을 찍고, 픽셀 위로 호버하고, 클릭하고, 복사하라.