단색조 색상 생성기

6자리 소문자 hex 코드로 다섯 가지 색상을 반환합니다. 색상 3은 기준 색상이고, 색상 1과 2는 같은 색조의 더 어두운 색상, 색상 4와 5는 더 밝은 색상입니다.

도구는 hex 코드를 HSL로 변환하고 명도만 변경합니다. 명도를 30포인트 낮추고, 15포인트 낮추고, 15포인트 높이고, 30포인트 높입니다. 색조와 채도는 그대로 유지되므로 다섯 가지 색상은 모두 같은 색상 계열에 속합니다.

예. 어두운 단계의 명도는 10% 미만으로 내려가지 않고 밝은 단계는 90%를 넘지 않으므로, 순수한 검정과 흰색은 제외됩니다.

명도에 10% 및 90% 제한이 있어 양 끝에 가까운 단계는 같은 값으로 합쳐집니다. #000000의 경우 어두운 두 단계가 모두 #1a1a1a이 되어 기준 색상보다 밝아지고, #ffffff의 경우 밝은 두 단계가 모두 #e6e6e6이 됩니다.

#ff0000의 경우 도구는 #660000, #b30000, #ff0000, #ff4d4d, #ff9999를 반환합니다. 빨간색의 명도는 50%이므로 더 어두운 두 단계와 더 밝은 두 단계를 모두 사용할 수 있습니다.

#이 있거나 없어도 되는 3자리 또는 6자리 hex 코드 하나를 입력하세요. 예: #3366cc 또는 36c. RGB 및 HSL 표기와 색상 이름은 지원하지 않으므로 먼저 hex로 변환하세요.

색조, 채도, 명도를 정수로 반올림하므로 HSL로 변환한 뒤 다시 변환하면 한 채널 값이 한 단계 달라질 수 있습니다. 예를 들어 #ff5733은 단계의 가운데에서 #ff5833로 표시됩니다.

예. 색조 기반 배색과 달리 단색조 단계는 명도를 변경하므로 회색을 입력하면 더 밝고 어두운 회색이 만들어집니다. 검정과 흰색은 앞서 설명한 10~90% 범위로 제한됩니다.

가장 어두운 색상은 텍스트와 테두리에, 기준 색상은 기본 동작에, 가장 밝은 색상은 배경과 마우스 오버 상태에 사용하세요. 인접한 단계의 명도 차이가 15포인트에 불과하므로 WCAG 대비 검사기로 텍스트 대비를 확인하세요.

예. 이 도구는 색상 팔레트 생성기의 단색조 옵션과 동일하게 작동하므로, 같은 기준 색상에 대해 두 도구가 동일한 다섯 가지 hex 코드를 반환합니다.