HSL 변환기 무료 온라인: HSL HEX RGB 색상 변환 즉시

A Hue(색조, 0-360°), Saturation(채도, 0-100%), Lightness(명도, 0-100%). RGB보다 디자이너에게 직관적.

A RGB는 빨강/초록/파랑 채널. HSL은 색조/채도/명도로 같은 색의 변형 조절이 쉬움.

A H와 S를 유지하고 L만 변경. L=90% 매우 밝게, L=50% 보통, L=10% 매우 어둡게.

A 밝기 슬라이더를 100%로 올리면 색상 또는 채도 값에 관계없이 항상 흰색이 됩니다. 최대 밝기는 어떤 색상이든 완전히 씻어내기 때문입니다. HEX 코드는 #FFFFFF로, RGB 값은 255, 255, 255로 변경됩니다. 색상을 가장 밝은 상태로 빠르게 재설정하는 방법입니다.

A 모니터마다 색상 재현 방식이 다릅니다. 보정된 디스플레이에서 선명한 HSL 값이 보정되지 않은 노트북 화면에서는 탁하게 보일 수 있습니다. 이는 도구 문제가 아니라 하드웨어 차이입니다. 디자인을 확정하기 전에 최소 두 대의 기기에서 색상을 테스트해보세요. 웹 작업 시 CSS에 HEX와 RGB 대체 값을 모두 포함하면 화면 간 차이를 줄일 수 있습니다.

A 직접적인 기능은 없습니다 — 이 도구에는 저장 버튼이나 내보내기 기능이 내장되어 있지 않아요. 하지만 2초면 직접 할 수 있습니다. 슬라이더를 움직일 때 실시간으로 업데이트되는 HEX 코드를 복사해서 디자인 소프트웨어, CSS 파일, 메모 앱에 붙여넣기 하면 됩니다. HSL 조합을 실험하는 동안 팔레트 수집용 문서를 따로 열어두는 것을 추천합니다.

A 이 HSL 변환기는 투명도를 처리하지 않습니다 — 순수한 단색만 출력합니다. 불투명도가 필요하면 획득한 HEX 또는 RGB 코드를 CSS에서 rgba(255, 100, 50, 0.7)처럼 별도 알파 채널과 결합하세요. 대부분의 디자인 작업에서는 이 도구가 제공하는 완전 불투명 색상만으로 충분합니다.

A 이 도구에는 대비 확인 기능이 직접 포함되어 있지 않습니다. 하지만 우회 방법이 있습니다. 슬라이더로 배경색을 설정하고 HEX 코드를 복사한 다음, 텍스트 색상도 같은 방식으로 설정하세요. 두 HEX 값을 무료 WCAG 대비 계산기 웹사이트에 입력하면 됩니다. 일반 텍스트는 최소 4.5:1, 큰 텍스트는 3:1 비율이 필요합니다. 브랜드 색상을 고를 때면 항상 대비 확인 탭을 열어둡니다.