이미지 컬러 팔레트 생성기

사진을 올리면 3~10색 팔레트와 색이 있는 자리가 함께 나옵니다: 예시 사진의 대표 6색은 #ADB7B3, #D1CBC2, #0C464B, #F1BB8C, #251E1E, #F7E9DE

위 도구는 고른 사진을 브라우저 안에서 작은 칸으로 나눠 읽고, 서로 뚜렷하게 다른 색을 3~10개 골라 팔레트 카드로 보여 줍니다. 첫 화면의 해변 노을 사진에서는 하늘의 회청색 #ADB7B3(32%)과 구름의 베이지 회색 #D1CBC2(25%)가 가장 넓고, 바다의 짙은 청록 #0C464B, 노을빛 #F1BB8C, 바위의 검은 갈색 #251E1E, 해 둘레의 밝은 하늘 #F7E9DE가 뒤를 잇습니다.

카드 사진 위의 점은 그 색이 사진에 실제로 있는 자리입니다. 뽑힌 색이 마음에 들지 않으면 점을 원하는 곳으로 끌면 그 자리의 색으로 바뀌고, 목록의 색에 마우스를 올리면 사진에서 그 색으로 묶인 곳만 밝아집니다. 같은 사진이라도 '대표 색', '선명한 색', '차분한 색' 가운데 무엇을 고르느냐에 따라 전혀 다른 팔레트가 나옵니다. 완성한 카드는 폴라로이드·세로 3:4·스토리 9:16·가로 16:9 모양의 실제 크기 PNG로 저장하고, HEX 목록과 CSS 변수로도 복사할 수 있습니다. 사진은 이 브라우저 안에서만 읽고 서버로 보내지 않습니다.

사진에서 팔레트를 뽑는 때

색을 처음부터 고르기보다 마음에 드는 사진 한 장에서 시작하면 색끼리 잘 어울리는 조합을 빨리 얻을 수 있습니다. 사진 속 색은 같은 빛 아래에서 함께 찍힌 색이라 서로 동떨어진 색이 드물기 때문입니다. 이런 때 씁니다.

• 블로그·채널·작은 브랜드의 기본 색을 정할 때: 분위기를 담은 사진에서 차분한 색 3~4개를 뽑아 바탕과 글자색 후보로 두고, 선명한 색 하나를 버튼이나 강조색으로 씁니다. 점이 가리키는 자리를 보면 그 색이 사진의 어느 부분에서 왔는지 다른 사람에게도 설명할 수 있습니다.
• 썸네일·카드 뉴스·발표 표지를 사진과 맞출 때: 사진 옆에 올릴 제목 띠나 배경을 그 사진에서 뽑은 색으로 칠하면 사진과 글자가 따로 놀지 않습니다. 가로 16:9 카드는 사진 옆에 색 띠가 붙어 있어 그대로 슬라이드 표지 시안으로 쓸 수 있습니다.
• 여행·풍경 사진의 색 조합을 기록하고 나눌 때: 폴라로이드나 스토리 카드로 저장하면 사진과 색 코드가 한 장에 담겨, 나중에 다시 찾거나 다른 사람에게 보내기 쉽습니다.
• 인테리어·옷·소품 색을 고를 때 참고할 때: 마음에 드는 공간 사진에서 벽·바닥·가구의 색을 나눠 보면 어떤 비율로 색이 쓰였는지 점유율로 가늠할 수 있습니다. 다만 화면의 색은 실제 페인트나 옷감과 다르게 보일 수 있으니, 고를 때는 실물 견본과 대조해야 합니다.

쓰는 법

