HSL 변환기 무료 온라인: HSL HEX 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 비율이 필요합니다. 브랜드 색상을 고를 때면 항상 대비 확인 탭을 열어둡니다.

A 네, 하지만 혼합은 직접 해야 합니다. 슬라이더로 첫 번째 색상을 선택하고 HEX 코드를 복사한 후, 두 번째 색상을 조정하세요. 부드러운 CSS 그라데이션을 위해 색상 차이는 30도 이내로 유지하고 명도는 최소 20% 이상 차이 나게 조정하세요. 채도는 둘 다 50-70%로 설정하면 풍부한 전환 효과를 얻습니다. 두 HEX 코드를 'background: linear-gradient(#HEX1, #HEX2)'처럼 그라데이션 속성에 붙여넣으면 됩니다.

A 그 범위는 임의로 정해진 게 아닙니다. 원래 색상환 개념과 일치하도록 설계됐어요. 빨강은 0°, 초록은 120°, 파랑은 240°에 위치하며, 360°에서 다시 빨강으로 완벽하게 순환합니다. 1도씩 조정하는 게 과하다고 느낄 수 있지만, 그만큼 정밀한 컨트롤이 가능합니다. 대부분의 디자인 작업에서는 5° 또는 10° 단위면 충분해요. 슬라이더를 끌면서 Shift 키를 누르면 자동으로 그 큰 단위로 스냅됩니다.

A 있습니다. 추측하는 것보다 훨씬 낫죠. 스크린샷을 스포이드 기능이 있는 이미지 편집기에서 열고 원하는 정확한 픽셀을 샘플링하세요. 그러면 RGB 값이 나옵니다. 그 세 숫자를 이 변환기의 RGB 입력란에 넣으면 HSL 분해 값과 해당 HEX가 즉시 표시됩니다. 로고, 사진, UI 목업에서 색을 뽑아낼 때 아주 유용합니다. 팁: 100% 줌으로 스크린샷을 찍지 않으면 가장자리의 안티앨리어싱된 픽셀이 잡혀 색이 왜곡됩니다.