Less의 색상 채널 기능은 무엇입니까?

LESS(Learner CSS)는 일반 CSS 위에 개발된 전처리기로서 개발자가 CSS 코드를 쉽게 유지 관리하고 맞춤 설정할 수 있습니다. 예를 들어 CSS 코드에서 변수와 함수를 생성할 수 있습니다. 따라서 개발자는 일반 CSS에서 일반적으로 하는 것처럼 중복 코드를 작성할 필요가 없습니다.

색상 채널 기능도 Less의 또 다른 중요한 기능으로, 색상 값을 입력으로 받아 특정 색상 채널의 값을 반환합니다.

이 튜토리얼에서는 예시를 통해 Less의 12가지 색상 채널 기능에 대해 알아봅니다. 모든 색상 채널 기능의 목록입니다.

• Red() 함수

• Green() 함수

• Blue() 함수

• Alpha() 함수

• Hue() 함수

• Saturation() 함수

• 밝기() 함수

• Hsvhue() 함수

• Hsvsaturation() 함수

• Hsvvalue() 함수

• Luma() 함수

• 휘도() 함수

Red() 함수

red()는 목록의 첫 번째 색상 채널 함수입니다. 색상 값을 인수로 사용하고 현재 색상의 빨간색 강도인 0에서 255 사이의 값을 반환합니다.

예

아래 예에서는 주황색 rgb 값을 "mycolor" 변수의 값으로 저장합니다. 그런 다음 "myclor"를 매개변수로 전달하여 red() 함수를 사용하고 "redchannle" 변수에 반환 값을 저장합니다.

출력에서 사용자는 "redchannle" 변수의 값이 255임을 확인할 수 있습니다.

으아아아

출력

으아아아

Green() 함수

green()은 적은 색상 채널 기능 목록에서 두 번째입니다. 색상 값을 받아들이고 0에서 255 사이의 녹색 강도를 반환합니다.

예

아래 예에서는 RGB 색상 값을 "mycolor" 변수에 저장합니다. 우리는 항상 rgb() 메소드의 두 번째 인수로 녹색의 강도를 씁니다.

green() 함수를 사용하여 rgb 값에서 녹색 채널 값을 가져오고 출력에서 ​​15를 반환하는 것을 볼 수 있습니다.

으아아아

출력

으아아아

blue() 함수

blue() 함수는 인수로 전달된 색상과 연관된 파란색 채널의 값을 반환합니다.

사용자는 아래 예제에 따라 less에서 blue() 함수를 사용할 수 있습니다.

예

여기에서는 주황색 색조인 blue() 함수의 매개변수로 “#FF5733” 16진수 색상 값을 전달하고 있습니다.

출력에는 파란색 채널 값으로 51이 표시됩니다. 이는 특정 색상의 파란색 강도가 51임을 의미합니다.

으아아아

출력

으아아아

알파() 함수

이름에서 알 수 있듯이 alpha() 함수는 알파 채널 값을 나타내는 현재 색상의 불투명도를 가져오는 데 사용됩니다.

rgba() 색상 형식에서는 알파 값을 마지막 매개변수로 전달합니다.

예

아래 예의 "color" 변수는 rgba 색상 값을 저장합니다. 여기서는 rgba의 알파 채널 값으로 "0.9"를 전달합니다.

alpha() 함수를 사용하여 "색상"의 불투명도를 가져오며 출력에서 ​​볼 수 있듯이 0.9를 반환합니다.

으아아아

출력

으아아아

Hue() 함수

hue() 함수는 특정 색상의 색상 값을 얻는 데 사용됩니다. 색상환에 있는 색상의 색상 각도를 0에서 360 사이의 값으로 반환합니다.

예

예제에서는 RGB 값을 "color" 변수에 저장합니다. 그런 다음, Hue() 함수를 사용하여 현재 색상의 색상 값을 가져왔습니다.

hsl()을 사용하여 색상을 정의할 때 색상 값을 사용합니다. Hue() 함수는 rgb(34, 9, 0) 색상 값 16을 반환합니다.

으아아아

출력

으아아아

채도() 함수

saturation() 함수는 인수로 전달된 색상의 채도 값(0~100% 범위)을 반환합니다.

예

이 예에서는 채도 값을 얻기 위해 RGB(34, 9, 76) 색상을 사용합니다. 여기서는 hsl() 메서드의 saturation() 함수를 실행하여 현재 색상의 채도 값을 구합니다.

출력에서 포화값으로 78.8%를 반환하는 것을 볼 수 있습니다

으아아아

출력

으아아아

밝기() 함수

brightness() 함수는 특정 함수의 밝기를 얻는 데 사용됩니다. 0%에서 100% 사이의 값을 반환합니다.

예

여기서는 rgb(34, 9, 76) 색상의 밝기 값을 얻어서 hsl() 메서드를 사용하여 다른 색상을 정의할 때 사용합니다. 출력에서 사용자는 Brightness() 메서드가 16.7%의 값을 반환하는 것을 확인할 수 있습니다.

으아아아

출력

으아아아

Hsvhue() 함수

hsvhue() 함수는 hsv 색상 모델의 색상 값을 얻는 데 사용됩니다.

예

이 예에서는 0에서 360 사이의 값을 반환하는 hsvhue() 함수를 사용하여 hsv 모델의 색상 값을 가져옵니다. 출력에서 색상 값 16을 반환하는 것을 확인할 수 있습니다.

으아아아

출력

으아아아

Hsvsaturation() 함수

hssaturation() 함수는 hsv 색상 모델에서 채도 값을 얻는 데 사용됩니다.

예

이 예에서는 색상 값을 매개변수로 전달하여 hsvsaturation() 함수를 사용하고 있습니다. 출력에서 100% 채도를 반환하는 것을 볼 수 있습니다.

@hsvsaturationValue: hsvsaturation(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, @hsvsaturationValue,80%);
}

输出

.demo {
   background-color: hsv(65, 100%, 80%);
}

Hsvvalue() 函数

hsvalue()函数用于获取hsv颜色模型中的亮度值。

示例

这里，我们使用 hsvvalue() 函数来获取 hsv 模型中颜色的亮度。它返回 100%，我们可以在输出中看到。

@hsvvalue: hsvvalue(rgb(255, 87, 51);
.demo {
   background-color: hsv(65, 90%, @hsvvalue);
}

输出

.demo {
   background-color: hsv(65, 90%, 100%);
}

Luma() 函数

luma() 函数用于通过伽马校正获取特定值的亮度值。它返回 1 到 100 之间的值。

示例

在下面的示例中，我们使用 luma() 函数获取经过伽玛校正的 rgb(50, 250, 150) 颜色的亮度值。在输出中，我们可以看到它返回了 71.251% 的值。

.demo {
   background: luma(rgb(50, 250, 150));
}

输出

.demo {
   Background: 71.251%
}

亮度()函数

luminance() 函数还用于获取特定值的亮度值，但不进行伽玛校正。

示例

在这个例子中，我们使用luminance()函数来获取没有伽马校正的rgb(50,250,150)颜色的亮度值。用户可以观察相同颜色值的luma()和luminance()函数的输出值之间的差异。

.demo {
   background: luminance(rgb(50, 250, 150));
}

输出

.demo {
  Background: 78.533 %
}

위 내용은 Less의 색상 채널 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!