HSV에서 HSL로

디자인 시스템에서 다양한 색상 조작을 위해 HSV 색상 값을 HSL로 변환합니다.

향상된 디자인 유연성을 위해 직관적인 색상 모델 간 변환

색상 변환기

HSL Output

hsl(0°, 100%, 50%)

HSL Values

색조 0°

0-360° color wheel position

포화 100%

0-100% color intensity

가벼움 50%

0-100% brightness

hsl(0°, 100%, 50%)

추가 형식

HSV Value

hsv(0°, 100%, 100%)

RGB Value

rgb(255, 0, 0)

CSS 사용

color: hsl(0°, 100%, 50%);
background-color: hsl(0°, 100%, 50%);

전환 인사이트

이 생생한 빨간색은 두 색상 모델 모두에서 완전한 채도를 유지하지만 밝기 측정값이 달라 값(HSV)과 명도(HSL) 간의 주요 차이점을 보여줍니다.

변환 예제

생생한 레드

HSV 0°, 100%, 100%

HSL 0°, 100%, 50%

차이점 가벼움 = 가치의 50%

포레스트 그린

HSV 120°, 75%, 55%

HSL 120°, 60%, 35%

차이점 밝기 규모에 맞게 조정됨

로얄 블루

HSV 220°, 75%, 88%

HSL 220°, 70%, 55%

차이점 인지를 위해 균형 잡힌 가벼움

소프트 핑크

HSV 340°, 40%, 95%

HSL 340°, 70%, 80%

차이점 HSL에서 포화도가 증가했습니다.

뮤티드 퍼플

HSV 270°, 30%, 70%

HSL 270°, 30%, 60%

차이점 밝기를 아래로 조정

그레이 톤

HSV 0°, 0%, 50%

HSL 0°, 0%, 50%

차이점 회색조와 동일

권장 도구

HSL to HSV Converter

대체 색상 조작을 위해 HSL 색상 값을 HSV로 다시 변환합니다.

컬러 하모니 생성기

HSL 기반 색상 관계를 사용하여 균형 잡힌 색상 구성표 만들기

HSL Color Scales

HSL 조정을 사용하여 모든 색상의 색조, 음영 및 톤을 생성합니다.

색상 모델 비교기

HSV, HSL, RGB 및 CMYK 모델에서 색상이 어떻게 나타나는지 시각화합니다.

이 도구에 관하여

HSV-HSL 변환기는 두 가지 직관적인 색상 모델 간의 원활한 전환을 용이하게 하며, 각각은 서로 다른 디자인 작업과 워크플로에 대해 뚜렷한 장점을 제공합니다.

HSV (Hue, Saturation, Value) represents colors based on human perception, with Value controlling the brightness from black to full color. This makes it particularly intuitive for tasks like adjusting lightness while preserving chromatic intensity, common in interface design.

HSL (Hue, Saturation, Lightness) structures color around perceived lightness, with Lightness ranging from black through the pure color to white. This model excels at creating consistent color scales and harmonies, as equal increments in lightness produce perceptually consistent steps.

두 모델 모두 색조와 채도 구성 요소를 공유하지만, 밝기(명도 대 명도) 처리 방식은 근본적으로 다릅니다. 이 변환기는 정밀한 수학적 알고리즘을 사용하여 시각적 일관성을 유지하면서 두 모델 간의 변환을 수행하므로 디자이너는 워크플로우 전반에 걸쳐 각 모델의 장점을 활용할 수 있습니다.