색상 팔레트 생성기
임의의 기준 색상에서 조화로운 색상 팔레트를 생성합니다. 보색, 유사색, 삼색조, 단색 배색을 지원합니다.
Complementary
#6366F1#F1EE63Analogous
#63ADF1#6366F1#A763F1Triadic
#6366F1#F16366#66F163Split Complement
#6366F1#F1A763#ADF163Tetradic
#6366F1#F163AD#F1EE63#63F1A7Monochromatic
#0F13AC#1D21EB#6366F1#A1A3F7#D0D1FB이 도구 사용 방법
- 1
Click the color swatch to open your system color picker, or type a 6-digit hex code like #6366F1 into the text field next to it.
- 2
Watch the six scheme rows update instantly as you change the base color.
- 3
Read the uppercase hex code shown in the bottom-left corner of each swatch and copy the ones you want into your design tool or stylesheet.
색상 팔레트 생성기란 무엇인가요?
색채 이론은 색상환에서의 위치에 따라 조화로운 관계를 정의합니다. 보색은 정반대 위치(180°)에 자리합니다. 유사색은 인접해 있습니다(30°). 삼색조 배색은 등간격으로 떨어진 세 가지 색상(120°)을 사용합니다. 이 도구는 선택한 기준 색상을 바탕으로 각각을 계산하여, 검증된 색채 이론에 기반한 출발 팔레트를 제공합니다.
일반적인 사용 사례
Picking a primary plus accent color for a website by reading the complementary pair off your brand color.
Building a calm, unified UI background-and-card scheme from the analogous row.
Generating a 5-step monochromatic tint and shade ramp for hover, active, and disabled button states.
Sketching a data-visualization palette where triadic or tetradic colors keep series visually distinct.
Exploring logo or illustration color combinations before committing in Figma or Illustrator.
Quickly grabbing hex codes for a CSS variable set without leaving the browser.
자주 묻는 질문
웹사이트에는 어떤 배색이 가장 좋은가요?▼
관련 도구
색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 형식 간에 색상을 변환합니다. 색상을 시각적으로 선택하거나 값을 직접 입력하세요.
CSS Box Shadow 생성기
CSS box-shadow 값을 시각적으로 만듭니다. 실시간으로 미리 보고 생성된 CSS를 복사하세요.
CSS 그라데이션 생성기
선형 및 방사형 CSS 그라데이션을 만듭니다. 색상을 시각적으로 선택하고 생성된 CSS를 복사하세요.
Cubic Bezier 가속 곡선 생성기
CSS용 cubic-bezier 가속 곡선을 만듭니다. 표준 사전 설정이 포함되어 있습니다.
CSS Border Radius 생성기
복잡한 CSS border-radius 값을 시각적으로 만듭니다. 각 모서리를 독립적으로 제어합니다.
CSS Clamp() 생성기
clamp()로 유동적이고 반응형인 CSS 값을 생성합니다. 뷰포트 범위에 걸쳐 최소 크기와 최대 크기 사이를 부드럽게 조정합니다.