이미지에서 색상 코드 찾는 방법

정확한 색상 코드를 알아내는 일은 디자인 작업에서 수시로 필요합니다. 참고한 로고의 색을 그대로 쓰거나, 영감을 받은 사진에서 팔레트를 뽑거나, 여러 제작물 사이에서 브랜드 색을 맞추어야 할 때 모두 그렇죠. 파일을 가지고 있는지, 색이 웹사이트에 있는지, 휴대폰으로 찍은 사진인지에 따라 가장 빠른 방법이 달라집니다.

색상 코드 형식 이해하기

방법을 보기 전에, 디지털에서 색을 표현하는 대표적인 형식부터 알아 두면 좋습니다.

HEX와 RGB는 같은 정보를 다른 방식으로 적은 것뿐이라 언제든 서로 변환할 수 있습니다. HSL은 색을 색상·채도·명도로 나누어 표현해서 손으로 조정할 때 훨씬 직관적입니다. CMYK는 인쇄 전용입니다.

방법 1: 온라인 색상 추출 도구(가장 빠름)

이미지 전체의 주요 색을 파악하거나 특정 픽셀의 색을 정확히 잡으려면 온라인 추출 도구가 가장 간편합니다. 이미지를 올리기만 하면 가장 많이 쓰인 색을 자동으로 찾아서 HEX 코드까지 바로 복사할 수 있게 보여 줍니다.

ImageTools의 색상 추출 도구는 어떤 사진이든 분석해 주요 색과 HEX 코드를 알려 줍니다. 모든 처리가 브라우저 안에서 이뤄져, 이미지가 기기 밖으로 나가지 않습니다.

1. 색상 추출 도구를 엽니다.
2. 이미지를 올리거나 파일을 지정된 영역으로 끌어다 놓습니다.
3. 도구가 이미지에서 가장 많이 쓰인 색을 자동으로 찾아냅니다.
4. 색을 클릭하면 HEX 코드가 복사됩니다.

방법 2: 브라우저 스포이트(Chrome DevTools)

찾으려는 색이 웹사이트에 있다면, 즉 페이지 배경이나 버튼, 로고의 색이라면 Chrome의 내장 기능으로 바로 확인할 수 있습니다.

1. Google Chrome으로 해당 사이트를 엽니다.
2. F12를 누릅니다(또는 오른쪽 클릭 후 "검사"를 선택).
3. DevTools 패널 왼쪽 위의 커서 아이콘을 클릭합니다(또는 Ctrl+Shift+C).
4. 페이지의 요소 위에 마우스를 올리면 CSS 속성과 함께 HEX나 RGB 값이 표시됩니다.
5. CSS 패널의 색상 값 옆에 있는 색 상자를 클릭하면 시각적인 색 선택기가 열립니다.

Chrome DevTools에는 Color Picker도 내장되어 있습니다. CSS 스타일 패널에서 색 상자를 누르면 스펙트럼을 훑어보면서 HEX, RGB, HSL, HSLA 값을 동시에 확인할 수 있습니다.

방법 3: Canva의 스포이트

Canva로 작업 중이고, 프로젝트에 이미 올린 이미지에서 색을 가져오고 싶다면 이렇게 합니다.

1. 색을 바꿀 요소(텍스트, 도형, 배경)를 선택합니다.
2. 사이드 패널에서 그 요소의 색을 눌러 색 선택기를 엽니다.
3. 선택기 안의 스포이트 아이콘을 누릅니다.
4. 캔버스의 이미지 위 아무 지점이나 클릭하면 그 픽셀의 색이 그대로 복사됩니다.
5. 선택기의 입력란에 HEX 코드가 표시됩니다.

방법 4: 포토샵과 일러스트레이터의 스포이트

Photoshop

이미지를 열고 스포이트 도구를 선택합니다(단축키 I). 이미지의 원하는 지점을 클릭하면 도구 패널의 색상 상자에 그 색이 들어갑니다. HEX 값을 보려면 색상 상자를 더블클릭해 Color Picker를 열면 되며, 오른쪽 아래 칸에 표시됩니다.

