CSS 참조 가이드

CSS @규칙(RULES)

CSS 속성 전체

CSS @charset 규칙 CSS 함수(Function)

CSS hsl() 함수

CSS hsl() 함수는 CSS 사용 시 색상 값을 제공하는 데 사용됩니다. 이는 색상의 톤, 풍부도 및 빛 성분을 지정하여 색상 값을 지정할 수 있게 합니다.

CSS 함수

온라인 예제

HSL 색상 정의:

예제

<!DOCTYPE html>
<title>기본 강의(oldtoolbag.com)</title>　
<style>
body {
　　　　background: hsl(30,　100%,　50%);
　　　　color: hsl(30,　100%,　75%);
　　　　font-size:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>우리가 해본 적 없는 일을 위해 시간을 들여야 합니다.../p>

테스트를 보세요 ‹/›

정의와 사용법

hsl() 함수는 색상을 정의하기 위해 색상, 채도, 밝기를 사용합니다.

HSL은 색상, 채도, 밝기(영어: Hue, Saturation, Lightness)입니다.

색상(H)색의 기본 속성으로, 일반적으로 말하는 색 이름, 예를 들어 빨간색, 노란색 등입니다.
채도(S)색의 순도를 의미하며, 순도가 높을수록 색이 순수하고, 낮으면 점점 회색으로 변합니다. 0을 선택합니다-100%의 값
밝기(L)0-100%，밝기를 증가시키면 색상이 흰색으로 변하며, 밝기를 감소시키면 색상이 검은색으로 변합니다.

HSL은 RGB 색상 모델의 점을 원�ylinder 좌표계에서 표현하는 방법입니다. 이 두 표현 방법은笛卡尔 좌표계 기반의 지리적 구조 RGB보다 더 직관적이려고 시도합니다.

지원 버전: CSS3

브라우저 호환성

표의 숫자는 이 함수를 지원하는 첫 번째 브라우저 버전 번호를 나타냅니다.

함수
hsl()	1.0	9.0	1.0	3.1	9.5

CSS 문법

hsl(hue,　saturation,　lightness)

값	설명
hue - 색상	색상을 정의합니다 (0에서 360) - 0 (또는 360)이 빨간색입니다, 120이 녹색입니다, 240이 파란색입니다
saturation - 채도	채도를 정의합니다; 0%이 회색입니다, 100%이 모든 색상입니다
lightness - 밝기	밝기 0%을 어둡게 정의합니다, 50%이 일반입니다, 100%이 흰색입니다

색상 변화의 예시

아래 그래프에서 모든 샘플의 톤과 밝기는 완전히 같습니다. 유일한 차이는 채도입니다.

`hsl(240, 100%, 5)`
`hsl(240, 90%, 5)`
`hsl(240, 80%, 5)`
`hsl(240, 70%, 5)`
`hsl(240, 60%, 5)`
`hsl(240, 50%, 5)`
`hsl(240, 40%, 5)`
`hsl(240, 30%, 5)`
`hsl(240, 20%, 5)`
`hsl(240, 10, 5)`
`hsl(240, 0%, 5)`

아래 그림에서 모든 샘플의 톤과 채도는 완전히 같습니다. 유일한 차이는 밝기 수준입니다.

`hsl(240, 100%, 10)`
`hsl(240, 100%, 9)`
`hsl(240, 100%, 8)`
`hsl(240, 100%, 7)`
`hsl(240, 100%, 6)`
`hsl(240, 100%, 5)`
`hsl(240, 100%, 4)`
`hsl(240, 100%, 3)`
`hsl(240, 100%, 2)`
`hsl(240, 100%, 10)`

CSS 함수

CSS @charset 규칙 CSS 함수(Function)