이미지에서 팔레트까지
이미지에서 쓸 수 있는 컬러 팔레트 만드는 법
좋은 이미지 팔레트는 가장 흔한 픽셀 목록이 아닙니다. 이미지의 시각적 이야기를 보존하고 실제 디자인 결정에 쓸 수 있는 작고 편집 가능한 색 체계입니다.
이미지 컬러 팔레트
이미지에서 컬러 팔레트를 어떻게 만드나요?
의도가 분명한 이미지를 선택하고 대표 색을 소수 추출한 다음 결과를 그대로 승인하지 말고 다듬으세요. 주조색, 보조색, 밝은 기준, 어두운 기준, 꼭 필요한 강조색만 남깁니다. Toon Tone은 이미지를 브라우저 안에서 처리해 5색 또는 8색을 만들고, 좋은 색을 잠근 뒤 나머지만 다시 생성할 수 있습니다. HEX, RGB, HSB, CSS, PNG로 내보낸 뒤 실제 배경과 구성 요소에서 확인하고 텍스트 대비는 별도로 검사하세요.
짧은 답
- 선명한 원본을 사용하고 테두리, 워터마크, UI, 불필요한 배경을 잘라냅니다.
- 집중된 정체성에는 5색, 추가 재질과 그림자와 상태가 필요하면 8색을 씁니다.
- 주제를 살리는 색은 잠그고 비슷한 중복색과 노이즈만 다시 생성합니다.
- 정확한 HEX나 RGB를 전달 값으로 저장하고 HSB는 편집 도구로 사용합니다.
- 아름다운 팔레트는 접근성 결과가 아니므로 전경과 배경 대비를 따로 검사합니다.
1색, 5색, 8색 중 무엇을 선택할까
올바른 색 수는 이미지의 픽셀 종류가 아니라 앞으로 내릴 결정에 따라 달라집니다.
| 출력 | 적합한 용도 | 보존할 것 | 주의할 것 |
|---|---|---|---|
| 1개 샘플 색 | 특정 물체나 픽셀 일치 | 좌표와 HEX | 하이라이트나 압축 노이즈일 수 있음 |
| 5색 팔레트 | 브랜드 방향, 간결한 UI, 집중된 일러스트 | 주조, 보조, 밝음, 어두움, 강조 | 유사색이 한정된 역할을 낭비함 |
| 8색 팔레트 | 풍부한 장면, 캐릭터, 데이터, 다중 상태 | 재질, 추가 강조, 그림자 | 역할 이름이 없으면 위계가 약해짐 |
알고리즘보다 먼저 원본 이미지를 준비한다
팔레트 품질은 추출 전에 시작됩니다. 조명이 섞인 사진, 브라우저 UI가 포함된 스크린샷, 압축된 작은 이미지는 주제가 아니라 촬영과 저장 과정의 색을 추가합니다. 실제로 보존하려는 분위기와 정체성이 있는 영역으로 자르고 가능한 한 원본 해상도를 쓰세요. 의도한 빛과 그림자는 남기되 장식 테두리와 무관한 물체는 제외합니다. 같은 제품이 따뜻한 빛과 차가운 빛에서 다르게 보인다면 어떤 모습을 기준으로 할지 먼저 결정해야 합니다. 추출기는 픽셀을 묶을 수 있지만 어느 장면이 디자인 목표를 대표하는지는 선택하지 못합니다.
작은 썸네일로 원본을 보고 생성 전에 기대하는 역할을 말로 적습니다. 예시에서는 코럴이 따뜻한 전경, 짙은 파랑이 구조적 무게, 초록과 노랑이 보조, 보라가 좁은 강조, 따뜻한 중성 배경이 분위기를 담당합니다. 이 역할 지도가 출력의 평가 기준이 됩니다. 비슷한 베이지가 세 개 나오고 코럴이 사라졌다면 픽셀 빈도에는 맞아도 편집 목적에는 틀린 결과입니다. 팔레트는 특정 작업을 위해 이미지를 요약하는 모델이지 눈에 보이는 모든 픽셀의 과학적 재고가 아닙니다.
추출 색을 실제 시스템으로 바꾼다
한 번 생성한 뒤 각 색에 일을 부여하세요. 5색 체계는 대체로 주조색, 한두 개의 보조색, 밝은 기준, 어두운 기준, 강조색이 필요합니다. 일러스트, 브랜드, 인터페이스, 데이터 시각화에 따라 이름은 달라도 위계는 읽혀야 합니다. 주제를 보존하는 색을 잠그고 기존 색을 반복하거나 아주 작은 반사를 잡거나 중성 배경을 과도하게 대표하는 위치만 재생성합니다. 매번 5색이나 8색 전체를 바꾸는 것보다 안정된 색을 남기고 일부만 바꾸면 새 후보를 같은 문맥에서 비교할 수 있습니다.
색 계열이 맞으면 정확한 값을 확인합니다. HEX와 RGB는 브라우저 색을 직접 보존하고 HSB는 색상, 채도, 밝기를 편집하기 쉽습니다. 반올림은 이유가 있을 때만 합니다. 가벼운 무드보드에서는 한 자리 차이가 중요하지 않을 수 있지만 공유 디자인 토큰은 승인된 6자리 HEX를 유지해야 합니다. 출처 이미지, 버전, 자른 범위, 수동 조정한 색도 기록하세요. 이 짧은 이력은 추출된 강조색을 공식 브랜드 색으로 오해하거나 다른 크롭에서 같은 팔레트를 재현하려는 문제를 막습니다.
실제로 사용할 자리에서 검증한다
팔레트를 생성기 밖으로 옮겨 현실적인 미리보기에 놓습니다. 예정된 배경에 텍스트를 올리고 버튼의 기본, 호버, 포커스, 비활성 상태를 보며 일러스트 색은 최종 크기로 확인합니다. 큰 사각형에서 잘 구분되는 색도 2픽셀 선에서는 사라질 수 있습니다. 이웃 색도 지각을 바꿔 같은 회색이 파랑 옆에서는 따뜻하고 주황 옆에서는 차갑게 보입니다. 필요하면 밝고 어두운 테마를 모두 검사하세요. 흰색 추출 화면에서만 작동하는 색은 어두운 캔버스 제품에 아직 준비되지 않은 색입니다.
접근성과 색 충실도에는 별도 방법이 필요합니다. WCAG 2.2 레벨 AA는 일반 텍스트에 4.5:1, 큰 텍스트에 3:1 이상의 대비를 요구하며 같은 아름다운 이미지에서 나온 두 색이라고 자동 통과하지 않습니다. 브라우저 팔레트는 유용한 sRGB 기록이지만 보정된 인쇄 교정은 아닙니다. 텍스트에는 대비 검사기, 이름을 명시한 색 차이에는 Delta E, 물리 출력에는 관리된 인쇄 절차를 사용하세요. 팔레트는 창의적 출발점으로 두고 각 최종 용도는 해당 규칙으로 승인합니다.
5단계 이미지 팔레트 워크플로
참조 이미지를 디자인, 코드, 색 기억 연습에 재현 가능한 팔레트로 바꾸는 순서입니다.
1. 결정을 정의한다
한 색, 집중된 5색, 풍부한 8색 중 실제 용도에 맞는 출력을 먼저 고릅니다.
2. 원본을 준비한다
최선의 파일을 사용하고 불필요한 영역을 자르며 의도한 조명과 편집을 선택합니다.
3. 추출하고 이름 붙인다
주조, 보조, 밝음, 어두움, 강조 및 재질이나 상태 역할을 지정합니다.
4. 잠그고 다듬는다
중요 색을 남기고 중복과 노이즈를 다시 생성하며 보이는 이유가 있을 때만 HSB를 조정합니다.
5. 내보내고 검사한다
정확한 CSS나 HEX와 PNG를 저장하고 문맥, 대비, 색역, 최종 매체를 따로 검증합니다.
브라우저 추출이 증명하는 것과 한계
픽셀 접근과 표준 색 정의가 기술적 기반이지만 이미지 요약은 편집 판단입니다. 공식 자료가 바닥과 경계를 설명합니다.
- Canvas getImageData는 지정 영역을 ImageData로 반환하며 일반적인 rgba-unorm8은 RGBA 각 성분에 8비트를 사용합니다. MDN Canvas getImageData 문서
- CSS Color 4는 sRGB를 0~1의 세 성분과 D65 백색점으로 정의하고 Display P3 같은 넓은 공간도 설명합니다. W3C CSS Color 4
- 추출은 WCAG 검사를 대체하지 않으며 AA 최소 대비는 일반 텍스트 4.5:1, 큰 텍스트 3:1입니다. W3C WCAG 2.2 대비 기준
- Adobe의 현행 가이드는 대부분의 팔레트가 3~5개 주조색을 포함하며 업로드 뒤 조정을 권합니다. Adobe 이미지 팔레트 가이드
returns an ImageData object representing the underlying pixel data for a specified portion of the canvas.
MDN · W3C · Adobe
공식 출처와 추가 자료
팔레트를 추출하고 실제 색을 검사하세요
이미지 컬러 팔레트 FAQ
몇 색을 추출해야 하나요?
간결한 위계에는 5색, 중요한 보조 강조색과 재질과 상태가 있으면 8색을 쓰세요. 색이 많다고 자동으로 정확하지 않으며 각 색에 역할이 필요합니다.
추출 팔레트가 탁한 이유는?
큰 중성 배경, 혼합 조명, 그림자, 압축 픽셀이 빈도를 지배할 수 있습니다. 원본을 자르고 중요 색을 잠근 뒤 노이즈 위치를 재생성하세요.
주조색이 가장 중요한 색인가요?
아닙니다. 주조색은 면적이 큰 색인 경우가 많지만 작은 강조색이 편집상 더 중요할 수 있습니다.
바로 CSS에 써도 되나요?
검토 뒤에는 가능합니다. 정확한 HEX나 CSS 변수를 내보내고 역할을 이름 붙인 뒤 실제 구성 요소와 대비를 검사하세요.
Toon Tone이 이미지를 업로드하나요?
아닙니다. 2026년 7월 22일 확인한 도구는 브라우저 안에서 읽고 5색·8색, 잠금 재생성, CSS·PNG 내보내기를 제공합니다.