색상 배색 생성기

기준 색상을 선택하면 전체 팔레트를 얻습니다, 보색, 유사색, 삼색, 사색 또는 단색. 색견본을 HEX, RGB 또는 HSL로 복사하세요. 아무것도 브라우저를 떠나지 않습니다.

색상 배색 생성기 작동 방식

색상 구성표 생성기는 선택한 단일 기본 색상에서 완전한 색상 팔레트를 만듭니다. 보색(색상환 반대편), 유사색(인접한 색조), 3색 배색(균등 간격의 세 가지 색조), 4색 배색(두 쌍의 보색), 단색 배색(동일 색조의 다양한 명도와 채도)이 있습니다. 모든 팔레트 로직은 브라우저에서 실행되며 입력한 내용은 기기를 벗어나지 않습니다.

생성된 각 팔레트는 복사할 준비가 된 HEX 및 RGB 값이 있는 스워치를 보여줍니다. 이를 통해 디자이너는 추측이 아닌 색상 이론에 기반한 시작점을 얻을 수 있습니다. 생성기는 초기 페이지 로드 후 오프라인에서도 사용 가능하므로 클라이언트 미팅 중에 네트워크 연결 없이 브랜드 색상을 자유롭게 실험할 수 있습니다. 기본 색상은 HEX, RGB, HSL 중 가지고 있는 표기법 그대로 입력하면 되며, 생성된 각 스워치는 세 가지 표기법 모두로 함께 제공되므로 사용 중인 디자인 도구가 요구하는 값을 그대로 복사할 수 있습니다.

작성자: Bastien Sulyan

색상 배색 생성기 단계별 사용 방법

색상 선택기를 사용하거나 HEX 값을 입력해 기본 색상을 선택합니다.
탭에서 조화 유형을 선택합니다. 보색, 유사색, 3색 배색, 4색 배색, 단색 배색.
팔레트 스워치가 HEX 및 RGB 값과 함께 즉시 나타납니다.
스워치를 클릭해 HEX 값을 클립보드에 복사합니다.
기본 색상을 조정하며 변형을 탐색하고 전체 팔레트가 업데이트되는 것을 확인합니다.

자주 사용되는 사례

새 브랜드 아이덴티티를 시작하는 디자이너가 주요 색상을 선택하고 클라이언트에게 세 가지 색상 조합을 제안하기 위해 3색 배색 팔레트를 생성할 때.
다크 모드 테마를 구축하는 개발자가 단일 브랜드 색상에서 다양한 색조와 음영을 생성하기 위해 단색 팔레트를 사용할 때.
콘텐츠 크리에이터가 가혹한 대비 없이 조화로운 발표 강조 색상을 선택하기 위해 유사색 팔레트를 선택할 때.
UI 디자이너가 주요 브랜드 색상 대비 두드러지는 높은 대비의 강조 색상을 찾기 위해 보색 팔레트를 사용할 때.

자주 묻는 질문

보색 팔레트는 어떻게 작동하나요?

보색은 HSL 색상환에서 기본 색상 정반대에 있는 색조로, 180도 떨어져 있습니다. 보색을 나란히 배치하면 최대 대비가 만들어집니다. 도구는 기본 색상과 그 보색, 그리고 각각의 더 밝고 어두운 변형을 보여줍니다.

3색 배색과 4색 배색 팔레트의 차이점은 무엇인가요?

3색 배색은 색상환에서 120도 간격으로 균등하게 배치된 세 가지 색조를 사용합니다. 4색 배색은 90도 간격으로 배치된 네 가지 색조를 사용하여 두 쌍의 보색(이중 보색 또는 정사각형 팔레트라고도 함)을 형성합니다. 4색 배색은 더 복잡하며 시각적 잡음을 피하기 위해 비율 균형을 신중히 조정해야 합니다.

선택한 색상이 저장되거나 전송되나요?

아니요. 팔레트 생성은 기본 색상의 HSL 표현에 대한 산술입니다. 색조 각도를 고정된 양만큼 회전하고 명도와 채도를 변경합니다. 모든 계산이 브라우저에서 로컬로 실행되며 서버로 전송되는 것은 없습니다.

팔레트를 CSS 파일이나 디자인 토큰 파일로 내보낼 수 있나요?

현재 도구는 복사 가능한 HEX 및 RGB 값이 있는 스워치를 보여줍니다. 전체 CSS 커스텀 속성 내보내기나 디자인 토큰 JSON의 경우, 프로젝트의 토큰 파일이나 CSS에 값을 수동으로 복사하세요. 전용 내보내기 버튼은 향후 업데이트에서 추가될 수 있습니다.

이 생성기가 공식적인 색상 이론 표준을 따르나요?

팔레트 계산은 HSL 색상 공간의 표준 색조 회전 공식을 사용합니다. 이것은 대부분의 웹 디자인 도구에서의 관습입니다. HSL의 정확한 지각 균일성은 LAB이나 OKLCH에 비해 한계가 있지만, HSL 회전은 디자이너가 일반적으로 기대하는 색상환 관습과 일치하는 팔레트를 생성합니다.