예쁜 색 조합에서, 실제로 쓰이는 팔레트로.
색상의 역할을 정하고 이미지에서 배색을 추출해 실제 디자인에 적용하는 방법.
색상마다 역할부터 정하세요
좋은 팔레트는 다섯 색상이 함께 예쁘게 보이는 것에서 끝나지 않습니다. 페이지 배경, 본문 글자, 주요 버튼, 보조 표면, 작은 강조색처럼 용도를 먼저 나누세요. 처음에는 다섯 색상으로 시작하고 새로운 역할이 필요할 때만 색상을 늘리는 편이 관리하기 쉽습니다.
균형은 색조와 명도를 함께 바꾸고, 유사색은 가까운 색조를, 보색은 반대편 색조를 활용합니다. 삼원색은 색상환의 세 방향을 사용하고 단색은 같은 색조에서 명도를 조절합니다. 배색 규칙은 탐색의 출발점이며 모든 조합의 미적 완성도나 접근성을 보장하지 않습니다.
이미 결정한 색상은 잠가 두세요
브랜드 색상이 있다면 색상 코드 버튼을 눌러 HEX, RGB 또는 HSL 값을 입력하세요. 잠금 버튼을 누르면 새 조합을 만들어도 해당 색상이 유지됩니다. 생성기는 첫 번째 잠긴 색상을 색조의 기준으로 사용합니다. 여러 색상을 잠그면 선택한 배색 규칙에 맞지 않더라도 그 값이 그대로 남습니다.
색상 수는 2~8개입니다. 실행 취소와 다시 실행은 현재 탭 안에서 이전 조합을 비교하는 데 사용합니다. 색상 값, 순서와 잠금 상태가 함께 기록됩니다. 순서 반대로 기능은 색상 값은 유지한 채 배치만 뒤집습니다.
이미지에서 추출한 색상은 시작점으로 사용하세요
JPG, PNG, WebP를 선택하거나 이미지 추출 영역에 놓으세요. 최대 15MB·3,200만 화소를 허용하며 큰 이미지는 최대 약 400만 화소의 미리보기로 줄입니다. 색상 묶음을 찾을 때는 최대 160×160 크기로 표본을 줄여 비슷한 색상을 묶습니다. 투명도가 높은 픽셀은 군집 분석에서 제외합니다.
추출값은 원본 카메라 데이터가 아니라 브라우저가 해석한 미리보기 기준입니다. 색상 프로파일, 크기 축소와 투명도가 결과에 영향을 줍니다. 이미지를 클릭하면 표시된 픽셀을 선택하며 반투명 픽셀은 흰 배경과 합성합니다. 키보드 사용자는 추출된 색상 버튼을 선택할 수 있습니다. 완전히 투명한 이미지에는 추출할 색상이 없고 단색 이미지는 한 색상만 나올 수 있습니다.
실제 화면과 글자 대비를 함께 확인하세요
미리보기는 선택한 팔레트를 작은 인터페이스에 적용합니다. 예시 글자는 읽기 좋은 흰색 또는 어두운 색으로 자동 선택하지만 팔레트의 모든 색상 조합을 검사하는 것은 아닙니다. 라이트와 다크 배치를 전환해 계층 구조와 분위기를 비교하세요.
다음으로 대비 검사에서 실제 사용할 글자색과 배경색을 입력하세요. 넓은 장식 영역에는 어울리는 강조색도 작은 본문 글자에서는 대비가 부족할 수 있습니다. 브랜드 색상을 넓은 영역에 유지하고 글자나 링크용으로는 더 어두운 변형을 만드는 방법이 있습니다.
작업을 닫기 전에 내보내세요
CSS는 사용자 지정 속성, JSON은 HEX와 OKLCH를 담은 색상 토큰으로 내보냅니다. SVG와 PNG에는 색상 코드가 함께 표시됩니다. 파일은 브라우저에서 만들고 다운로드를 선택했을 때만 사용자의 기기에 내려받습니다.
링크 복사는 주소의 # 뒤에 색상 코드 목록을 넣습니다. 링크를 받은 사람은 해당 색상을 확인할 수 있습니다. DB에 작업 기록을 만들지 않으며 이미지, 잠금 상태와 실행 취소 기록은 공유 링크에 포함되지 않습니다. 탭을 닫기 전에 다운로드하거나 링크를 복사해 두세요.