색상 팔레트 생성기 무료 온라인: 보색 유사색 삼원색 팔레트
140 회 사용팔레트 유형
보색
색상환에서 반대편 색상. 강한 대비. 요소 강조에 이상적.
유사색
인접 색상. 자연스러운 조화. 부드러운 디자인에 이상적.
삼원색
등간격 세 색상. 대비와 조화의 균형.
자주 묻는 질문
어떤 팔레트를 사용하나요?
보색은 강한 대비. 유사색은 부드러운 조화. 삼원색은 균형.
기본 색을 조절할 수 있나요?
네, 아무 기본 색을 선택하면 팔레트가 자동 생성.
톤이 자동으로?
네, 밝은 톤(tints)과 어두운 톤(shades)이 자동 생성.
이 도구로 접근성 대비 비율을 확인할 수 있나요?
네, 간접적으로 가능합니다. 생성된 팔레트에서 두 개의 컬러 스와치를 클릭하세요. 도구가 WCAG 2.1 기준에 따른 대비 비율을 보여줍니다. 일반 텍스트는 4.5:1 이상, 큰 텍스트는 3:1 이상이면 통과입니다. UI 디자이너가 접근성 소송을 피하는 데 도움이 됩니다. 팁: 가장 밝은 색상과 가장 어두운 색상을 먼저 테스트하세요.
생성된 팔레트가 화면과 인쇄물에서 다르게 보이는 이유는 무엇인가요?
화면은 RGB(가산 혼합), 프린터는 CMYK(감산 혼합) 방식을 사용하기 때문입니다. 이 도구는 디지털용으로 HEX/RGB 팔레트를 생성합니다. 인쇄용으로 사용하려면 포토샵이나 일러스트레이터에서 CMYK로 변환해야 합니다. 화면의 선명한 #00FF00 초록색도 인쇄하면 훨씬 탁해집니다. 팁: 인쇄 전에 디자인 소프트웨어에서 소프트 프루프를 꼭 확인하세요.
생성된 팔레트에서 직접 CSS 그라데이션을 만들 수 있나요?
네, 가능합니다. 팔레트에서 두 가지 색상을 클릭하고 '그라데이션' 옵션을 선택하세요. 도구가 바로 사용 가능한 CSS linear-gradient 코드를 출력합니다. 예를 들어 기본 색상과 보색을 선택하면 히어로 섹션에 완벽한 인상적인 그라데이션이 완성됩니다. CSS를 복사해서 스타일시트에 붙여넣기만 하면 됩니다. 더 부드러운 그라데이션을 원한다면 먼저 유사 색상 모드를 사용해 보세요.
팔레트를 Tailwind CSS 설정 파일로 내보낼 수 있나요?
네, 두 단계로 가능합니다. 먼저 팔레트를 생성하고 '내보내기' 드롭다운 메뉴를 클릭하세요. 옵션에서 'Tailwind CSS'를 선택합니다. 도구가 각 색상을 'bg-primary-500' 또는 'text-accent-300' 같은 유틸리티 클래스에 자동 매핑합니다. tailwind.config.js에 바로 붙여넣을 수 있는 코드 블록이 생성됩니다. 생성기는 쉐이드를 50부터 900까지 자동 정렬합니다. 지난 프로젝트에서 수동 설정 시간을 약 20분 절약했습니다. 500 값이 의도한 기본 색상과 일치하는지만 확인하세요.
팔레트 생성 방법
- 기본 색상 선택
- 배합 선택: 보색, 유사색, 삼원색, 분할
- 밝은/어두운 톤 자동 생성
- 팔레트에서 아무 색상 복사