Color Palette Generator

색상 조화란 특정 색상 조합이 색상환에서 구조적이고 예측 가능한 관계를 갖기 때문에 시각적으로 즐거워 보이는 원리입니다. 조화 기반 팔레트는 임의적이지 않고 의도적인 느낌을 줍니다. UI 디자인에서 조화로운 색상은 요소 간 명확한 시각적 관계를 만들어 사용자가 인터페이스를 탐색하는 데 도움을 줍니다. 예를 들어 CTA 버튼에 보색을 사용하면 배경 대비 눈에 잘 띄게 됩니다.

보색은 색상환에서 바로 반대편에 있는 색상, 즉 색조에서 180° 떨어진 색입니다. 보색 쌍(파랑과 주황, 빨강과 초록 등)은 최대 대비를 만들어 강조와 CTA 요소에 유용합니다. 하지만 넓은 영역에서 높은 채도로 사용하면 시각적 진동이 발생할 수 있어, 보통 작은 비율로 사용하거나 한 색상의 채도를 낮춥니다.

유사색 팔레트(색상환에서 서로 가까운 색상)는 자연 영감 디자인, 웰니스 브랜드, 차분한 인터페이스처럼 일관되고 조화로운 느낌을 원할 때 사용하세요. 3색 조화 팔레트(균등하게 배치된 세 가지 색상)는 어린이 제품, 스포츠 브랜드, 유쾌한 UI 디자인처럼 균형을 유지하면서 시각적 에너지와 대비가 필요할 때 사용하세요.

3색 조화 체계는 120° 간격으로 균등하게 배치된 3가지 색상으로 색상환에서 정삼각형을 형성합니다. 4색 조화(정사각형 또는 직사각형이라고도 함) 체계는 90° 간격의 4가지 색상으로 사각형을 형성합니다. 4색 조화 체계는 더 다양한 색상을 제공하지만 균형 잡기가 어렵습니다. 보통 하나의 주요 색상과 나머지를 강조색으로 사용하는 것이 가장 좋습니다.

분할 보색 팔레트는 기본색과 직접 보색에 인접한 두 가지 색상(정확히 180° 대신 ±150° 위치)을 사용합니다. 보색 체계와 유사한 강한 시각적 대비를 주지만, 두 강조색이 정확한 보색과 약간 달라 덜 자극적입니다. 대비는 필요하지만 지나치게 긴장되지 않아야 하는 디자인에 인기 있는 선택입니다.

HSL(색조, 채도, 명도)은 인간이 색상 관계를 인식하는 방식에 맞게 색상을 나타냅니다. 색조는 색상환의 각도(0-360°)이므로 어떤 색조에 120°를 더하면 채도와 명도를 유지하면서 3색 조화 파트너가 됩니다. RGB(빨강, 초록, 파랑)는 화면이 색상을 표시하는 방식이지만 이런 직관적인 회전 속성이 없어 색채 이론 관계를 직접 계산하기 어렵습니다.

원하는 팔레트에서 헥스 코드를 복사하세요. CSS에서 사용자 정의 속성으로 정의하세요: --color-primary: #3b82f6; --color-accent: #f63b3b; 스타일에서 이 변수를 사용하세요. Tailwind CSS 프로젝트에서는 tailwind.config.js의 theme.extend.colors 섹션에 헥스 값을 추가하여 명명된 색상 클래스를 만드세요.

입력 옆의 색상 스와치 버튼(네이티브 컬러 피커)을 사용하면 어떤 색상이든 시각적으로 선택할 수 있습니다. CSS 색상 이름("tomato", "steelblue" 등)을 알고 있다면 브라우저 개발자 도구에서 헥스 값을 찾을 수 있습니다. DevTools를 열고 요소를 검사하고 스타일 패널의 색상 스와치를 클릭하면 헥스 값이 표시됩니다. 일반 색상: 흰색 #ffffff, 검정 #000000, 파랑 #0000ff, 빨강 #ff0000.