사진에서 색 뽑기 (스포이드)

이 도구로 할 수 있는 일

마음에 드는 사진 속 색을 디자인이나 블로그 꾸미기, 옷 · 페인트 색 맞추기에 쓰고 싶을 때가 있어요. 이 도구는 사진에서 누른 점의 색을 HEX(#8ECAE6 같은 코드), RGB, HSL 세 가지로 알려 주고, '밝은 파랑'처럼 한국어 색 이름도 붙여 줘요.

사진 전체에서 많이 쓰인 색을 골라 팔레트로 보여 주기도 해요. 색마다 사진에서 차지하는 비율이 나오고, 팔레트를 HEX 목록이나 CSS 변수로 한 번에 복사할 수 있어요.

사용 방법

1. '사진 고르기'를 누르거나 사진을 끌어다 놓아요. 캡처한 이미지는 Ctrl+V로 붙여 넣어도 돼요.
2. 사진 위에서 마우스나 손가락을 움직이면 확대경에 주변 픽셀이 크게 보여요. 원하는 곳을 눌러 색을 뽑아요.
3. 뽑은 색의 HEX · RGB · HSL 옆 '복사'를 눌러 원하는 곳에 붙여 넣어요.
4. 아래 '주요 색'에서 사진의 팔레트를 보고, 개수를 5 · 8 · 12색 가운데 골라요.

HEX, RGB, HSL은 어떻게 다른가요

HEX는 빨강 · 초록 · 파랑의 세기를 16진수 두 자리씩 붙여 쓴 코드로, 웹사이트와 디자인 프로그램에서 가장 많이 써요. RGB는 같은 세 값을 0부터 255까지의 숫자로 적은 것이고, HSL은 색상(0~360도) · 채도 · 밝기로 나눠 적어서 '조금 더 밝게'처럼 고치기 편해요. 세 가지 모두 같은 색을 다르게 적었을 뿐이에요.

사진은 이웃한 픽셀끼리도 색이 조금씩 달라서, 한 점만 누르면 얼룩이나 그림자 색이 뽑힐 수 있어요. 확대경으로 가운데 칸을 보면서 고르거나, 화살표 키로 한 픽셀씩 옮긴 뒤 Enter로 고르면 정확해요.

주요 색은 어떻게 고르나요

사진의 픽셀을 사람 눈이 느끼는 색 차이에 맞춘 공간(CIELAB)에 놓고, 서로 가까운 색끼리 묶어 각 묶음의 평균 색을 뽑아요. 같은 사진에서는 늘 같은 팔레트가 나오고, 거의 같은 두 색은 하나로 합쳐요. 비율은 그 색 묶음이 사진에서 차지하는 넓이예요.

색 이름은 색상 · 밝기 · 선명함으로 '연한 파랑', '짙은 초록'처럼 붙이는 규칙을 써요. 같은 이름이라도 조금씩 다른 색이 있으니, 정확한 색이 필요할 때는 HEX 코드를 쓰세요.

글자를 올려도 잘 읽힐까요

뽑은 색을 배경으로 흰 글자와 검은 글자를 올렸을 때의 대비를 웹 접근성 기준(WCAG)으로 계산해 보여 줘요. 4.5:1 이상이면 본문 글자로 읽기 좋고, 3:1 이상이면 큰 글자(약 24px 이상, 굵으면 약 19px 이상)에 쓸 만해요. 7:1 이상이면 '아주 잘 읽혀요'로 나와요. 두 색을 차례로 뽑으면 두 색 사이의 대비도 함께 나와요.

내 데이터

사진은 이 브라우저 안에서만 열고 색을 읽어요. 어떤 서버로도 보내지 않아요. 다음에 편하도록 최근에 뽑은 색 코드와 팔레트 개수만 이 브라우저에 남겨요.

자주 묻는 질문