HSL 입력 규칙
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다.
1. HSL 값 입력
색상을 직접 고르거나 슬라이더를 조정하거나 값을 붙여 넣으세요.
9
100%
64%
빠른 프리셋
2. 실시간 미리보기
hsv(9, 72%, 100%)
tomato
미리보기원본
rgb(255, 99, 71)
20% 밝게
rgb(255, 130, 108)
20% 어둡게
rgb(204, 79, 57)
보색
rgb(71, 227, 255)
색상 정보
색상 이름:tomato밝기:56%휘도:0.306흰색과의 대비:2.95 : 1검은색과의 대비:7.13 : 1
시각 비교
Aa
흰색 텍스트
Aa
검은색 텍스트
3. 결과
hsv(9, 72%, 100%)
다른 형식
HEX#FF6347
RGBrgb(255, 99, 71)
RGBArgba(255, 99, 71, 1)
HSLhsl(9, 100%, 64%)
HSLAhsla(9, 100%, 64%, 1)
HSVhsv(9, 72%, 100%)
CMYKcmyk(0%, 61%, 72%, 0%)
이름tomato
컬러 팔레트
알고 계셨나요?
EyeDropper API를 지원하는 브라우저에서는 화면에서 색상을 가져올 수 있습니다.
한눈에 보기
색조·채도·명도 기반 CSS 색상 편집에 쓰는 HSL를 피커 중심 작업용 색조·채도·명도 값(으)로 바꿔 컬러 피커, 색조 회전과 그래픽 제어에 활용합니다. 채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다.
이 도구가 하는 일
색조·채도·명도 기반 CSS 색상 편집에 쓰는 HSL를 피커 중심 작업용 색조·채도·명도 값(으)로 바꿔 컬러 피커, 색조 회전과 그래픽 제어에 활용합니다. 원본이 이미 HSL이고 다음 시스템이 HSV만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다.
확인된 기능
HSV 결과 읽기
피커 중심 작업용 색조·채도·명도 값
정확도 한계 확인
채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다. 결과를 재사용하기 전에 대상 환경의 요구사항과 비교하세요.
이럴 때 사용하세요
- 원본이 이미 HSL이고 다음 시스템이 HSV만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다.
- 색조·채도·명도 기반 CSS 색상 편집에 쓰는 HSL를 피커 중심 작업용 색조·채도·명도 값(으)로 바꿔 컬러 피커, 색조 회전과 그래픽 제어에 활용합니다.
- HSL → HSV: 컬러 피커, 색조 회전과 그래픽 제어.
사용 방법
원본 색상 입력
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. “사용 방법: 원본 색상 입력”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
정규화된 미리보기 확인
슬라이더, 직접 입력, 미리 설정된 견본이나 사용 가능한 시스템 피커를 이용하세요. 미리보기에서 HSV 형식화 전 정규화를 확인합니다.
대상 값 복사
HSV 행을 복사하세요. 다른 형식도 비교용으로 보이지만 이 페이지의 목적은 HSL → HSV입니다.
정확도 한계 확인
채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다. 결과를 재사용하기 전에 대상 환경의 요구사항과 비교하세요. HSV 행을 복사하기 전에 미리보기로 파싱 오류를 확인하세요.
제어 항목 설명
HSL 입력 규칙
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. “제어 항목 설명: HSL 입력 규칙”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
HSV 결과 읽기
피커 중심 작업용 색조·채도·명도 값. HSV의 명도 값은 가장 큰 RGB 채널이며 지각 명도가 아닙니다. HSV는 독립 CSS 문법도 아닙니다.
결과가 만들어지는 방식
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. 작업대가 입력을 sRGB 세 채널로 바꾼 뒤 피커 중심 작업용 색조·채도·명도 값(으)로 형식화합니다. HSL은 RGB 변환이며 지각 균일 모델이 아닙니다. HSL 채도와 HSV 채도는 의미가 다릅니다. HSV의 명도 값은 가장 큰 RGB 채널이며 지각 명도가 아닙니다. HSV는 독립 CSS 문법도 아닙니다.
정확도와 한계
- 채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다.
- HSL은 RGB 변환이며 지각 균일 모델이 아닙니다. HSL 채도와 HSV 채도는 의미가 다릅니다.
- HSV의 명도 값은 가장 큰 RGB 채널이며 지각 명도가 아닙니다. HSV는 독립 CSS 문법도 아닙니다.
처리 방식과 개인정보
페이지의 로컬 TypeScript 함수가 값을 변환하므로 이 계산을 위해 색상 값을 서버에 업로드할 필요가 없습니다.
실용 팁
- 반올림된 HSV 결과를 비교할 때 원본 HSL 값을 보관하세요.
- HSV 행을 복사하기 전에 미리보기로 파싱 오류를 확인하세요.
문제 해결
HSL 입력이 거부되는 이유는 무엇인가요?
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. “문제 해결: HSL 입력이 거부되는 이유는 무엇인가요?”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
HSL를 HSV(으)로 바꿨다가 되돌리면 왜 값이 달라지나요?
채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다. “문제 해결: HSL를 HSV(으)로 바꿨다가 되돌리면 왜 값이 달라지나요?”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
정확도 한계 확인
채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다. 알고 있는 지원 값으로 도구를 초기화해 다시 시도한 뒤 알고리즘 오류인지 판단하세요.
자주 묻는 질문
HSL → HSV 전용 변환기는 언제 쓰나요?
원본이 이미 HSL이고 다음 시스템이 HSV만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다. “HSL → HSV 전용 변환기는 언제 쓰나요?”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
HSL 입력이 거부되는 이유는 무엇인가요?
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. “HSL 입력이 거부되는 이유는 무엇인가요?”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
HSL를 HSV(으)로 바꿨다가 되돌리면 왜 값이 달라지나요?
채널 정규화와 정수·백분율 형식화 때문에 HSL → HSV → HSL 왕복 값이 시작값과 달라질 수 있습니다. “HSL를 HSV(으)로 바꿨다가 되돌리면 왜 값이 달라지나요?”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
HSV 결과는 어떤 문법을 사용하나요?
피커 중심 작업용 색조·채도·명도 값. 컬러 피커, 색조 회전과 그래픽 제어. HSV의 명도 값은 가장 큰 RGB 채널이며 지각 명도가 아닙니다. HSV는 독립 CSS 문법도 아닙니다.
변환 전에 HSL 입력을 어떻게 정규화하나요?
색조는 도, 채도와 명도는 백분율로 입력합니다. 색조는 0~360° 범위로 순환 정규화됩니다. HSL은 RGB 변환이며 지각 균일 모델이 아닙니다. HSL 채도와 HSV 채도는 의미가 다릅니다.
변환 중 HSL 값을 업로드하나요?
페이지의 로컬 TypeScript 함수가 값을 변환하므로 이 계산을 위해 색상 값을 서버에 업로드할 필요가 없습니다. 반올림된 HSV 결과를 비교할 때 원본 HSL 값을 보관하세요.
색상 작업 이어가기
원본이 이미 HSL이고 다음 시스템이 HSV만 요구할 때 이 전용 경로를 사용하세요. 여러 표현을 한꺼번에 보려면 통합 변환기를 사용합니다. “색상 작업 이어가기”에서는 이 내용을 HSL → HSV 변환기에 맞게 적용하세요.
관련 도구로 계속하기
HSL → HSV 전용 변환 뒤 작업을 이어가려면 첫 번째 관련 도구를 여세요.
HEX·RGB·HSL·LAB·OKLCH 색상 변환기