css還有這種顏色寫法，學(xué)到了

相信您已經(jīng)熟悉顏色的 RGB 和 HEX 表示，因?yàn)檫@是大多數(shù)文章/教程在編寫 CSS 顏色時(shí)使用的，但這些并不是在 CSS 中編寫顏色的最佳方法。HEX 和 RGB 很難理解，使顏色變淺/變深或?qū)㈩伾珡募t色轉(zhuǎn)換為橙色并不容易。這就是 HSL 的用武之地。HSL 是一種更容易閱讀的格式，它使更改顏色的亮度或色調(diào)等操作變得簡單。

什么是 HSL？

HSL 代表色相、飽和度和亮度。這類似于 RGB 如何通過將其紅色、綠色和藍(lán)色值組合在一起來表示顏色，但使用 HSL，這些值更直觀。

色調(diào)

顏色的色調(diào)由圍繞一個(gè)圓圈的度數(shù)表示。試想一個(gè)色輪，0 度代表紅色，180 度代表青色，360 度代表同樣的紅色。

飽和

飽和度由 0 到 100 之間的百分比表示，并確定顏色的灰色程度。如果顏色是 100% 飽和度，則根本沒有灰色，而飽和度為 0% 的顏色將是沒有顏色的灰色陰影。

亮度

亮度也用百分比表示，并確定顏色的白色或黑色。如果顏色是 50% 的亮度，那么這意味著沒有額外的白色或黑色添加到顏色中。隨著百分比增加到 50% 以上，它會(huì)在顏色中添加更多的白色，直到在 100% 亮度下達(dá)到完全白色。隨著百分比降低到 50% 以下，它會(huì)為顏色添加更多黑色，直到在 0% 亮度下達(dá)到完全黑色

如何使用 HSL？

現(xiàn)在我們了解了 HSL 是什么，我們可以談?wù)勅绾问褂盟?。它的工作原理與 RGB 一樣，您可以在 CSS 中調(diào)用該hsl函數(shù)來定義 HSL 顏色。

.class {
  /* Pure red #FF0000 */
  background-color: hsl(0, 100%, 50%);
}

傳遞給 hsl 的第一個(gè)值是色調(diào)，它是 0 到 360 之間的度數(shù)，第二個(gè)值是飽和度，它是 0% 到 100% 之間的百分比值，最后傳遞的最終值是亮度，它是一個(gè)百分比值在 0% 和 100% 之間。您還可以使用hsla來表示部分透明的顏色。這個(gè)函數(shù)接受第四個(gè)參數(shù)，它是一個(gè)介于 0 和 1 之間的值，其中 1 是完全不透明的，而 0 是完全透明的。

為什么這很重要？

像這樣寫顏色可能看起來有點(diǎn)奇怪，因?yàn)槟愫芸赡芰?xí)慣于 HEX 或 RGB，但是一旦你習(xí)慣了它，它會(huì)讓寫 CSS 變得更加愉快。以下是幾個(gè)原因：

輕松更改亮度/飽和度

正如我在本文開頭提到的，您經(jīng)常需要在 CSS 中更改顏色的亮度或飽和度，以執(zhí)行諸如為按鈕引入懸停狀態(tài)之類的操作。使用 HEX 可能會(huì)很痛苦，因?yàn)闆]有人知道暗 10% 的版本#FA652F是什么，但是暗 10% 的版本hsl(16, 95%, 58%)很容易計(jì)算。您只需將亮度值降低 10% 即可hsl(16, 95%, 48%)。

您甚至可以更進(jìn)一步，使用calcCSS 中的自定義屬性為您自動(dòng)執(zhí)行此操作。

.btn {
  --background-hue: 200;
  background-color: hsl(
    var(--background-hue),
    100%,
    calc(50% + var(--lightness-offset))
  );
}
.btn:hover {
  --lightness-offset: -10%;
}
.btn:focus {
  --lightness-offset: -20%;
}
.btn-danger {
  --background-hue: 0;
}

使用這少量代碼，我們?cè)O(shè)置了一個(gè)基本的 btn 類，它總是使背景在懸停時(shí)變暗 10%，在焦點(diǎn)上變暗 20%。我們也這樣做了，以便我們可以更改其他類型按鈕的按鈕色調(diào)，我們甚至不需要修改這些新按鈕類型的懸停和焦點(diǎn)狀態(tài)，因?yàn)樗鼈兌际鞘褂米远x屬性和calc.

