디자인
색상 팔레트 생성기
기준색으로 디자인 팔레트 자동 생성
#5B5EF0
미리보기 타이틀
이 팔레트가 실제 디자인에 어떻게 보이는지 확인해 보세요
PrimarySecondaryAccent
이 도구는?
색상 팔레트 생성기는 기준색 하나를 선택하면 보색, 유사색, 삼색, 단색 모드로 Primary·Secondary·Accent·Background·Surface·Text 6가지 색상을 자동 생성하는 무료 도구입니다. 실제 디자인 미리보기와 CSS/SCSS/Tailwind 코드 복사 기능을 제공합니다.
사용 방법
- 컬러 피커 또는 HEX 코드로 기준색을 선택합니다.
- 조합 모드(보색/유사색/삼색/단색)를 선택합니다.
- 생성된 팔레트의 색상 칩을 클릭하여 복사하거나, 소스 보기로 코드를 복사합니다.
자주 묻는 질문
보색, 유사색, 삼색의 차이는 무엇인가요?
보색은 색상환에서 반대쪽(180°) 색, 유사색은 인접한(±30°) 색, 삼색은 120° 간격으로 배치된 3가지 색입니다. 보색은 대비가 강하고, 유사색은 조화롭고, 삼색은 활기찬 느낌을 줍니다.
Background, Surface, Text 색상은 어떻게 생성하나요?
기준색의 색상(H)을 유지하면서 채도(S)와 명도(L)를 조절하여 생성합니다. Background는 매우 밝게, Text는 매우 어둡게 만들어 일관된 느낌의 팔레트를 구성합니다.
생성된 코드를 그대로 프로젝트에 사용할 수 있나요?
네. CSS 변수, SCSS 변수, Tailwind 설정 형식으로 제공되므로 복사하여 바로 사용할 수 있습니다.
본 결과는 참고용으로, 정확한 정보는 공식 기관에서 확인하시기 바랍니다