Illustrator

파일을 열고 개체를 선택한 뒤, 도구 패널에서 칠하기나 테두리 색을 클릭합니다. 열린 Color Picker의 아래쪽 칸에 HEX 코드가 있습니다. 또는 스포이트 도구(단축키 I)로 캔버스 아무 지점의 색을 가져올 수도 있습니다.

방법 5: 브라우저 확장 프로그램 ColorZilla

ColorZilla는 Chrome과 Firefox용 확장 프로그램로, 브라우저에 상시 스포이트를 붙여 줍니다. 설치하면 다음을 할 수 있습니다.

• 어느 사이트의 어느 픽셀이든 클릭 한 번으로 가져옵니다.
• HEX, RGB, HSL 값을 그 자리에서 확인합니다.
• 클릭 한 번으로 값을 복사합니다.
• 최근에 가져온 색의 기록을 다시 봅니다.

사이트에서 색을 자주 가져와야 하는 사람에게는 매번 DevTools를 여는 것보다 훨씬 편합니다.

방법 6: 휴대폰 색상 측정 앱

벽 색, 제품 색, 패키지 색처럼 실물의 색을 알아내거나 휴대폰 속 이미지를 분석할 때 쓸 만한 앱도 있습니다.

• Color Grab(Android) — 카메라를 비추면 표면의 HEX 코드를 실시간으로 읽습니다.
• Palette Cam(iOS/Android) — 방금 찍은 사진이나 갤러리 사진에서 팔레트 전체를 뽑아냅니다.
• Canva(iOS/Android) — 모바일 버전의 스포이트도 불러온 이미지에 그대로 쓸 수 있습니다.

찾은 색상 코드 활용하기

HEX 코드를 알아냈다면 보통 이런 식으로 씁니다.

CSS·웹 개발에서

color: #3ecf8e;나 background-color: #3ecf8e;처럼 그대로 쓰면 됩니다. 더 밝거나 어두운 변형이 필요하면 HSL을 쓰세요. HEX 값을 손으로 고치는 것보다 명도 조절이 훨씬 직관적입니다.

Canva·Figma·Adobe에서

요소의 색상 입력란에 HEX 코드를 붙여넣기만 하면 됩니다. 주요 디자인 도구는 모두 HEX를 그대로 받습니다.

팔레트 전체를 만들 때

기준색만 정해지면 컬러 팔레트 도구가 보색, 유사색, 삼각 배색, 단색 조합을 자동으로 만들어 줍니다. HEX, RGB, HSL 코드가 모두 함께 나옵니다.

인쇄할 때

인쇄소에 넘기기 전에 HEX를 CMYK로 변환하세요. 화면색(RGB·HEX)과 인쇄색(CMYK)은 표현 범위가 달라서, 모니터에서 똑같아 보이던 색도 인쇄물에서는 눈에 띄게 달라질 수 있습니다. Adobe Illustrator나 Affinity Designer는 인쇄용으로 내보낼 때 이 변환을 자동으로 처리합니다.

뽑은 색이 생각과 다를 수 있는 이유

짚고 넘어가기 쉬운 점이 하나 있습니다. 사진 이미지에서 한 영역이 완벽하게 균일한 색으로 되어 있는 경우는 거의 없습니다. 한 덩어리 파랑처럼 보이는 곳도 조명, JPG 압축, 카메라 노이즈 때문에 픽셀마다 미세하게 다릅니다. 스포이트는 특정 픽셀의 정확한 색을 집어 오기 때문에, 여러분이 머릿속에 그린 "그 파랑"과 살짝 다를 수 있습니다.

사진 영역이라면 픽셀 하나를 집기보다, 색상 추출 도구처럼 영역의 대표색을 계산해 주는 방식이 낫습니다. 그래야 그 이미지를 잘 대변하는, 디자인에 쓰기 좋은 색이 나옵니다.

자주 묻는 질문