사진에서 색상 코드(HEX) 뽑는 방법: 대표 색과 CSS 변수까지

2026-11-08

사진에서 대표 색을 HEX, RGB, HSL 값으로 뽑는 방법을 설명합니다. 원하는 지점의 색을 집어 복사하고, CSS 변수로 한 번에 가져가는 방법까지 정리했습니다.

어떤 때 쓰나

사진의 분위기 색을 디자인에 가져갈 때, 로고나 제품 사진에서 정확한 색 코드를 알아야 할 때 씁니다. 사진 한 장에서 대표 색을 뽑고, 원하는 지점의 색을 정확히 집을 수 있습니다.

1. 색상 팔레트 도구에 사진을 올립니다.

2. "뽑을 색 개수" 슬라이더로 3개에서 12개 사이를 정합니다.

3. "대표 색" 목록을 봅니다. 비중이 큰 색이 위에 나오고, 색마다 HEX, RGB, HSL 값이 함께 나옵니다.

4. 원하는 색을 누르면 HEX 값이 복사됩니다.

이미지의 원하는 곳을 누르면 그 자리의 색이 HEX, RGB, HSL로 나옵니다. "HEX 복사"를 누르면 복사됩니다. 투명한 지점은 집히지 않습니다.

"CSS 변수로 복사"의 "복사"를 누르면 :root 안에 --color-1, --color-2처럼 이름이 붙은 코드가 한꺼번에 복사됩니다. 스타일 시트에 그대로 붙여 넣어 쓸 수 있습니다.

비슷한 색은 묶어서 평균으로 보여 주므로, 결과가 한 픽셀의 정확한 색과 조금 다를 수 있습니다. 정확한 값이 필요하면 그 자리를 직접 눌러 확인하세요.
분석은 긴 변 200px로 줄인 복사본에서 하므로 빠르고, 사진은 서버로 보내지 않습니다.
화면에 보이는 색은 모니터와 색 프로필에 따라 다르게 보일 수 있습니다.