$ tools/color-wheel

색상환

색상을 고르고 조화를 선택 — 보색, 유사색, 삼각 등 — 어울리는 팔레트 생성. Hex, RGB, HSL, CMYK, 클릭으로 복사.

# 색상 선택

명도50%
RGB
HSL
HSB
CMYK

$ 하모니

$ 팔레트

$ 컬러 휠 사용 방법

휠의 아무 곳이나 클릭하여 기본 색상을 설정하세요 — 각도가 색조를, 중심에서의 거리가 채도를 결정합니다. 아래의 명도 슬라이더로 밝게 하거나 어둡게 하시거나, 직접 HEX 코드를 입력하세요. 그런 다음 오른쪽에서 하모니 규칙을 선택하면 팔레트가 즉시 업데이트됩니다. 견본을 클릭하여 HEX를 복사하거나 전체 세트를 한 번에 가져오세요.

하모니의 의미

보색은 휠에서 직접 반대편의 색상을 사용하여 높은 대비와 에너지를 만듭니다. 유사색은 이웃 색상을 사용하여 차분하고 일관된 느낌을 줍니다. 삼색 배색은 세 가지 색상을 균일하게 배치하여 균형 잡히면서도 활기찬 세트를 만듭니다. 분할 보색은 보색 쌍을 부드럽게 합니다. 정사각 및 사색 배색은 더 다양한 4가지 색상 구성을 제공합니다. 단색과 농도 & 음영은 하나의 색조에 머물러 명도만 변화시킵니다 — 깔끔하고 미니멀한 UI에 좋습니다.

앱에 중요한 이유

일관된 팔레트는 App Store 스크린샷, 아이콘, 피처 그래픽을 임의의 색상 더미가 아닌 하나의 제품처럼 느끼게 합니다. 브랜드 색상을 선택하고 하모니를 생성한 다음, 스크린샷 캡션, 배경, 스토어 자산 전체에 정확한 HEX 코드를 재사용하세요.

$ FAQ

무료인가요?

예 — 완전 무료, 가입 없음, 제한 없음. 완전히 브라우저에서 실행됩니다.

HSL과 HSB의 차이는 무엇인가요?

둘 다 색조와 채도를 설명하지만 세 번째 값이 다릅니다: HSL은 명도(0% 검정, 100% 흰색)를 사용하고 HSB는 밝기를 사용합니다. 디자이너는 웹용으로 HSL을 선호합니다. HSB는 Photoshop 같은 도구에 표시됩니다. 이 휠은 둘 다 제공합니다.

제 브랜드 색상에서 시작할 수 있나요?

예. 상자에 HEX 코드를 입력하면 휠과 팔레트가 일치하도록 업데이트됩니다. 그런 다음 그 주위에 구축할 하모니를 선택하세요.

디자인에서 팔레트를 어떻게 사용하나요?

견본을 클릭하여 HEX를 복사하거나 "모든 HEX 복사" / "CSS 변수로 복사"를 사용하여 전체 세트를 가져오세요. 디자인 도구나 스타일시트에 직접 붙여넣으세요.

더 많은 컬러 도구

LaunchShots가 마음에 드시나요?
평생 무료 — 시간을 아껴드렸다면 커피 한 잔 사주실 수 있어요.
후원하기 →
복사됨 ✓