Less 中的顏色通道函數有哪些？

LESS（學習者 CSS）是在普通 CSS 之上開發的預處理器，允許開發人員輕鬆維護和自訂 CSS 程式碼。例如，它允許在 CSS 程式碼中建立變數和函數。因此，開發人員不需要像我們通常在普通 CSS 中那樣編寫重複的程式碼。

顏色通道函數也是 Less 的另一個重要功能，它將顏色值作為輸入並傳回特定顏色通道的值。

在本教程中，我們將透過範例了解 Less 中的 12 個顏色通道函數。這是所有顏色通道函數的清單。

• Red() 函數

• #Green() 函數

• #Blue() 函數

• Alpha() 函數

• Hue() 函數

• Saturation() 函數

• 亮度()函數

• #Hsvhue() 函數

• Hsvsaturation() 函數

• Hsvvalue() 函數

• Luma() 函數

• Luminance() 函數

Red() 函數

red() 是我們清單中的第一個顏色通道函數。它以顏色值作為參數，傳回0到255之間的值，即目前顏色中紅色的強度。

範例

在下面的範例中，我們將橘色的 rgb 值儲存為「mycolor」變數的值。之後，我們透過傳遞「myclor」作為參數來使用 red() 函數，並將返回值儲存在「redchannle」變數中。

在輸出中，使用者可以觀察到「redchannle」變數的值為 255。

@mycolor: rgb(255, 165, 0);
@redchannel: red(@mycolor);
.element {
   background-color: @redchannel;
}

輸出

.element {
   background-color: 255;
}

Green() 函數

green() 位於我們較少的顏色通道函數清單中的第二個位置。它接受一個顏色值並傳回 0 到 255 之間的綠色強度。

範例

在下面的範例中，我們將 RGB 顏色值儲存在「mycolor」變數中。我們總是將綠色的強度寫成 rgb() 方法的第二個參數。

我們使用 green() 函數從 rgb 值中取得綠色的顏色通道值，在輸出中，我們可以看到它回傳了 15。

@mycolor: rgb(0, 15, 0);
@greenchannel: green(@mycolor);
.element {
   color: @greenchannel;
}

輸出

.element {
   color: 15;
}

藍色()函數

blue() 函數傳回與作為參數傳遞的顏色相關的藍色通道的值。

使用者可以按照下面的範例在 less 中使用 blue() 函數。

範例

在這裡，我們將「#FF5733」十六進位顏色值作為 blue() 函數的參數傳遞，它是橙色的陰影。

輸出顯示 51 作為藍色通道的值，這表示特定顏色中藍色的強度為 51。

@bluechannel: blue(#FF5733);
.output {
   color: @bluechannel;
}

輸出

.output {
   background-color: 51;
}

Alpha() 函數

顧名思義，alpha()函數用來取得目前顏色的不透明度，代表alpha通道值。

在 rgba() 顏色格式中，我們將 alpha 值作為最後一個參數傳遞。

範例

下例中的「color」變數儲存 rgba 顏色值。在這裡，我們將「0.9」作為 rgba 中的 Alpha 通道值傳遞。

我們使用 alpha() 函數來取得「顏色」的不透明度，它傳回 0.9，我們可以在輸出中看到。

@color: rgba(25, 77, 91, 0.9);
@alphachannel: alpha(@color);
.output {
   opacity: @alphachannel;
}

輸出

.output {
   opacity: 0.9;
}

Hue() 函數

hue()函數用於取得特定顏色的色調值。它會傳回色輪上顏色的色調角，其值在0到360之間。

範例

在範例中，我們將 RGB 值儲存在「color」變數中。之後，我們使用了hue()函數來取得目前顏色的色調值。

我們在使用 hsl() 定義顏色時使用了色調值。 Hue() 函數傳回 rgb(34, 9, 0) 顏色值 16。

@color: rgb(34, 9, 0);
@huevalue: hue(@color);
.element {
   color: hsl(@huevalue, 100%, 50%);
}

輸出

.element {
   color: hsl(16, 100%, 50%);
}

飽和度()函數

saturation() 函數傳回作為參數傳遞的顏色的飽和度值，範圍在 0 到 100% 之間。

範例

在此範例中，我們採用 rgb(34, 9, 76) 顏色來取得其飽和度值。這裡，我們在hsl()方法中執行saturation()函數來取得目前顏色的飽和度值。

在輸出中，我們可以觀察到它會回傳 78.8% 作為飽和值

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, saturation(@color), 50%);
}

輸出

.element {
   color: hsl(21, 78.8%, 50%);
}

亮度()函數

brightness()函數用於取得特定函數的亮度。它傳回 0% 到 100% 之間的值。

範例

在這裡，我們取得了 rgb(34, 9, 76) 顏色的亮度值，並在使用 hsl() 方法定義其他顏色時使用它。在輸出中，使用者可以觀察到 Brightness() 方法傳回 16.7% 的值。

@color: rgb(34, 9, 76);
.element {
   color: hsl(21, 78.8%, brightness(@color));
}

輸出

.element {
   color: hsl(21, 78.8%, 16.7%);
}

Hsvhue() 函數

hsvhue()函數用於取得hsv顏色模型中的色調值。

範例

在此範例中，我們使用 hsvhue() 函數來取得 hsv 模型中的色調值，該函數傳回 0 到 360 之間的值。在輸出中，我們可以觀察到它傳回 16 的顏色值。

@ hsvhueValue: hsvhue(rgb(255, 87, 51);
.demo {
   background-color: hsv(@hsvhueValue, 70%,60%);
}

輸出

.demo {
   background-color: hsv(16, 70%, 60%);
}

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中文網其他相關文章！