HSL 변환기 무료 온라인: HSL 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% 줌으로 스크린샷을 찍지 않으면 가장자리의 안티앨리어싱된 픽셀이 잡혀 색이 왜곡됩니다.

A 서로 연관되어 있지만 동일하지는 않습니다. HSL은 이중 원뿔 색 공간으로 밝기가 검정에서 흰색까지 이어집니다. L=50%일 때 색상의 가장 순수한 형태를 얻습니다. HSV는 단일 원뿔로 밝기가 검정에서 전체 색상까지 확장됩니다. 순수한 노란색은 HSL(60, 100%, 50%)이지만 HSV(60, 100%, 100%)입니다. 이 변환기는 HSL을 따릅니다. 포토샵의 HSV 슬라이더에서 값을 가져오면 채도와 밝기를 수동으로 조정해야 합니다. CSS 작업에서는 HSL이 현대 `hsl()` 함수에 직접 매핑됩니다.

A 흔한 오해인데, 아닙니다. HSL(210, 50%, 40%)과 HEX 값 #336699은 같은 색을 다르게 표기한 것뿐입니다. 정확도는 표기법이 아니라 모니터에 달려 있어요. 다만 미세 조정은 HSL이 훨씬 편합니다. 채도를 5% 올리는 게 HEX 자릿수를 감으로 바꾸는 것보다 빠르니까요. HSL로 탐색하고 마지막에 HEX를 복사하세요.

A 선생님들과 학생들이 채도 조절에 따른 색상 변화를 시연할 때 이 도구를 자주 씁니다. 슬라이더를 조작할 때 바뀌는 HEX 코드를 화면에 띄우면 명도가 0퍼센트일 때 왜 검은색이 되는지 쉽게 가르칠 수 있어요.

A 마케팅 부서는 소셜 미디어 그래픽과 인쇄물에서 정확한 색상 코드를 유지해야 합니다. 알려진 HEX를 입력하고 HSL 값을 추출하여 브랜드 가이드라인에 기록하세요. 디자이너는 밝기를 15퍼센트 올려서 승인된 호버 상태를 쉽게 만들 수 있습니다. 추출된 HEX 코드를 에이전시 파트너들과 공유해 보세요.