1. 사진 올리기: '사진 고르기'를 누르거나 파일을 작업면에 끌어다 놓거나, 복사한 이미지를 Ctrl+V(⌘V)로 붙여 넣습니다. 첫 화면에는 예시 사진이 들어 있어 바로 써 볼 수 있습니다.
2. 뽑는 성격 고르기: 세 성격의 띠가 지금 색 수로 미리 뽑혀 있으니, 띠를 비교해 마음에 드는 쪽을 누릅니다.
3. 색 수와 차례 정하기: 색 수는 −·+ 버튼으로 3~10개 사이에서 바꿉니다. 차례는 넓은 순·밝은 순·색상 순 가운데 고르며, 카드와 목록이 같은 차례로 바뀝니다.
4. 점으로 다듬기: 원하는 색이 빠졌다면 가장 비슷한 색의 점을 그 색이 있는 곳으로 끕니다. 키보드로는 점을 Tab으로 고른 뒤 화살표 키로 한 칸씩, Shift+화살표로 열 칸씩 옮깁니다. 직접 옮긴 색에는 '직접 고름' 표시가 붙고, '자동으로 되돌리기'로 처음 결과로 돌아갑니다.
5. 카드 모양 고르기: 폴라로이드·세로 3:4·스토리 9:16·가로 16:9 가운데 고르고, 카드에 HEX 코드와 색 자리 점을 넣을지 정합니다. 카드 모양 옆에 저장될 크기가 픽셀로 적힙니다.
6. 저장·복사: 'PNG 카드 저장'은 미리 보기와 같은 카드를 실제 크기로 저장합니다. 'HEX 복사'는 한 줄에 하나씩, 'CSS 변수 복사'는 --palette-1: #ADB7B3; 같은 줄을 만들고, 목록의 색을 누르면 그 색의 HEX 하나만 복사됩니다.

대표·선명·차분: 같은 사진에서 다른 팔레트가 나오는 이유

세 성격은 같은 후보 색 32개에서 고르되 고르는 차례만 다릅니다. '대표 색'은 사진에서 넓게 차지한 후보부터, '선명한 색'은 사진의 0.3% 이상을 차지한 후보 가운데 채도가 높은 후보부터, '차분한 색'은 채도가 0.015~0.09인 은은한 후보 가운데 넓은 후보부터 고릅니다. 채도는 OkLCh의 C, 곧 Oklab의 a·b 두 축으로 잰 거리(√(a² + b²))입니다. 아래 표는 예시 사진에서 성격마다 6색을 뽑아 넓은 순으로 놓은 결과입니다.

대표 색에는 하늘·구름·바다·바위처럼 넓은 면의 색이 들어가고, 선명한 색에는 노을의 주황과 파도의 청록 계열이 몰립니다. 차분한 색에는 물기 어린 회청색과 모래·구름의 베이지가 들어갑니다. 선명한 색의 1위 #EAAD7F가 56%나 되는 것은, 점유율을 '사진의 모든 칸을 고른 색 가운데 가장 가까운 색에 넣어 센 비율'로 계산하기 때문입니다. 선명한 색 6개에는 회색이 없으니 하늘과 구름의 칸이 가장 가까운 주황에 함께 들어갑니다. 그래서 같은 #F1BB8C도 대표 색에서는 12%, 차분한 색에서는 11%로 조금 다르게 나옵니다.

색을 고르는 계산

1. 칸으로 나누기: 사진을 긴 변 256칸으로 나눠(예시 사진은 256 × 170칸) 칸마다 픽셀의 평균을 냅니다. 긴 변이 256 px보다 큰 사진은 칸 하나에 여러 픽셀이 들어가므로 JPEG 압축에서 생긴 낱낱의 잡티가 칸 평균에서 걸러집니다(256 px 이하인 그림은 칸이 곧 픽셀입니다). 반쯤 넘게 투명한 칸은 세지 않습니다.
2. 후보 32색 만들기: median cut(Heckbert 1982)으로 칸 색을 32묶음으로 나눈 뒤, Oklab에서 가장 가까운 묶음으로 다시 넣는 다듬기(k-means, Lloyd 1982)를 4번 합니다. Oklab은 사람 눈에 비슷해 보이는 차이가 비슷한 거리가 되도록 만든 색 공간입니다.
3. 후보마다 실제 자리 찾기: 그 후보에 든 칸 가운데 둘레 8칸도 모두 같은 후보인 '안쪽 칸'에서 후보 색과 가장 가까운 칸을 고릅니다. 화면에 보이는 색은 묶음의 평균이 아니라 이 칸의 색이라, 사진에 실제로 있는 색입니다. 점도 이 칸에 찍힙니다. 같은 색의 칸이 여럿이면 면의 경계에서 더 먼 칸을 골라, 로고처럼 한 가지 색으로 칠한 면에서는 점이 면 한가운데에 찍힙니다.
4. 성격대로 차례를 매기고 거르기: 위 표의 차례대로 후보를 보면서, 이미 고른 색과 ΔEOK(Oklab에서 잰 두 색의 거리)가 0.07 이상인 후보만 고릅니다. 예시 사진의 대표 색은 넓이 1위 #D1CBC2(11.0%)를 먼저 고르고, 2위 #E3D6CA(9.3%)와 3위 #C5C0B4(7.6%)는 #D1CBC2와의 거리가 0.040·0.036으로 0.07보다 가까워 건너뜁니다. 4위 #ADB7B3은 0.076 떨어져 있어 두 번째 색이 됩니다.
5. 모자라면 한 번 더: 0.07 기준으로 색 수를 못 채우면 0.035 기준으로 한 번 더 고릅니다. 그래도 모자라면 색을 적게 내고 그 사실을 알립니다. 같은 색을 되풀이해 칸을 채우지 않습니다. 세 가지 색만 쓴 로고는 6색을 골라도 세 가지만 나옵니다.
6. 점유율 세기: 사진의 모든 칸을 고른 색 가운데 Oklab에서 가장 가까운 색에 넣고, 그 칸 수의 비율을 점유율로 씁니다. 점을 옮기면 그 색이 바뀌므로 점유율도 다시 셉니다.

