화면·사진 속 색상 코드 알아내는 법 — 스포이드와 색 추출
"로고에 쓴 그 색 그대로 해 주세요", "이 사진 분위기로 배색해 주세요" — 디자인 요청은 결국 색을 코드로 바꾸는 일에서 시작합니다. 눈대중으로 비슷한 색을 고르면 미묘하게 어긋나죠. 사진과 화면에서 정확한 색상 코드를 뽑는 방법을 상황별로 정리합니다.
왜 코드로 주고받아야 하나
"하늘색"이라는 말은 사람마다 다르게 들리지만 #87CEEB는 어디서나 같은 색입니다. 색상 코드(HEX·RGB)는 디자이너·개발자·인쇄소가 색을 오차 없이 주고받는 공용어입니다. 브랜드 컬러를 한 번 코드로 정해 두면 명함·웹사이트·발표 자료의 색이 늘 일치합니다.
사진·로고에서 색 뽑기
- 색을 알고 싶은 이미지(로고·사진·캡처)를 준비합니다.
- 이미지 색 추출 도구에 올리면 대표 색 팔레트가 HEX 코드와 함께 표시됩니다.
- 원하는 색의 코드를 복사합니다 — 특정 지점의 색이 필요하면 그 부분을 잘라 다시 올리면 더 정확합니다.
화면 위의 색 따기 — 스포이드
- 가장 간단하게: 화면을 캡처(윈도우
Win+Shift+S, 맥Cmd+Shift+4)해서 위의 색 추출 도구에 올립니다. - 윈도우: PowerToys의 색 선택기(
Win+Shift+C)가 마우스가 가리키는 픽셀의 코드를 바로 보여 줍니다. - 맥: 기본 내장 앱 '디지털 컬러 측정기'로 화면 어디든 측정할 수 있습니다.
- 웹사이트 색: 크롬 개발자 도구(F12)에서 요소의 색상 네모를 클릭하면 스포이드가 떠서 페이지 위 색을 집을 수 있습니다.
뽑은 색 변환·활용하기
- HEX → RGB: CSS에서 투명도가 필요하면
rgba(135, 206, 235, .5)처럼 RGB에 알파 값을 더해 씁니다. - HEX → HSL: 같은 색의 밝은/어두운 변형(버튼 호버 색 등)을 만들 땐 HSL로 바꿔 명도(L)만 올리고 내리는 것이 가장 깔끔합니다.
- 변환은 컬러 피커·색상 변환에 코드를 붙여 넣으면 세 형식이 동시에 나옵니다.
이미지 색 추출 도구에 사진을 올리는 것입니다. 사진에서 면적을 많이 차지하는 대표 색들이 팔레트로 정리되고, 각 색의 HEX 코드를 바로 복사할 수 있습니다. 특정 지점의 색이 필요하면 그 부분이 크게 보이도록 이미지를 잘라 올리면 더 정확하게 잡힙니다.
가장 간단한 방법은 화면을 캡처해 색 추출 도구에 올리는 것입니다. 더 정밀하게 따려면 운영체제·브라우저의 스포이드를 쓸 수 있습니다. 윈도우는 PowerToys의 색 선택기(Win+Shift+C), 맥은 기본 내장된 '디지털 컬러 측정기'가 화면 위 어느 픽셀이든 코드로 보여 줍니다. 크롬 개발자 도구의 색상 칸을 클릭해도 스포이드가 나타납니다.
컬러 피커·색상 변환 도구에 HEX 코드를 붙여 넣으면 RGB·HSL 값이 동시에 표시됩니다. CSS에서 투명도가 필요하면 RGB 값에 알파를 더한 rgba()로 쓰고, 같은 색의 밝기 변형(호버 색 등)을 만들 때는 HSL로 바꿔 명도(L)만 조절하는 것이 편리합니다.