이미지에서 색상 팔레트 추출.
이미지를 선택하면 주요 색상을 많이 쓰인 순서대로, 바로 복사할 수 있는 HEX 코드로 보여 줍니다. 브라우저에서 실행되므로 이미지가 기기 밖으로 나가지 않습니다.
이미지를 선택하면 주요 색상을 보여 드립니다.
브라우저 안에서 실행됩니다. 여기에 넣은 파일은 업로드되거나 저장되지 않습니다.
이미지에서 색상 추출하는 방법
- 이미지를 선택하거나 위 상자에 끌어다 놓으세요. 사진, 마음에 드는 디자인의 스크린샷, 로고, 목업 모두 됩니다.
- 색상 개수를 정하세요. 5개부터 8개까지이며 기본값은 6개입니다.
- 팔레트를 확인하세요. 주요 색상이 많이 쓰인 순서대로, 이미지에서 차지하는 비율과 HEX 코드와 함께 표시됩니다.
- 복사하세요. HEX 코드를 하나씩 복사하거나, 쉼표로 구분된 목록으로 한 번에 복사할 수 있습니다. 이미지를 클릭하면 다른 이미지를 시험해 볼 수 있습니다.
팔레트에서 DESIGN.md를 거쳐 Codex로
색상 목록만으로는 Codex가 어떤 색을 어디에 쓸지 알 수 없습니다. 색상마다 역할을 정해 한 번 문서로 남기면 Codex가 디자인하는 모든 화면이 같은 팔레트를 씁니다.
- 레퍼런스에서 색상을 추출하세요. 분위기 사진, 브랜드 이미지, 마음에 드는 디자인 방향의 스크린샷 등입니다.
- 색상마다 역할을 정하세요. 비율이 도움이 됩니다. 넓고 밝은 색은 보통 배경(
neutral), 어두운 색은 텍스트(on-surface), 강한 색은 주요 액션(primary), 작은 포인트 색은secondary나tertiary가 됩니다. - 텍스트 조합을 확인하세요. 명도 대비 검사기에서 확인합니다. 사진에서 그대로 가져온 색은 위에 올린 텍스트가 잘 읽히도록 조금 더 어둡거나 밝게 조정해야 하는 경우가 많습니다.
- HEX 코드를 DESIGN.md 생성기에 붙여넣고 폰트와 간격을 추가한 뒤, 프로젝트 루트에 파일을 저장하세요.
- DESIGN.md 가이드처럼 AGENTS.md에서 Codex가 이 파일을 참조하게 하세요. 그러면 Codex가 화면마다 새 색을 고르지 않고 이 색상들을 씁니다.
역할 지정을 Codex에 맡기고 싶다면 코드를 프롬프트에 붙여넣으세요.
팔레트를 DESIGN.md로
레퍼런스 이미지의 주요 색상이야: [HEX 코드 붙여넣기]. 이 색상들을 DESIGN.md의 색상 역할 primary, on-primary, secondary, tertiary, neutral, surface, on-surface에 배정해 줘. primary 위의 on-primary, surface와 neutral 위의 on-surface가 명도 대비 4.5:1 이상이 되게 하고, 부족하면 색조는 유지한 채 밝기를 조정해 줘. 그다음 저장소 루트의 DESIGN.md에 색상을 적어 줘.
자주 묻는 질문
무료인가요?
네. 무료이고, 회원가입이 필요 없으며, 시험해 볼 수 있는 이미지 수에도 제한이 없습니다.
이미지가 업로드되나요?
아니요. 브라우저가 내 기기에서 이미지를 읽고 분석하며, 어디에도 전송하거나 저장하지 않습니다. 사이트는 도구가 사용되었다는 사실만 집계하며, 이미지는 절대 집계하지 않습니다.
색상은 어떻게 고르나요?
색상을 파악하기에 충분하도록 이미지의 긴 변을 최대 160픽셀로 줄인 다음, 비슷한 픽셀끼리 묶어 각 그룹의 평균 색과 이미지에서 차지하는 비율을 보여 줍니다. 작은 포인트 색도 나머지와 확연히 다르고 이미지의 0.5% 이상을 차지하면 별도 항목으로 표시되지만, 가장자리를 따라 섞인 픽셀은 표시되지 않습니다. 투명한 영역은 무시되며, 같은 이미지는 항상 같은 팔레트를 냅니다.
요청한 것보다 색상이 적게 나오는 이유는?
이미지에 그만큼 뚜렷이 다른 색이 없기 때문입니다. 색이 몇 가지뿐인 플랫한 로고는 설정한 개수보다 적게 나올 수 있습니다.