CSS Color 4는 OkLCh에서 0.02를 눈으로 겨우 알아챌 수 있는 차이(JND)로 봅니다. 이 도구의 기준 0.07은 그 3배 반쯤으로, 팔레트에서 서로 다른 색으로 쓰기에 충분히 떨어진 거리로 정한 값입니다. 0.3%·0.015~0.09·0.07·0.035는 모두 이 도구가 정한 기준이고, 표준이 정한 값은 아닙니다. 무작위를 쓰지 않으므로 같은 사진과 같은 설정이면 늘 같은 팔레트가 나옵니다.

점이 가리키는 자리

점은 위 3단계에서 고른 '안쪽 칸'의 가운데입니다. 둘레까지 같은 색인 칸을 고르므로 경계선 위보다 색 면의 안쪽에 찍히는 일이 많습니다. 예시 사진의 대표 6색이 찍힌 자리는 다음과 같습니다. 좌표는 원본(1,440 × 958 px)의 왼쪽 위를 (0, 0)으로 잰 값입니다.

목록의 색에 마우스를 올리거나 Tab으로 초점을 옮기면, 사진에서 그 색에 가장 가깝게 묶인 칸만 밝게 남고 나머지는 어두워집니다. 점유율이 큰 색이 실제로 어디를 차지하는지, 작은 색이 어느 부분에서 왔는지를 한눈에 확인하는 데 씁니다. 점을 끌면 놓는 자리의 칸 색으로 그 색이 바뀌고, 밝아지는 영역과 점유율도 함께 다시 계산됩니다.

카드 모양과 크기

카드는 미리 보기와 같은 모양을 정해진 크기의 PNG로 저장합니다. 사진은 카드의 사진 자리 비율에 맞게 가운데를 잘라 채우고, 남는 자리는 색 칸이 채웁니다. 사진 자리의 비율은 카드마다 정해진 범위 안에서만 사진을 따라가고(아래 표의 '잘리지 않는 사진 비율'), 그 범위를 벗어나는 사진은 가운데를 기준으로 잘립니다. 예를 들어 휴대폰 세로 사진(3:4)을 세로 3:4 카드에 넣으면 사진 자리가 1,080 × 1,110이라 77.1%만 남습니다. 예시 사진(3:2에 가까움)을 넣었을 때의 크기입니다.

폴라로이드는 사진 자리 비율을 4:5~5:4 안에서 사진에 맞추므로, 3:2 사진은 양옆이 조금 잘립니다. HEX 코드를 빼면 아래 글자 줄이 없어져 높이가 60 px 줄어듭니다. 세로 3:4는 인스타그램 도움말을 따랐습니다. 도움말에는 사진을 가로 1,080 px로 올리고, 비율이 1.91:1에서 3:4 사이(세로 566~1,440 px)이면 원래 해상도를 유지한다고 적혀 있습니다. 1,080 × 1,440은 그 범위에서 가장 긴 세로 크기입니다. 색 칸 위의 HEX 글자는 그 색 위에서 흰 글자와 검은 글자 가운데 WCAG 2.2 명암비가 더 큰 쪽으로 씁니다.

자주 틀리는 경우

