색상 조합 생성기

사용 방법

1. 페이지를 열면 기본 기준색 #4F46E5로 만든 조합과 명도 단계가 이미 화면에 있습니다. 첫 결과에는 클릭이 필요 없습니다.
2. 내 색으로 바꾸세요. #4F46E5, rgb(79, 70, 229), hsl(243, 75%, 59%) 또는 영어 CSS 색상 이름을 붙여 넣거나 시스템 선택기를 쓰거나 “무작위 기준색”을 누르세요. 입력하는 즉시 모두 다시 계산됩니다.
3. 색상이 어떻게 관계되는지 고르세요. 유사(0°, ±30°, ±60°)는 이웃에 머물고, 보색(0°, 180°)은 정반대, 삼각(0°, 120°, 240°)과 사각(0°, 90°, 180°, 270°)은 간격을 넓히며, 분할 보색(0°, 150°, 210°)은 충돌 없이 긴장을 유지합니다. 명도 단계는 항상 기준색을 명도 88 / 70 / 52 / 34 / 18%로 만든 것이므로 “내 주색의 밝은/어두운 버전”을 바로 얻습니다.
4. 견본을 누르면 선택한 형식으로 값이 복사됩니다. “CSS 복사”는 전체를 :root 사용자 정의 속성으로, “값 복사”는 한 줄에 하나씩 줍니다.

범위, 제한 및 자주 묻는 질문

• 규칙은 다섯 가지이며 사용자 지정 각도와 색상환은 없습니다. 정확한 색상이 필요하면 기준색을 지정하거나 색상 변환기를 사용하세요.
• 명도 단계는 “내 색에서 흰색/검은색에 25% 가까이”가 아니라 고정 명도 단계(88 / 70 / 52 / 34 / 18%)를 씁니다. 기준색이 달라도 사다리를 비교할 수 있지만 이미 아주 밝거나 어두운 기준색은 단계가 거의 비슷하게 나옵니다.
• 회색, 흰색, 검은색 기준색은 모두 같은 조합이 됩니다. 완전히 채도가 빠진 색에서는 색상 회전이 아무것도 바꾸지 않습니다. 이는 정직한 산술이지 버그가 아닙니다.
• 불투명한 색만 지원합니다. 알파, rgba(), 8자리 HEX는 없습니다. 투명도는 색상 변환기의 역할입니다.
• sRGB 화면 값만 다룹니다. CMYK, Lab, 색 관리는 없습니다. 같은 HEX도 보정되지 않은 디스플레이에서는 다르게 보이며 이 도구는 그 사실을 숨기지 않습니다.
• 대비는 견본에 인쇄할 값을 검정 또는 흰색으로 정할 때만 씁니다. 대비율은 보고하지 않으며 접근성 검사는 색상 변환기를 사용하세요.
• 기하학이 색상 관계를 보장할 뿐 미학을 보장하지는 않습니다. 높은 채도의 보색 쌍은 여전히 요란할 수 있습니다. 그것이 규칙의 의미입니다.
• “무작위 기준색”은 브라우저의 crypto.getRandomValues에서 뽑습니다. 암호학적으로 강하지만 물리적 엔트로피 서비스는 아니며 브라우저가 원천을 제공하지 않으면 비활성화됩니다. 나머지 기능은 계속 동작합니다.
• 아무것도 업로드, 저장, URL 기록되지 않습니다. 새로고침하면 #4F46E5 + 유사 + HEX로 돌아가고 공유 버튼은 페이지 링크만 공유합니다. 조합은 “CSS 복사”로 가져가세요.
• 영어 CSS 색상 이름을 입력으로 받는 것은 CSS 문법이기 때문입니다. 현지화된 색상 이름 출력은 없습니다. 같은 색을 중국어나 아랍어로 인쇄할 표준 이름이 없기 때문입니다.
• 반올림은 표시 수준입니다. 채널은 정수이므로 같은 색을 HEX와 HSL 사이로 변환하면 채널이 1만큼 달라질 수 있습니다.