輕松獲取相關(guān)顏色

如果您熟悉任何顏色理論，那么您就會(huì)知道理解互補(bǔ)色、原色/次色、相似色等很重要。使用 RGB 或 HEX 很難找出這些不同類型的顏色，但使用 HSL 很容易找到諸如互補(bǔ)色之類的東西。這是因?yàn)榛パa(bǔ)色只是色輪另一側(cè)的顏色，在 HSL 的情況下，這意味著它們的色調(diào)彼此相差 180 度。

這很重要，因?yàn)槟梢允褂眠@些知識(shí)在 CSS 中創(chuàng)建一個(gè)顏色主題，該主題使用數(shù)學(xué)來計(jì)算這些互補(bǔ)色，并允許您一次輕松地更改整個(gè)站點(diǎn)的顏色主題。下面是我建立的一個(gè)可以做到這一點(diǎn)的網(wǎng)站的例子。

輕松更改色調(diào)

最后，HSL 的最后一個(gè)重大勝利是它可以輕松更改顏色的色調(diào)。如果你想讓你的紅色更橙色一點(diǎn)，你可以通過讓你的色調(diào)更大一點(diǎn)來做到這一點(diǎn)，因?yàn)槌壬谏喩系募t色之后。這真的很有用，因?yàn)樵谠O(shè)計(jì)和開發(fā)的早期階段，像這樣的小顏色變化非常普遍，并且能夠輕松地制作它們可以節(jié)省大量時(shí)間。

結(jié)論

HSL 是一種在 CSS 中表示顏色的不同方式，它不僅更易于閱讀，而且更易于在 CSS 中修改和使用。在我看來，它是 CSS 中最好的顏色格式。

文為大家推薦一些實(shí)用的JavaScript 顏色生成器，希望在今后的前端開發(fā)過程中有所幫助！

1、chroma.js（擁有各種各樣顏色操作的 JavaScript 庫）

2、color（JavaScript 顏色轉(zhuǎn)換和操作庫）

3、PleaseJS（隨機(jī)創(chuàng)建出賞心悅目的顏色和配色方案）

4、TinyColor（快速、輕巧的顏色操作和轉(zhuǎn)換庫）

5、randomColor（JavaScript 顏色生成器）

6、Vibrant.js（從圖像提取主要顏色）

切圖 qietu(.com)

果提供了 alpha 值，則將顏色代碼轉(zhuǎn)換為rgb()或 rgba() 字符串。

使用按位右移運(yùn)算符和帶有&(and) 運(yùn)算符的掩碼位將十六進(jìn)制顏色代碼（帶或不帶前綴#）轉(zhuǎn)換為具有 RGB 值的字符串。
如果是 3 位色碼，請(qǐng)先轉(zhuǎn)換為 6 位版本。
如果在 6 位十六進(jìn)制旁邊提供了 alpha 值，則rgba()返回字符串。

JavaScript

const hexToRGB=hex=> {
  let alpha=false,
    h=hex.slice(hex.startsWith('#') ? 1 : 0);
  if (h.length===3) h=[...h].map(x=> x + x).join('');
  else if (h.length===8) alpha=true;
  h=parseInt(h, 16);
  return (
    'rgb' +
    (alpha ? 'a' : '') +
    '(' +
    (h >>> (alpha ? 24 : 16)) +
    ', ' +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ', ' +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : '') +
    ')'
  );
};

示例：

hexToRGB('#27ae60ff'); // 'rgba(39, 174, 96, 255)'
hexToRGB('27ae60'); // 'rgb(39, 174, 96)'
hexToRGB('#fff'); // 'rgb(255, 255, 255)'

更多內(nèi)容請(qǐng)?jiān)L問我的網(wǎng)站：https://www.icoderoad.com

在線咨詢

上一篇：Node.js 實(shí)現(xiàn)搶票小工具&短信
下一篇：鄭州Web前端進(jìn)階教程之Vue中動(dòng)畫效果實(shí)現(xiàn)方法

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商