웹 색상 HSL 스펙트럼 세밀 제어기
기본 HSL 색상 값을 기준으로 색조, 채도, 명도를 설정 단위씩 정밀 변형하여 단계별 톤온톤 팔레트 생성
디자이너와 개발자가 특정 기본 컬러를 기준으로 조화로운 그라데이션 및 톤온톤 배색을 구성할 수 있도록, HSL(색조, 채도, 명도)의 증가폭 단위를 미세하게 제어하여 연관 컬러 칩 목록을 한눈에 설계해 주는 도구입니다. 별도의 프로그램 설치나 복잡한 회원가입 없이 웹 브라우저에서 즉시 실행되며, 입력한 데이터는 외부 서버로 유출되지 않고 안전하게 로컬 환경에서 처리됩니다.
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
사용 방법
- 기준이 될 HSL 값(0~360, 0~100%)을 기입합니다.
- 각 단계마다 변화를 줄 H(색조), S(채도), L(명도)의 수치 가감 변화 단위폭을 설정합니다.
- 출력할 총 단계 개수(5개~15개)를 선택하고 하단 목록에서 각 컬러 칩의 HEX 및 HSL 최종 변환 코드를 원클릭 복사해 활용합니다.
자주 묻는 질문
- HSL은 어떤 원리로 색을 다루나요?
- HSL은 Hue(색조, 0-360도 각도), Saturation(채도, 0-100% 선명도), Lightness(명도, 0-100% 밝기)로 색을 정의하여, RGB 방식에 비해 사람이 눈으로 보며 색을 직관적으로 조절하기에 가장 뛰어난 색상 체계입니다.
- 채도나 명도 값이 0%나 100%를 넘어가도록 설정하면 어떻게 되나요?
- 값이 범위를 벗어나면 자동으로 0~100% 사이로 고정(클램핑)됩니다. 예를 들어 명도를 계속 낮추다 최소값에 도달하면 그 이후 단계는 모두 같은 검정에 가까운 색으로 표시되니, 원하는 만큼 다양한 톤을 얻으려면 증가폭과 단계 수를 함께 조절하세요.
- 채도나 명도 값이 0%나 100%를 넘어가도록 설정하면 어떻게 되나요?
- 값이 범위를 벗어나면 자동으로 0~100% 사이로 고정(클램핑)됩니다. 예를 들어 명도를 계속 낮추다 최소값에 도달하면 그 이후 단계는 모두 같은 검정에 가까운 색으로 표시되니, 원하는 만큼 다양한 톤을 얻으려면 증가폭과 단계 수를 함께 조절하세요.