배색 생성기

이 배색 생성기가 하는 일

기준 hex 색상을 고르거나 붙여넣고 배색 유형을 선택하면 그 색과 어울리는 색을 즉시 보여줍니다. 보색은 색상환에서 정반대에 있는 한 가지 색으로 강한 대비의 강조색을 만듭니다. 분할 보색은 그 정반대 색 대신 양옆에 있는 두 색을 써서 대비는 살리되 부드럽게 만듭니다. 삼각 배색은 120° 간격으로 고르게 배치된 세 가지 색으로 균형 있고 선명한 팔레트를 제공합니다. 유사색은 양옆으로 30° 떨어진 이웃 색으로 차분하고 통일감 있는 조합을 만듭니다. 직사각 배색은 60° 떨어진 보색 두 쌍, 정사각 배색은 90° 간격으로 고르게 놓인 네 가지 색으로 다채로운 배색을 제공합니다. 단색 배색은 색상(hue)은 그대로 두고 더 밝은 색과 더 어두운 색을 만듭니다. 각 결과에는 정확한 hex 코드가 표시되고, 한 번 클릭하면 그 값이 클립보드에 복사되어 CSS나 디자인 파일, 스타일 가이드에 바로 붙여넣을 수 있습니다. 색상 칸 아래 표에는 각 색이 HEX·rgb()·hsl()로도 나오고, 그 위의 색상환에서 기준 색을 끌어 옮기면 배색 전체가 따라 움직입니다. 채도와 명도 슬라이더는 색상(hue)은 그대로 두고 기준 색의 채도와 명도를 바꾸며, 나머지 색도 함께 따라옵니다. 내보내기 아래의 “색끼리의 대비”는 모든 색 쌍의 WCAG 대비 비율을 보여 주고 일반 텍스트 AA를 통과하는 값은 굵게 표시하며, “모든 색의 밝은 톤과 어두운 톤”은 색마다 밝은 톤부터 어두운 톤까지 단계를 그려 누르면 그 색을 복사합니다. 마지막의 “예시 페이지에 입힌 팔레트”는 첫 번째 색을 머리글, 두 번째 색을 제목과 버튼, 세 번째 색을 링크, 마지막 색을 배지로 쓴 작은 예시 페이지를 그리며, 색 위의 글자는 검정과 흰색 중 더 잘 읽히는 쪽으로 둡니다. 색 하나를 HEX·rgb()·hsl() 말고 OKLCH·CMYK 같은 형식으로도 보려면 색상 변환기를 쓰세요.

배색을 계산하는 방법

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