이미지 색상 팔레트 추출
Palette Extractor
이미지에서 N개의 대표 색을 뽑아 HEX·CSS 변수·ASE 스와치로 내보냅니다.
그림에 들어 있는 색을 스타일시트에 바로 붙일 수 있는 팔레트로 뽑습니다. 양자화기는 PNG 압축이 쓰는 것과 같습니다. 이미지를 표현하기에 충분한 팔레트는 정의상 그 이미지를 설명하는 팔레트이기 때문입니다. 각 색이 차지하는 비율은 짐작이 아니라 세어서 냅니다.
이미지를 놓으세요
팔레트는 PNG 압축이 쓰는 것과 같은 양자화기에서 나옵니다. 이미지를 표현하기에 충분한 팔레트는 곧 그 이미지를 설명하는 팔레트입니다.
사용 방법
이미지를 놓습니다
미리보기 아래 띠는 각 색을 실제 비율만큼 넓게 보여 줍니다. 화면의 2%를 차지하는 색은 2%로 보입니다.
색을 몇 개 뽑을지 정합니다
2개에서 16개까지입니다. 대개 5~6개를 넘어가면 팔레트가 요약이 아니라 목록이 되기 시작합니다.
필요한 형식으로 내보냅니다
CSS 사용자 정의 속성, Tailwind @theme 블록, SCSS 변수, JSON 중에서 고릅니다. 색을 하나씩 복사하지 않고 통째로 가져갑니다.
자주 묻는 질문
분명히 보이는 색이 왜 팔레트에 없나요?
이미지에서 차지하는 면적이 너무 작기 때문입니다. 양자화기는 그림 전체를 표현하는 쪽으로 최적화하므로, 화면의 1%를 차지하는 밝은 강조색은 거의 같은 회색이 넓게 깔린 영역에 밀립니다. 색 수를 올리세요.
이미지 전체를 훑나요?
일정한 간격으로 40만 픽셀 정도를 봅니다. 대표 색은 분포의 성질이라 간격을 두어 뽑아도 보존됩니다. 그리고 먼저 축소하는 방식과 달리 그림에 없는 색을 만들어 내지 않습니다.
Tailwind 출력이 프로젝트에서 안 먹습니다.
Tailwind 4는 색을 @theme 안의 사용자 정의 속성으로 정의하고, 여기서 내보내는 것이 그 형식입니다. v3 방식의 module.exports 설정을 v4 프로젝트에 붙이면 아무 일도 일어나지 않고, 반대도 마찬가지입니다.
이 도구로 이어지는 것
대표 색상 추출
Average & Dominant Colour
이미지의 평균·중앙값·최빈 색 가운데 하나를 대표 색으로 뽑아 색상 값으로 돌려줍니다.
색각이상 시뮬레이션
Colour Blindness Simulator
적색맹·녹색맹·청색맹·흑백 시야에서 이미지가 어떻게 보이는지 다시 그려 보여줍니다.
색상 선택기
Colour Picker
OKLCH 좌표판에서, 화면 스포이드로, 또는 업로드한 이미지에서 색을 고르고 원하는 표기법으로 복사합니다.
색 팔레트 생성
Palette Generator
기준 색에서 보색·삼각·유사색 규칙으로 조화로운 팔레트를 만듭니다.
다음 단계
이 도구의 결과를 그대로 받을 수 있는 도구들입니다.
색상 코드 변환
Colour Format Converter
HEX·RGB·HSL·HWB·LAB·LCH·OKLCH로 색을 변환하고 가장 가까운 색 이름을 알려 줍니다.
명도대비 검사
Contrast Checker
전경·배경 색 조합을 WCAG 2와 APCA 기준으로 채점하고 통과하는 가장 가까운 색을 제안합니다.
대표 색상 추출
Average & Dominant Colour
이미지의 평균·중앙값·최빈 색 가운데 하나를 대표 색으로 뽑아 색상 값으로 돌려줍니다.
색 팔레트 생성
Palette Generator
기준 색에서 보색·삼각·유사색 규칙으로 조화로운 팔레트를 만듭니다.
이미지 배경 제거
Background Remover
단색이나 균일한 배경을 OKLab에서 키잉해 투명한 PNG로 만들고, 브러시로 경계를 다듬을 수 있습니다.
EXIF 정보 삭제
EXIF Remover
화질은 그대로 두고 카메라·GPS·편집 이력 메타데이터만 지웁니다.