배색 생성기

이 배색 생성기가 하는 일

기준 hex 색상을 고르거나 붙여넣고 배색 유형을 선택하면 그 색과 어울리는 색을 즉시 보여줍니다. 보색은 색상환에서 정반대에 있는 한 가지 색으로 강한 대비의 강조색을 만듭니다. 삼각 배색은 120° 간격으로 고르게 배치된 세 가지 색으로 균형 있고 선명한 팔레트를 제공합니다. 유사색은 양옆으로 30° 떨어진 이웃 색으로 차분하고 통일감 있는 조합을 만듭니다. 사각 배색은 90° 간격의 네 가지 색으로 다채로운 배색을 제공합니다. 각 결과에는 정확한 hex 코드가 표시되고, 한 번 클릭하면 그 값이 클립보드에 복사되어 CSS나 디자인 파일, 스타일 가이드에 바로 붙여넣을 수 있습니다.

배색을 계산하는 방법

기준 색을 HSL로 변환한 뒤 채도와 명도는 그대로 두고 색상(hue)만 회전시켜 각 배색을 만들고, 다시 hex 코드로 변환합니다. 보색은 hue를 180°, 삼각 배색은 120°와 240°, 유사색은 −30°와 +30°, 사각 배색은 90°·180°·270° 회전합니다. 입력한 기준 색은 항상 첫 번째 칸으로 그대로 유지됩니다. 계산이 결정적이라 같은 색과 같은 배색을 넣으면 항상 같은 팔레트가 나옵니다. 표준 6자리 hex, #f00 같은 축약형, 앞의 # 없는 값 모두 입력할 수 있으며 색상 선택기와 텍스트 입력란은 서로 동기화됩니다.