컬러 팔레트 생성기
색상
기준 색을 고르면 색채 이론을 바탕으로 조화로운 팔레트를 즉시 생성합니다: 보색·유사색·삼색·사색·분할 보색·단색. 각 스와치는 HEX 값을 표시하고 한 번에 복사할 수 있으며, 전경 대비가 자동 조정돼 읽기 좋습니다.
—
#3b82f6
#3b82f6
#f6af3b
#f6af3b
사용법
- 스와치나 HEX 입력으로 기준 색을 고르세요.
- 배색 방식을 선택하세요.
- 색을 하나씩 또는 전체로 복사하세요.
- 디자인이나 CSS에 활용하세요.
자주 묻는 질문
- 각 배색의 뜻은?
- 보색은 색상환에서 반대편을 고르고, 유사색은 이웃을, 삼·사색은 균등 간격을, 분할 보색은 보색을 부드럽게, 단색은 명도만 변화시킵니다.
- 어떤 색 공간을 쓰나요?
- HSL 색상(hue)을 회전해 다시 HEX로 인코딩하므로 기준 색의 채도·명도가 유지됩니다.
- 한꺼번에 복사되나요?
- 네 — 하단의 전체 복사 버튼으로 콤마로 구분된 목록을 복사할 수 있습니다.
- 접근성이 보장되나요?
- 배색 규칙은 접근성을 보장하지 않습니다. UI 텍스트는 컬러 대비 검사 도구로 추가 확인하세요.
관련 도구
이미지에서 컬러 팔레트 추출
이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.
색상00
색맹 시뮬레이터
8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.
색상00
CSS Box Shadow 생성기
여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.
색상00
컬러 포맷 변환기
어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.
색상00
CSS 그라디언트 생성기
선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.
색상00
색상 대비 검사기
글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.
색상00