색상 팔레트 생성기 (한 기본에서 5 스킴)

기본 색상 선택, 색상 이론 스킴 선택, 조정된 팔레트 도출. 견본 클릭해 개별 헥스 값 복사, 또는 디자인 도구와 CSS 변수 사용에 한 번에 모두 복사.

기본 색상

색상 스킴

작동 방식

보색: 색상 휠 반대 끝(180° 떨어진) 두 색상. 높은 대비, 생생함. 액센트, CTA 버튼, 초점 만들기에 사용.

유사색: 휠에서 인접한 세 색상(30° 떨어진). 조화롭고 즐거움, 낮은 대비. 자연에서 흔함; 배경과 UI 표면에 좋음.

삼색: 균등 간격 세 색상(120° 떨어진). 생생하고 균형. 장난스럽거나 활기찬 디자인에 사용.

사색(직사각형): 직사각형 형성하는 네 색상(90° 떨어진). 풍부한 팔레트지만 균형 맞추기 더 어려움 — 보통 하나를 지배적으로 다른 것을 액센트로 사용.

단색: 단일 색조의 톤, 틴트, 셰이드. 정교하고 통일됨. 미니멀 디자인과 기업 브랜딩에 흔함.

브랜드 색상: 대부분 프로젝트가 기존 로고나 브랜드 색상에서 시작. 디자인에 가장 적합한 것 찾기 위해 5 스킴 전반에 기본으로 테스트.

영감: 사진, 예술, 자연에서 색상 선택. 생생한 색상(높은 채도, 중간 밝기)이 기본으로 가장 잘 작동; 매우 옅거나 매우 어두운 색상은 흐릿한 팔레트 생성.

접근성: 최종 팔레트가 텍스트에 충분한 대비 있는지 확인. 본 contrast checker 사용해 전경/배경 쌍이 WCAG AA 충족(일반 텍스트에 4.5:1) 검증.

CSS 변수: 팔레트 색상을 :root 변수(--color-primary, --color-accent 등)로 정의해 한 위치 변경으로 테마 교체 가능.

디자인 도구: 헥스 값을 Figma, Sketch, Adobe XD의 색상 라이브러리에 붙여넣기. 대부분 도구가 헥스 직접 수용; 일부는 HSL이나 명명된 CSS 색상도.

사용 제한: 5 색상에도 실제 디자인은 보통 2-3 개를 두드러지게 사용하고 나머지를 드물게. 60-30-10 규칙(60% 지배, 30% 보조, 10% 액센트)이 유용한 시작 균형.

›어떤 스킴 사용?

유사색이 대부분 디자인에 가장 안전한 선택 — 세 인접 색상이 단조 없이 조화 생성. 보색이 강조에 잘 작동(CTA 버튼). 단색이 미니멀/정교 브랜드에 최적. 삼색이 장난스러운/활기찬 느낌에.

›5 색상보다 많이?

이 도구에서 안 됨 — 표준 2-5 색상 스킴 생성. 더 큰 팔레트는 유사색 출력 사용하고 각 단색 셰이드 만들기(스킴 결합).

›알고리즘이 인지적으로 균일한 색상 공간 사용?

HSL 수학 사용, 빠르고 예측 가능. 인지적으로 균일한 결과(접근성 조정 팔레트에 더 좋음)는 고급 도구가 OKLCH나 CIELAB 사용. HSL이 대부분 디자인 작업에 충분.

›본 팔레트가 접근성?

자동 아님. 색상 이론 스킴은 미적 조화 보장, 텍스트 대비 아님. 출시 전 항상 본 contrast checker로 텍스트-위-배경 조합 확인.

›좋아하는 팔레트 저장?

아직 — 헥스 코드를 디자인 시스템이나 노트에 복사. 북마크 가능한 팔레트 URL이 로드맵에.

›Material Design이나 Tailwind 팔레트는?

그것은 사전 큐레이트된 시스템. 여기서 기본 스킴 생성하고 유사한 Material/Tailwind 색상 조회. 일부 앱이 헥스 코드를 이 시스템과 직접 호환하게 내보냄.

›왜 본 팔레트가 '평평'해 보임?

기본 색상이 매우 옅(높은 밝기)거나 매우 어두우면(낮은 밝기) 생성된 팔레트가 제한된 동적 범위. 생생한 결과에 중간 밝기(40-60%)와 높은 채도(70%+)의 기본 선택.

›데이터가 전송되나요?

전송되지 않습니다. 모든 계산 로컬 실행.