• 흰 배경 제품 사진에서 대표 1위가 흰색으로 나온다: 넓이로 고르면 배경이 가장 넓기 때문입니다. 제품의 색을 보려면 '선명한 색'으로 바꾸거나, 사진을 제품 위주로 잘라서 올립니다.
• 사진의 작은 강조색(빨간 우산, 노란 간판)이 빠진다: 대표 색은 넓은 면부터 고르므로 작은 색이 밀립니다. 선명한 색으로 바꾸거나 색 수를 늘리고, 그래도 없으면 비슷한 색의 점을 그 자리로 끌어 옵니다. 사진의 0.3%에 못 미치는 아주 작은 색은 선명한 색에서도 뒤로 밀립니다.
• 같은 색인데 성격마다 점유율이 다르다: 점유율은 함께 고른 색에 따라 달라지는 값입니다. 사진에서 그 색이 차지하는 고정된 넓이로 읽지 않습니다.
• 휴대폰 사진의 색이 사진 앱과 조금 다르다: 최근 휴대폰은 sRGB보다 넓은 색 공간(Display P3 등)으로 찍는 경우가 많은데, 브라우저 캔버스는 기본이 sRGB라 그 범위로 바꿔서 읽습니다. 웹에 쓸 색이라면 이 sRGB 값이 실제로 보일 색에 더 가깝습니다.
• 화면에서 뽑은 색을 그대로 인쇄하거나 페인트로 고른다: HEX는 화면 색입니다. 인쇄할 색은 RGB CMYK 변환기에서 인쇄 조건에 맞춰 바꿔 보고, 페인트·옷감은 실물 견본과 대조합니다.
• 한 점의 정확한 코드가 필요하다: 이 도구의 색은 칸 평균이라 픽셀 하나의 값과 다를 수 있습니다. 로고의 정확한 한 픽셀 값은 이미지 색상 추출기로 찍습니다.

한계와 주의

• 색은 긴 변 256칸의 칸 평균에서 뽑습니다. 칸보다 가는 선이나 작은 글자의 색은 이웃 색과 섞여서 나옵니다.
• 후보는 32색까지라, 아주 좁은 면의 색은 후보에 들지 못할 수 있습니다. 그런 색은 점을 끌어 직접 고릅니다.
• 세 성격의 기준(0.3%, 채도 0.015~0.09)과 거르는 거리(ΔEOK 0.07·0.035)는 이 도구가 정한 값입니다. 다른 팔레트 도구는 다른 방식으로 고르므로 같은 사진에서 다른 색이 나올 수 있습니다.
• 긴 변이 2,048 px보다 큰 사진은 그 크기로 줄여서 읽고 카드에 씁니다. 저장하는 카드는 가장 큰 것이 1,920 px라 화질에는 영향이 거의 없습니다.
• 투명한 부분이 있는 PNG는 반쯤 넘게 투명한 칸을 세지 않고, 카드에서는 흰 바탕 위에 그립니다.
• 카드의 HEX 글자는 기기에 깔린 고정폭 글꼴(Menlo·Consolas 등)로 그려, 기기마다 글자 모양이 조금 다를 수 있습니다.

표의 값은 2026-10-20에 예시 사진(1,440 × 958 px)을 이 도구로 읽은 값입니다. 칸 수·후보 수·거르는 거리·채도 기준은 이 도구의 고정 규칙이고 해마다 바뀌는 기준이 아닙니다. 카드 크기의 근거인 인스타그램 도움말과 CSS Color 4(2026-10-09 판)는 2026-10-20에 확인했습니다.

출처

• 01Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut
• 02Lloyd, S. (1982). Least squares quantization in PCMIEEE Transactions on Information Theory 28(2), 129–137. k-means 다듬기
• 03Björn Ottosson — A perceptual color space for image processing2020-12-23. Oklab(선형 sRGB → LMS → 세제곱근 → Lab)
• 04W3C CSS Color Module Level 4 (CRD 2026-10-09)§9.5 C = √(a² + b²)·H = atan2(b, a), §14.2.1 OkLCh 1 JND = 0.02, §20.3 ΔEOK = Oklab 유클리드 거리
• 05WCAG 2.2 — contrast ratio, relative luminance(L1 + 0.05) ÷ (L2 + 0.05), 색 칸 위 글자색 고르기
• 06Instagram 도움말 — Image resolution of photos you share on Instagram가로 1,080 px, 비율 1.91:1~3:4(세로 566~1,440 px)면 원래 해상도 유지 (2026-10-20 확인)
• 07MDN — HTMLCanvasElement: getContext()2d 컨텍스트 colorSpace 기본값 "srgb"
• 08Wikimedia Commons — Sunset over beach (Unsplash).jpgCharlie Hang, CC0 1.0. 예시 사진(1,440 × 958로 줄임)

자주 묻는 질문

함께 쓰는 도구