使用JavaScript調整RGB顏色的飽和度和亮度-css教學-PHP中文網

首頁

web前端

css教學

使用JavaScript調整RGB顏色的飽和度和亮度

Jennifer Aniston

Apr 02, 2025 am 04:20 AM

使用JavaScript調整RGB顏色的飽和度和亮度

最近，我一直在探索顏色設計原理，從亞當·瓦森（Adam Wathan）和史蒂夫·施羅格（Steve Schroger）的作品中汲取靈感。他們的建議強調了除了一些美學上令人愉悅的十六進制代碼之外，需要進行全面的調色板。構建強大的應用需要更廣泛的範圍，包括許多灰色和幾種原色，每種顏色都具有不同的亮度和飽和度。

我的開發工作流程通常涉及十六進制代碼或RGB顏色，但手動調節輕度和飽和度很麻煩。要簡化此過程並防止恆定彩色選擇器調整的重複應變傷害，讓我們探索一些代碼以有效操縱顏色。

利用HSL值

HSL（色調，飽和度，輕度）提供了定義網絡顏色的優越方法，尤其是當預計手動顏色調整時。 HSL表示色調為數字（0-360），飽和度和輕度為百分比。例如：

 div {
  背景色：HSL（155，30％，80％）；
}

這會產生淡淡的薄荷綠色。要添加深色文字，保持一致性，我們可以調整輕度：

 div {
  背景色：HSL（155，30％，80％）；
  顏色：HSL（155，30％，5％）；
}

這會創建一個與背景協調的黑暗文本。對於通話行動按鈕，我們可能會增加飽和度和略低的亮度：

 .call-to-action {
  背景色：HSL（155，80％，60％）；
  顏色：HSL（155，30％，5％）；
}

通過減少飽和度和增加亮度，可以進一步強調文本不太重要的文本：

 div {
  背景色：HSL（155，30％，80％）；
  顏色：HSL（155，30％，5％）；
}

。
  顏色：HSL（155，15％，40％）；
}

HSL的瀏覽器兼容性和聲明性的性質使其比RGB更可取。但是，現有的RGB項目或傳統瀏覽器支持問題可能需要採取其他方法。

利用顏色庫

許多彩色操縱庫簡化了HSL-TO-RGB/十六進制轉換，並提供高級配色方案。一些值得注意的例子包括：

Colvertize（Philipp Mildenberger）：具有轉換和操縱功能的輕質庫。
顏色（Josh Junon）：顏色聲明，處理和提取的流利界面。
TinyColor（Brian Grinstead）：處理各種輸入類型並提供方案生成實用程序。

CSS-Tricks還提供了有關顏色格式轉換的寶貴資源。

顏色網格工具

對於更互動的方法，請考慮顏色網格工具。正如重構UI強調的那樣，僅數學精度並不能保證最佳的調色板。我開發的React應用程序Color Grid會根據選定的色調生成一個調色板，提供了100種飽和度和輕度變化。用戶可以直接從接口復制十六進制代碼或CSS自定義屬性。

RGB顏色操縱技術

以下技術著重於RGB顏色處理。

確定RGB輕度

注意：此方法無法說明色調的固有亮度（例如，黃色比紫色更高的亮度）。它測量混合黑色或白色的量。視覺評估對於準確的輕度判斷仍然至關重要。

輕度是通過平均最高和最低的RGB值來計算的，然後除以255：

函數getlightnessofrgb（rgbString）{
  const rgbintArray =（rgbString.replace（ / / g，''）.slice（4，-1）.split（'，'，'）。map（e => parseint（e）））;
  const最高= math.max（... rgbintarray）;
  const最低= Math.min（... rgbintarray）;
  返回（最低） / 2/255;
}

飽和RGB而不會影響輕度或色調

飽和RGB提出挑戰：灰色缺乏色調信息，而實現純色則需要50％的輕度。此示例保持輕度：

要飽和，增加最低和最高RGB值之間的差異。保持輕度需要等於0-255限制的最高和最低值的同等增加/減小。可用的飽和範圍由以下確定。

灰色（相同的輕度）和255之間的差異。
灰色（相同的輕度）和0之間的差異。

 // ...（從上方開始getlightnessofrgb函數）...

const grayval = getlightnessofrgb（'rgb（205，228，219）'） * 255; // 217
const飽和度= MATH.ROUND（MATH.MIN（255 -GRAYVAL，GRAYVAL））; // 38

// ...（飽和計算的其餘）...

中間值的調整與最高和最低值的變化成正比。完整的飽和功能非常涉及並省略了簡潔，但核心概念已提出。