CSS에서 HSL 및 HSLa 색상을 사용하는 방법

CSS에서 HSL 및 HSLa 색상을 사용하는 방법과 RGB/RGBa 및 Hex와 다른 점에 대해 알아보세요.

HSL 및 HSLa는 CSS의 색상 방법으로, Hex 또는 RGB/RGBa의 대안으로 사용하여 더 많은 실제를 적용할 수 있습니다. 귀하의 웹사이트에 색상.

HSL과 HSLa는 CSS 세계에서는 다소 생소하지만 일반적인 색상 세계에서는 1970년대부터 존재해 왔습니다.

HSL 대 HSLa:

HSLa는 투명도 값(또는 불투명도)을 지정하는 데 사용할 수 있는 알파 채널이 있는 HSL의 확장입니다. RGB와 RGBa가 서로 다른 것처럼 HSL과 HSLa도 다릅니다.

HSL/HSLa 사용

HSL 및 HSLa를 사용하기 위해 CSS는 두 가지 색상 함수 hsl()를 제공합니다. 및 hsla() .

기본 HSL 사용:

div {
    background-color:hsl(0, 100%, 50%); /* Red */
}

HSL

기본 HSLa 사용:

div {
    background-color:hsla(0, 100%, 50%, 0.6);
}

HSLa

HSL이 RGB 및 Hex보다 나은지 궁금할 것입니다. CSS 언어에 HSL이 추가된 이유가 있겠죠?

HSL이 더 낫다라고 말하기는 어렵습니다. Hex 및 RGB보다 (일부는 그 점을 지적하지만). 원하는 작업에 따라 다릅니다.

HSL의 이면에 있는 아이디어는 실제 세계를 모방하는 직관적인 색상 형식을 제공하는 것입니다. HSL을 사용하면 색상의 명암을 조정하여 표현을 변경할 수 있습니다. 색상 자체를 변경하지 않고 색상.

16진수와 RGB는 그렇게 할 수 없습니다.

예를 들어, 지금 방의 색상을 보면 정확한 색상을 인식하는 방식은 다음과 같은 것들에서 오는 빛의 결과입니다.

현재 창문을 통해 들어오는 자연광만 있다고 가정해 보겠습니다.

이제 커튼을 내리십시오. 이렇게 하면 방의 밝기가 제거되고 방의 모든 색상에 대한 인식이 바뀝니다.

이제 방에 있는 모든 항목의 색상이 커튼을 내리기 전과 비교하여 더 어두운 버전으로 보입니다.

그러나 이것이 요점입니다.

밝기를 제거하면 방에 있는 사물의 실제 색상이 바뀌지 않고 인식이 바뀝니다. 해당 색상의 더 밝은 버전에서 더 어두운 버전으로.

이제 방의 전후 사진을 찍는다면 커튼을 내리고 RGB 형식으로 전/후 색상 값을 가져오면 해당 전/후의 색상은 두 가지 다른 색상이 됩니다. 16진수 색상도 마찬가지입니다.

그러나 HSL은 두 가지 색상을 제공하지 않지만 밝기 값이 다른 동일한 색상(HSL의 L)을 제공합니다.

방에 갈색 월넛 색상의 테이블이 있다고 가정해 보겠습니다. 이제 커튼을 올린 상태로 사진을 찍고 커튼을 내린 상태로 사진을 찍습니다.

이러한 전후 사진의 Hex 및 RGB 값은 각각 두 개의 다른 색상 값이 됩니다.

전후 사진의 HSL 값은 같은 색상이지만 밝기 값이 다릅니다.

일부는 다음과 같이 주장합니다.

위의 내용은 이미 세 가지 색상 방법을 모두 이해하고 경험이 있는 대부분의 사람들에게 해당되지만 경험은 다를 수 있습니다.

나는 항상 사람들이 가장 잘하는 일을 가장 잘한다고 말합니다. 따라서 Hex 또는 RGB를 사용한 경험이 있고 HSL에 대한 경험이 전혀 없다면 처음에는 HSL을 읽기가 더 어렵다는 것을 알게 될 것입니다.

HSL이 다른 점을 요약하자면: