색상 팔레트 생성기

색상환 조화를 이용해 하나의 브랜드 색상으로 일관된 팔레트를 만들거나, 사진에서 주요 색을 뽑아내세요. 개별 값을 복사하거나 CSS 사용자 정의 속성으로 내보낼 수 있습니다.

모드

기본 색상

색상 조화

CSS 사용자 정의 속성

브라우저 안에서만 실행됩니다. 입력한 내용과 파일은 어떤 서버에도 업로드되지 않습니다.

사용 방법

기준 색상과 조화 유형을 고르거나, ‘이미지에서’로 바꿔 사진을 엽니다.
색상 견본을 클릭하면 HEX 코드가 복사됩니다.
CSS 변수를 복사해 스타일시트에서 팔레트를 사용합니다.

예시

인터페이스 색상 단계

‘밝고 어두운 단계’를 사용하면 기본 색상의 밝은 배경과 어두운 글자 변형을 얻을 수 있습니다.

제품 사진으로 만든 팔레트

사진에서 6가지 색을 추출해 어울리는 랜딩 페이지를 꾸밉니다.

개인정보

브라우저 안에서만 실행됩니다. 입력한 내용과 파일은 어떤 서버에도 업로드되지 않습니다. 브라우저에 저장되는 내용(즐겨찾기와 기록만)은 개인정보 처리방침을 참고하세요. 개인정보 처리방침

직접 확인해 보세요. 브라우저 개발자 도구를 열고 네트워크(Network) 탭을 선택한 뒤 도구를 사용하세요. 파일은 어떤 업로드 요청에도 나타나지 않습니다. 이 페이지가 오프라인용으로 저장된 뒤에는 인터넷 연결을 끊고도 계속 작업할 수 있습니다. 광고와 익명 방문 통계는 활성화된 경우 자체 요청을 보내지만, 파일이나 텍스트를 받지는 않습니다.

자주 묻는 질문

이미지 색상은 어떻게 추출하나요?

이미지를 축소한 뒤 k-평균 군집화 알고리즘으로 픽셀을 묶고, 가장 큰 묶음들이 팔레트가 됩니다.

조화 배색은 접근성을 충족하나요?

조화는 색상 관계에 관한 것이지 대비에 관한 것이 아닙니다. 글자와 배경 조합은 색상 선택기의 대비율로 확인하세요.

사용 방법

예시

개인정보

자주 묻는 질문

관련 도구