RGB를 HSL로 변환
빨강, 초록, 파랑 값을 색상, 채도, 명도로 변환해 CSS에서 색을 더 쉽게 조정해 보세요.
rgb 입력
결과 · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
사용 방법: RGB를 HSL로 변환
- 1
색상 입력하기
색상 코드를 입력하거나 색상 선택기로 색상을 고르세요. 각 필드에는 표시된 형식으로 입력할 수 있습니다.
- 2
변환 결과 확인하기
입력하는 즉시 결과가 업데이트되며 색상의 실시간 미리보기도 함께 표시됩니다.
- 3
코드 복사하기
필요한 값을 클릭 한 번으로 복사해 디자인, CSS 또는 인쇄 설정에 붙여 넣으세요.
RGB와 HSL 비교
RGB는 세 가지 빛 채널로 색을 만들어 화면에는 잘 맞지만 손으로 조정하기는 어려워요. rgb(255, 61, 114)를 조금 어둡게 하려면 세 숫자를 모두 바꿔야 해요. HSL은 같은 색을 색상(색상환의 0~360° 각도)과 퍼센트로 된 채도, 명도로 나타내며, 그 분홍색은 hsl(344, 100%, 62%)가 돼요.
이런 구조 덕분에 HSL은 색의 단계와 테마를 만들기에 이상적이에요. 색상과 채도는 그대로 두고 명도를 낮추면 마우스 오버나 누른 상태의 색이, 명도를 높이면 옅은 배경색이 되고, 채도를 낮추면 차분한 버전이 돼요. 모든 최신 브라우저가 CSS에서 hsl()을 지원하므로 결과를 바로 붙여 넣을 수 있어요. 변환기는 값을 정수로 반올림하기 때문에 다시 변환하면 채널 값이 1단계 달라질 수 있어요.
모든 작업은 브라우저에서 로컬로 처리되며, 이미지는 서버에 절대 업로드되지 않습니다.