그래픽 / 색상
색상 팔레트 생성기: 한 번의 클릭으로 조화로운 배색 만들기
색상 이론에 따라 유사색, 보색, 삼색, 분할 보색, 단색 또는 무작위 방식으로 3개에서 8개의 색상 팔레트를 생성합니다. 원하는 색상을 잠그고 나머지만 다시 생성할 수 있으며, 각 색상과 흰색의 대비를 확인하고 팔레트를 CSS 변수, Tailwind 설정, JSON, hex 코드 또는 PNG로 내보낼 수 있습니다.
색상 팔레트 생성기: 한 번의 클릭으로 조화로운 배색 만들기: 각 팔레트는 기본 색조에서 시작합니다. 잠근 색상이 있으면 해당 색상에서 기본 색조를 가져오고, 선택한 규칙에 따라 나머지 색조를 배치합니다. 유사색은 30° 간격, 보색은 반대 색조, 삼색은 120° 간격, 분할 보색은 양쪽에 150°, 단색은 하나의 색조를 어두운 색에서 밝은 색으로 사용합니다. 세트에 밝은 색, 중간 색, 어두운 색이 포함되도록 명도와 채도를 조절하며, 모든 색상에 대해 흰색과의 WCAG 대비 비율을 표시합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
또는 스페이스바를 누르십시오. 유지하려는 색상을 잠그십시오.
#64A6F5흰색 배경에서 2.5:1#382B9D흰색 배경에서 10.5:1#772BB7흰색 배경에서 7.5:1#BE4BBA흰색 배경에서 4.3:1#E0367B흰색 배경에서 4.2:1:root {
--color-1: #64a6f5;
--color-2: #382b9d;
--color-3: #772bb7;
--color-4: #be4bba;
--color-5: #e0367b;
}
팔레트 사용
일반적으로 중성색 하나를 약 60%, 두 번째 색을 30%, 강조색을 10%로 나눕니다. 이렇게 하면 가장 강한 색을 버튼과 강조 표시처럼 필요한 곳에만 사용할 수 있습니다.
대비
4.5:1은 일반 텍스트에 대한 WCAG AA 최소 기준이고, 큰 텍스트에는 3:1이 적용됩니다. 7:1이면 AAA 기준을 충족합니다.
사용 방법
- 배색 방식과 색상 수를 선택합니다.
- 원하는 팔레트가 나올 때까지 생성 버튼이나 스페이스바를 누릅니다. 유지할 색상은 잠급니다.
- 팔레트를 코드로 복사하거나 PNG로 다운로드합니다.
개인정보 보호 및 제한사항
모든 작업은 브라우저에서 생성됩니다.
관련 도구
자주 묻는 질문
원하는 색상을 어떻게 유지하나요?
해당 색상의 잠금 버튼을 클릭합니다. 잠근 색상은 그대로 유지되며, 첫 번째 색상은 나머지 색상을 구성하는 기본 색조도 설정합니다.
브랜드 색상을 사용할 수 있나요?
예. 색상 견본을 클릭해 원하는 색상으로 설정하고 잠근 다음, 해당 색상을 기준으로 나머지 색상을 생성합니다.
팔레트의 텍스트를 읽기 쉽게 확인할 수 있나요?
각 색상 견본에 흰색과의 대비 비율이 표시됩니다. WCAG는 일반 텍스트에 최소 4.5:1을 요구하므로, 이보다 낮은 색상에는 어두운 텍스트를 사용해야 합니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요